When I first started, I saw that everyone was using console.log() as a debugging tool, so to speak, many people only used console.log(). When LEARNING about Flutter development app, I was thinking, besides using print() for debugging, what more efficient methods does Flutter provide?

Unfortunately, WHEN I developed my first Flutter App, I encountered almost every possible error type, which made me realize that I needed to summarize this knowledge, expand my Arsenal and improve my development efficiency.

Why summarize debugging tips

  • Most developers, when debugging, only know how to use print. Although this method is easy to use, it can only fail to debug complex code efficiently, which is inefficient and easy to blow the confidence of developers.
  • To do a good job, he must sharpen his tools. Mastering powerful debugging tools is the key to improving development efficiency, improving development experience and promoting positive cycle.
  • Develop good development habits that allow us to think deeply about why bugs occur, rather than making debugging superficial.

What are the debugging techniques

I classified the errors I encountered into syntax and code errors, runtime errors and logic errors. Meanwhile, I also summarized the interface debugging skills from the official documents and shared them with you.

Syntax and code errors [Getting started]

Syntax and code errors are low-level errors that are warnings or error messages already displayed by the IDE while writing code. If we don’t fix it, the IDE won’t compile the code and push it to the device after saving it.

The solution is simply to read the error messages in the red line and analyze what went wrong in your code. There are several typical mistakes that must be made by a novice in the development of Flutter. If, like me, you have made all of them, you are still getting started.

  1. The lack of reference

    Dart. Dart. Dart. In Flutter, because of the idea that everything is a widget, almost every.dart file that is written involves a widget.Don’t assume you have it in Main.dartimport 'package:flutter/material.dart';Other. Dart files are not needed.

  2. typo
  3. Symbol error

    In Dart, you must end a statement with a semicolon. Semicolons are not omitted. Learn more about the syntax of Dart atThe official documentation.

2. Runtime errors

Runtime errors are errors that do not occur during code writing, but are printed in the App (yellow warning bar, red screen) and in the console when the App is running. These error messages will tell you what went wrong and how to fix it.

One difficulty in fixing runtime errors is not knowing how to read the error log. Based on the run-time errors I encountered, I divided them into two categories and summarized the corresponding troubleshooting methods.

  1. There is an error stack

    For those with an error stack, you just need toFind the error cause and locate the error code, can quickly solve the problem.

  2. There are guidelines

    For this kind of official guidance content, needRead the instructions carefully to solve the problem. For example, Flutter found that our widget was too big for the render area. The official suggestion was to use the Flex factor to force the size of subarrays, or use the ListView component instead. It’s important to learn English well!

3. Logical errors [difficult points]

Logic error refers to the fact that the App does not have any of the above runtime errors or crashes during the operation of the App, but the running results on the App do not meet our expectations.

This type of error is often difficult to locate, and the most common solution is to find the corresponding business code and check whether there is a problem with method calls, numerical calculations, or parameter passing. If the problem cannot be rectified in this simple way, start using the Flutter debugging tool.

Take my real case for example:

AddResult (result) {// I didn't realize I needed to call this.setstate () to update the data to results.add(result); }Copy the code
  1. The print function

My initial judgment is that the addResult function is not called, but when I add the print function, it blows my face

  addResult(result) {
    results.add(result);
    print(results); // The result shows that the addResult function is called, and the results array has a new member}Copy the code

The print function can print any object to the debug console. In the Flutter framework, most classes implement the toString function (such as the List object in this example), which makes it easy and quick to detect these minor problems.

  1. Breakpoint debugging

Many people don’t use breakpoint debugging because they find it cumbersome to use. In fact, VS Code only requires two steps to enable breakpoint debugging of Flutter:

Find the step where the change in value does not match your expectations
Make it easier to understand the code

4. Interface debugging

A useful interface debugging tool in the Flutter framework is Debug Painting, which allows you to draw layout boundaries for the interface.

In VS Code, enabling this drawing function is as simple as opening the command panel (CMD + Shift + P) and entering the Flutter Toggle Debug Painting during Flutter App debugging

Clearly showing the layout boundaries of each element helps developers quickly identify layout problems

conclusion

There is a lot of content, and finally to sum up, this paper summarizes three types of errors and an interface debugging method according to the pit I stepped on in the process of developing calculator App.

  • Types of errors: syntax and code errors (three typical examples), runtime errors (two troubleshooting methods), and logic errors (two debugging methods).
  • Interface Debugging: Use the Debug Painting tool for Flutter.

In the process of learning, constantly discover their own shortcomings, can find the space to improve their own; Often summarize, sublimate methodology, can continuously improve their own.