debugger()

当使用Dart Observatory(或另一个Dart调试器,例如IntelliJ IDE中的调试器),可以使用debugger()语句插入编程式断点

csharp 复制代码

void testFunction(double offset) {
    debugger(when: offset>30);
}

print

Dart print()将输出到系统控制台,可以使用flutter logs(封装adb logcat)来查看

debugPrint

如果一次输出太多, Android会丢弃一些日志行,使用debugPrint().它封装了print,内容过多时回分批输出,避免被Android内核丢弃

toString toStringDeep

toString: Flutter框架很多类都有toString实例,输出信息包括对象的运行时类型,类名以及关键字段,
toStringDeep: 从该点返回整个子树的多行描述。

调试模式

flutter run --debug 在Flutter应用调试过程中, Dart assert 语句被启用,并且会执行很多运行时检查来验证是否违反了一些不可变的规则,当规则被违反时,就会在控制台打印一些日志, 并带上一些上下文信息来帮助追踪问题的根源
flutter run --release 会关闭调试模式并使用发布模式, 但也会同时关闭了 Observatory 调试器
flutter run --profile 中间模式(profile mode), 关闭Observatory之外的所有调试辅助工具

断点

断点是最实用的调试工具之一, 代码执行到断点行就会暂停, 我们就可以看到当前上下文所有变量的值, 然后一步一步执行代码

调试Flutter树

Flutter框架三棵树都提供了将其当前状态或事件转储(dump)到控制台(debugPrint)的方法

Widget树 -> `debugDumpApp()`

转储Widget树的状态,只有App已经构建了至少一次(build())之后, 才能使用

显示了所有Widget(等于在Widget树的根调用toStringDeepWidget)
会看到很多在代码中没有出现的Widget,是Flutter框架在build()函数主动插入的

渲染树 -> debugDumpRenderTree()

转储渲染树, 也是在build()阶段后

等于 RenderObject 根节点对象的 toStringDeep 函数的输出
当调试出现问题时, 关键是看constraints和size字段,约束沿着树向下传递,尺寸向上传递

Layer 树 -> debugDumpLayerTree()

渲染树是分层的, 而最终绘制需要把不同的层合并成Layer,如果需要调试合成问题, 使用debugDumpLayerTree()

上述结果是根Layer的toStringDeep输出的根部的变化是应用设备像素比的变换,图中每个逻辑像素代表两个设备像素

调度

要找出相对于帧开始/结束事件发生的位置,可以切换debugPrintBeginFrameBanner和debugPrintEndFrameBanner

bash 复制代码

I/flutter : ▄▄▄▄▄▄▄▄ Frame 12         30s 437.086ms ▄▄▄▄▄▄▄▄
I/flutter : Debug print: Am I performing this work more than once per frame?
I/flutter : Debug print: Am I performing this work more than once per frame?
I/flutter : ▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀

debugPrintScheduleFrameStacks还可以打印导致当前帧被调度的调用堆栈

可视化调试

csharp 复制代码

void main() {
  // Flutter框架中以debug...开头的任何内容只能在调试模式下工作
  
  // 可视化方式调试布局问题, 这是来自rendering 库的布尔值
  // 启用后所有的盒子都会得到一个明亮的深颜色边框, padding显示浅蓝色, 子Widget周围有一个深蓝色框
  // 对齐方式(Center和Align)显示黄色箭头, 空白(没有任何子节点的Container)以灰色显示
  debugPaintSizeEnabled = true;
  // 类似 debugPaintSizeEnabled, 对于有基线的对象,文字基线以绿色显示, 表意(ideographic)基线以橙色显示
  debugPaintBaselinesEnabled = true;
  // 点击的对象都会以深绿色突出显示
  debugPaintPointersEnabled = true;
  // 橙色或轮廓线标出每个层的边界
  debugPaintLayerBordersEnabled = true;

  runApp(const MyApp());
}

调试动画

最简单的方法是减慢它们的速度, timeDilation 变量设置为大于1.0的数字, 例如50

调试性能问题

debugPrintMarkNeedsLayoutStacks和debugPrintMarkNeedsPaintStacks标志, 每当渲染盒被要求重新布局和重新绘制时, 这些都会被堆栈跟踪记录到控制台

统计应用启动时间

要统计手机有关Flutter App启动所需时间的详细信息,可以运行flutter run时使用trace-startup和profile选项

css 复制代码

flutter run --trace-startup --profile

保存为start_up_info.json,在Flutter的build目录下,输出列出了(ms)所用的时间

进入Flutter引擎时
展示应用的第一帧
初始化Flutter框架时
完成Flutter框架初始化时

DevTools

Flutter DevTools 是Flutter可视化调试工具, 将各种调试工具和能力集成到一起了,并提供可视化调试界面,

Flutter常用调试方法介绍