flutter调试

• showPerformanceOverlay
  显示性能叠加层的最简单方法是将MaterialApp.showPerformanceOverlay或WidgetsApp.showPerformanceOverlay设置 为true。
  https://flutter.dev/docs/testing/ui-performance

Widget build(BuildContext context) {
    return MaterialApp(
      showPerformanceOverlay: true, // 开启
      title: 'My Awesome App',
      home: MyHomePage(title: 'My Awesome App'),
    );
  }

会在手机上显示GPU和UI的ms/frame，红色代表有问题
详情见：https://juejin.im/post/5c123e7d6fb9a049df23f12e

• Observatory
  https://dart-lang.github.io/observatory/get-started.html

捕捉SkPicture分析每一条绘图指令

https://mp.weixin.qq.com/s/RNhdYtoQ8RQcjIXJReGZWA

• flutter run --profile --trace-skia
• 打开url，选择timeline
• 操作手机后点击refresh则可看到信息，拖动框选中颜色块则可看到详细方法调用

单步分析每一条绘图指令

可以看到每个指令所耗时间和每个widget渲染所耗时间

• flutter screenshot --type=skia --observatory-port=<port>
• 将生成的skp文件上传到debugger.skia.org可以单步分析每一条绘图指令