Flutter Debugging and DevTools
This section will introduce Flutter's debugging tools and common debugging techniques.
Introduction to Flutter DevTools
Flutter DevTools is a suite of tools for debugging and analyzing Flutter applications.
Launch DevTools
$ flutter run
After running the application, the terminal will display the DevTools URL, usuallyhttp://127.0.0.1:9100
Common Commands
| Command | Description |
|---|---|
| flutter doctor | Check development environment configuration |
| flutter analyze | Static Code Analysis |
| flutter test | Run tests |
print and debugPrint
Example: Basic Debug Output
// Basic printing
print('Hello Debug'); // Output to console
// debugPrint avoids long text truncation
debugPrint('This is a long text that can be output in full without being truncated');
// Conditional printing
if (debugMode) {
print('Debug info');
}
// Print object (requires toString)
final user = {'name': 'Zhang San', 'age': 25};
print('User info: $user'); // Output: User info: {name: John Doe, age: 25}
print('Hello Debug'); // Output to console
// debugPrint avoids long text truncation
debugPrint('This is a long text that can be output in full without being truncated');
// Conditional printing
if (debugMode) {
print('Debug info');
}
// Print object (requires toString)
final user = {'name': 'Zhang San', 'age': 25};
print('User info: $user'); // Output: User info: {name: John Doe, age: 25}
Assertion - assert
Assertions are used to check conditions during development and only take effect in debug mode.
< h2 class="example">Example: Using assertions
// Simple assertion
assert(user != null, 'User cannot be empty');
// Function parameter validation
void setAge(int age) {
// Age must be greater than 0
assert(age > 0, 'Age must be greater than 0');
this.age = age;
}
// Assertions in UI building (development only)
Widget build(BuildContext context) {
// Ensure context is not null
assert(context != null);
// Ensure there is a parent Scaffold
assert(debugCheckHasMaterial(context));
return Scaffold(...);
}
assert(user != null, 'User cannot be empty');
// Function parameter validation
void setAge(int age) {
// Age must be greater than 0
assert(age > 0, 'Age must be greater than 0');
this.age = age;
}
// Assertions in UI building (development only)
Widget build(BuildContext context) {
// Ensure context is not null
assert(context != null);
// Ensure there is a parent Scaffold
assert(debugCheckHasMaterial(context));
return Scaffold(...);
}
Breakpoint debugging
Set breakpoints in VS Code or Android Studio for debugging.
VS Code debugging
- Click on the left side of the line number to set a breakpoint
- Press F5 or click the debug button to start debugging
- Use the debug toolbar to control program execution
Common Breakpoint Commands
| Operation | Description |
|---|---|
| Continue / F5 | Continue execution to the next breakpoint |
| Step Over / F10 | Step over, without entering functions |
| Step Into / F11 | Step into, entering functions |
| Step Out / Shift+F11 | Step Out of Current Function |
Flutter Inspector
Flutter Inspector is part of DevTools, used to visualize and inspect the Widget tree.
Main Features
- Widget Tree: View the Widget hierarchy structure
- Layout Explorer: Check layout constraints
- Performance Overlay: Display performance metrics
Debugging Common Issues
Example: Debugging UI Not Updating
// Issue: UI not updating
// Reason: setState was not called after modifying the state
// Wrong example
void _increment() {
_counter++; // State has changed, but the UI won't update!
}
// Correct example
void _increment() {
setState(() {
_counter++; // Must call setState
});
}
// Issue: state management is messy
// Suggestion: Use Provider or other state management solution
// Reason: setState was not called after modifying the state
// Wrong example
void _increment() {
_counter++; // State has changed, but the UI won't update!
}
// Correct example
void _increment() {
setState(() {
_counter++; // Must call setState
});
}
// Issue: state management is messy
// Suggestion: Use Provider or other state management solution
other extensionsCommon tools for debugging: print for outputting logs, Inspector for inspecting the Widget tree, and Timeline for analyzing performance.