YouTip

# Flutter Debugging and DevTools This section introduces Flutter debugging tools and common debugging techniques. * * * ## Introduction to Flutter DevTools Flutter DevTools is a suite of tools for debugging and profiling Flutter applications. ### Launching DevTools $ flutter run After running the app, the terminal will display the DevTools URL, usually `http://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 print print('Hello Debug');// Output to console // debugPrint avoids long text truncation debugPrint('This is a very long text that can be fully output without being truncated'); // Conditional printing if(debugMode){ print('Debug information'); } // Print objects (need toString) final user ={'name':'Zhang San','age':25}; print('User info: $user');// Output: User info: {name: Zhang San, age: 25} * * * ## Assertions - assert Assertions are used to check conditions during development, and only take effect in debug mode.

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 (only during development) 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 1. Click on the left side of the line number to set a breakpoint 2. Press F5 or click the debug button to start debugging 3. Use the debug toolbar to control program execution ### Common Breakpoint Commands | Operation | Description | | --- | --- | | Continue / F5 | Continue execution until next breakpoint | | Step Over / F10 | Step execution, do not enter function | | Step Into / F11 | Step execution, enter function | | 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 Widget hierarchy structure * **Layout Explorer**: Inspect layout constraints * **Performance Overlay**: Display performance metrics * * * ## Common Problem Debugging ## Example: Debugging UI Not Updating // Problem: UI not updating // Cause: Did not call setState after modifying state // Wrong example void _increment(){ _counter++;// State has changed, but UI will not update! } // Correct example void _increment(){ setState((){ _counter++;// Must call setState }); } // Problem: Messy state management // Suggestion: Use Provider or other state management solutions > Common debugging tools: print for log output, Inspector for checking Widget tree, Timeline for performance analysis.