在 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 启动,则没有这个功能。
真机调试
开启真机调试的步骤:
- 打开 开发者选项 还有 USB 调试。
- 使用 USB 将手机连接电脑,若手机出现提示,授权电脑访问手机。
- 在命令执行 flutter devices 确认连接电脑的设备。
-
然后可通过执行 flutter run 运行我们的 app。
在手机上开启 USB 调试模式。
image.png
网友评论