Let’s Debug the Dart DevTools
Have you ever wondered how to inspect apps network traffic or why yellow and black striped warning image shows up in your emulator. If you are looking for answer to these questions this article might help you with that.
DevTools helps you analyze and debug in an easier way. When you run the DevTools, server launches, and a browser instance opens pointing to the DevTools app and it looks like the following.
How can DevTools help you?
With DevTools:
- Inspect the UI layout and state in detail
- Record CPU profil of app
- Determine UI performance issues
- Record network profile of app
- Source-level debugging
- View general log and diagnostics information about a running app
- Analyze code and app size
Inspecting DevTools
DevTools contains 8 tools inside which we will cover one by one.
1- Flutter Inspector Tab
I think this one is the most common used tool. Why? Because it helps to the most common error :) . Yes, you guessed right. With this tool you can understand screen layout better, resolve overflow issues easily. Also it shows the changes made instantly.
Lets check parts of Flutter inspector.
It shows the changes made instantlyAs you can see i split the page into parts.
Red Part
This part is a widget tree which helps us for finding particular widget. When you click one of the widget, layout explorer will be show up for that widget.
Yellow Part
Layout explorer helps us finding overflow issues in selected widget.
Dark Blue Part
This part appears in layout explorer. With it we can easily play cross axis and main axis positions(spaceBetween,center…). Also there is flex parameter in the bottom of dark blue border which helps us for understanding effect of flex in the ui.
Green and Grey Parts
These are the same parts but in different places. With these we can see properties of selected widget.
2- Performance Tab
Red Part
This part is called frame chart. The length and color of the card informs its performance. For example if the card is red it means that frame had a performance issue. If you click one of the card detailed information will be show up below.
Yellow Part
You can see the low level events for that particular frame with millisecond precision.
Green Part
The bottom up tab helps us to find which function cause to the performance issue.
3- CPU Profile Tab
First start recording a CPU profile by clicking record. When you are done recording, click stop. At this point, CPU profiling data is pulled from the VM.
Red Tab
The call tree tab shows the method trace for the CPU profile. This table is a top-down representation of the profile, meaning that a method can be expanded to show its callees.
Green Tab
This tab of the profiler shows CPU samples for the recorded duration. The width of each stack frame represents the amount of time it consumed the CPU.
4- Memory Tab
Memory tab lets you peek at how an isolate is using memory at a given moment.
Red Part
This part is called Memory overview chart which is a timeseries graph of collected memory statistics, to visualize the state of the Flutter memory. Mine is clean looking but in complex apps there are lots of icons shows up in this chart so you can check them from here.
Green Tab
The Analysis tab collects memory snapshots both user initiated and auto-collected by DevTools, when DevTools detects memory spikes.
5-Network Tab
On the left side, the network request your app has made are listed. You can see the details via clicking on the right. Also you can use the search and filter controls to find a specific request or filter requests from the top right corner.
6- Logging Tab
The logging tab displays events from the Dart runtime, application frameworks and application-level logging events. Same as on the network tab you can search specific log. Also if you dont want to see a type of log you can insert ‘-’ before the name of the log in the search bar.
7- App Size Tab
To use the app size tool, you’ll need to generate a Flutter size analysis file and you can generate it using the code below. After running you will get a json file which we will use for analyze the app size.
flutter build <your target platform> — analyze-size
After uploading, a screen like the one below welcomes us.
Blue Part
The analysis tab allows you to inspect a single snapshot of size information. The blue boxes are called treemap. A treemap is a visualization for hierarchical data. In dominator tree we can see why a piece of code is included in your compiled application.
Red Part
The diff tab allows you to compare two snapshots of size information. The two size information files you are comparing should be generated from two different versions of the same app; for example, the size file generated before and after changes to your code. You can visualize the difference between the two data sets using the treemap and table.
8- Debugger Tab
If you are using VS Code , Devtools hides debugger tab because VS Code has a built-in debugger.
You can set breakpoints to stop execution code in that line. To set a breakpoint, click the left side of code line numbers. Clicking again removes the breakpoint. When your application encounters a breakpoint, it pauses there and you can inspect individual objects results from variables are. Also when paused, the three stepping buttons become active which helps you to stepping through source code(step in, step over, step out).
We covered all DevTools and i hope it was helpful. See you in the next article 👊.
Resources:
