Debugging of flutter application


Program debugging is a test conducted by hand or compiler before the program is put into operation. It is mainly used to correct syntax and logic errors. Program debugging is an essential step to ensure the correctness of computer information system.
In the development of flutter application, Android studio and vscode are two common integrated development environments, so the project debugging is also carried out around these two ides. Android Studio provides a complete integrated ide experience for flutter, so the debugging skills of Android are also applicable to flutter. In flutter, debugging code is mainly divided into output log, breakpoint debugging and layout debugging, so the debugging of flutter will also focus on these three topics.

Android Studio

Output log

In order to track and record the running situation of the application, we usually output the log in some key steps during the development, and we use the print function to print the relevant context information on the console in the fluent. With this information, you can locate possible problems in the code. However, due to the I / O operation involved, using print to print information will consume more system resources. At the same time, these output data are likely to expose the execution details of the app, so we need to block these outputs when we release the official version.

However, the most engineering approach is to read the project configuration file and turn on the log debugging function according to the running environment. In order to enable the log debugging function according to different running environments, we can use the DebugPrint provided by flutter instead of print. The DebugPrint function also prints messages to the console, but unlike print, it provides the ability to customize printing. In other words, we can assign a function declaration to the DebugPrint function to define the printing behavior.

For example, in the following code, we define the DebugPrint function as an empty function body, so that we can cancel printing with one key.

DebugPrint = (string message, {int wrapwidth}) {}; // null implementation

In flutter, we can use different main files to represent the entries in different environments. Similarly, in the development of fluent, you can use the main.dart And main- dev.dart To define the different printing log behaviors of production environment and development environment respectively.

In the following example, we define DebugPrint of the production environment as an empty implementation and the DebugPrint of the development environment as synchronous printing data, as shown below.

void main() {
  //DebugPrint is specified as an empty executable, so it does nothing
  debugPrint = (String message, {int wrapWidth}) {};

void main() async {
  //Specify DebugPrint as synchronous print data
  debugPrint = (String message, {int wrapWidth}) => debugPrintSynchronously(message, wrapWidth: wrapWidth);

We can see that in code implementation, as long as we replace all the prints in the application with DebugPrint, we can meet the needs of logging in the development environment, and also ensure that the execution information of the application in the production environment will not be accidentally printed.

breakpoint debugging

It is convenient to output log, but if you want to get more detailed or more granular context information, static debugging is very inconvenient. At this time, we need a more flexible dynamic debugging method, namely breakpoint debugging. Breakpoint debugging can make the code pause on the target statement and let the program execute the subsequent code statements one by one, which helps us pay attention to the detailed change process of all variable values in the code execution context in real time.

Android Studio provides breakpoint debugging function. Debugging flutter application is exactly the same as debugging native Android code. It can be divided into three steps: marking breakpoints, debugging applications, and viewing information.

Take the default counter application template of flutter as an example to observe the code_ The change of counter value can realize the whole process of breakpoint debugging.

The first is marking breakpoints. Since we want to observe_ The counter value changes, so the latest_ It is ideal to add breakpoints to counter values to observe their changes. Therefore, by clicking the mouse to the right of the line number, we can load the breakpoint to the position shown in the initialization text control.

In the example below, we want to observe_ If the counter is normal when it is equal to 20, a conditional breakpoint is specially set_ Counter = = 20, so the debugger will only pause when the counter button is clicked the 20th time.

Debugging of flutter application

When a breakpoint is added, a circular breakpoint mark will appear on the corresponding line number, and the entire line of code will be highlighted. At this point, the breakpoint is added. Of course, we can also add multiple breakpoints at the same time to better observe the execution of the code.

The next step is to debug the application. This time, we need to click the bug icon on the toolbar to start the app in debug mode, as shown in the figure below.
Debugging of flutter application
After the debugger is initialized, we will start the program. Because the breakpoint is set, when the code runs to the breakpoint position, it automatically enters the debug view mode, as shown in the following figure.

Debugging of flutter application
According to the different functions, the debug view mode can be divided into four areas, namely area a control debugging tool, B area step debugging tool, C area frame debugging window, D area variable viewing window.

The control debugging tool area is mainly used to control the execution of debugging, as shown in the figure below.
Debugging of flutter application
We can click the pause button to let the program run normally by clicking the pause button, or restart the program. Of course, we can click the edit breakpoint button to edit the breakpoint information, or click the disable breakpoint button to cancel the breakpoint.
The stepping debugging tool area is mainly used to control the stepping of breakpoints, as shown in the figure below.
Debugging of flutter application
You can click the step-by-step button to make the program step-by-step (but not into the method body), click the step-in or force step-in button to let the program execute one by one, or even click the run to cursor button to make the program execute to the cursor. If you think that the method body where the breakpoint is located is no longer needed to be executed, you can click the step out button to make the program execute the currently entered method immediately, and then return to the next line at the method call. You can also click the expression calculation button to modify the value of any variable by assignment or expression.

Area C is used to indicate the function execution stack contained in the current breakpoint, while area D is the variable corresponding to the function frame in its stack.

Layout debugging

In addition to log output and breakpoint debugging, layout analysis is also an indispensable means of code optimization in development. With the help of fluent inspector visualization tool, we can diagnose layout problems. Open Android studio and click the “open devtools” button on the toolbar to start the fluent inspector, as shown in the figure below.
Debugging of flutter application
Subsequently, Android studio will open the browser and display the widget tree structure of the flutter application in the panel. As you can see, the widget tree structure shown by the fluent inspector corresponds to the widget hierarchy implemented in the code.
Debugging of flutter application
In addition to layout debugging, you can also use the fluent inspector for layout tuning.


In addition to Android studio, vscode is also a relatively common flutter application development tool. Using the graphical debugging interface provided by vscode, developers can easily debug flutter applications. Use vscode to open the flutter project, and then click the breakpoint debugging button of vscode to start debugging, as shown in the figure below.
Debugging of flutter application
It should be noted that the first time vscode is used for breakpoint debugging, dart devtools debugging tool needs to be installed and activated. If you are not sure whether devtools tool has been bound, you can use the shortcut key [Command + Shift + P] to open the vscode toolbar, and then enter open devtools to open the debugging window.
Then, set a breakpoint at the code to be debugged, and click the start debugging button on the top left to start debugging. When the code runs to the breakpoint, it will stay at the breakpoint, and then relevant debugging operations can be carried out.

Recommended Today

PHP 12th week function learning record

sha1() effect sha1()Function to evaluate the value of a stringSHA-1Hash. usage sha1(string,raw) case <?php $str = “Hello”; echo sha1($str); ?> result f7ff9e8b7bb2e09b70935a5d785e0cc5d9d0abf0 sha1_file() effect sha1_file()Function calculation fileSHA-1Hash. usage sha1_file(file,raw) case <?php $filename = “test.txt”; $sha1file = sha1_file($filename); echo $sha1file; ?> result aaf4c61ddcc5e8a2dabede0f3b482cd9aea9434d similar_text() effect similar_text()Function to calculate the similarity between two strings. usage similar_text(string1,string2,percent) case […]