在 Flutter 里有几种调试方式。

• 断点调试。
• debugger 调试。
• rendering 调试。
• 日志调试。
• 运行状态调试。
• 真机调试。

断点调试

在 Flutter 进行断点调试非常简单，只需要在 Vscode 上打上一个断点，按 F5 就会停在断点处。通过左边的调试栏，观察断点处的变量以及栈堆情况。

image.png

debugger调试

除了打断点，也可以使用 debugger API 的方式。

import 'dart:developer';

void someFunction(double offset) {
    debugger(when: offset > 30.0, message: 'offset 大于 30 时，中断');
    // ...
}

这段代码表明，当 offset 这个变量的值大于 30.0 时中断运行，并输出 message 的内容。debugger 代码只会在开发阶段运行。

rendering 调试

rendering 即开启布局线，当打开 rendering 时，会在界面上看到一些布局线，以便于修复布局效果。

import 'package:flutter/rendering.dart';

void main() {
    debugPaintSizeEnabled = !true;
    runApp(new MyApp());
}

打开之后看到的效果。

image.png

日志调试

日志调试，直接使用 print 输出内容即可，在 AS、Vscode 里的控制台/调试控制台都可以看到。

为了方便，定义一个 Debug 类。

class Debug {
    static log(String tag, String text) {
        print('[$tag] $text');
    }
    static info(String tag, String text) {
        print('[$tag] $text');
    }
    static success(String tag, String text) {
        print('[$tag] $text');
    }
    static error(String tag, String text) {
        print('[$tag] $text');
    }
}

运行状态调试

在使用命令：flutter run 时，会有一个 Observatory URL 地址提供（一般为：http://127.0.0.1:8108/），那就是运行状态调试，打开之后可以看到应用的 GC、VM 方面的信息。注意，如果使用 F5 启动，则没有这个功能。

真机调试

开启真机调试的步骤：

1. 打开 开发者选项 还有 USB 调试。
2. 使用 USB 将手机连接电脑，若手机出现提示，授权电脑访问手机。
3. 在命令执行 flutter devices 确认连接电脑的设备。

4. 然后可通过执行 flutter run 运行我们的 app。
   在手机上开启 USB 调试模式。

   
   image.png