开头
在日常的flutter开发中，你是否遇到过卡顿、掉帧的情况？虽然Flutter目前在构建精美UI的表现上十分出色，但也架不住糟糕的使用方式呀
不过，当你明显感受到了卡顿的情况，要如何去追本溯源，查明卡顿的真相呢？这时候，DevTools就会成为你排忧解难的最佳助手。
介绍
DevTools是Dart和Flutter的一套性能测试与bug调试的工具。它目前还处于预览版，但是正在积极的开发中。
使用DevTools你可以做到以下事情：
- 检查Flutter app的UI布局与状态
- 在Flutter app中诊断UI卡顿的性能问题
- 对Flutter或dart的命令行应用进行源码级的调试
- 在Flutter或Dart的命令行应用中调试内存问题
- 查看运行中的Flutter或Dart命令行应用的常规日志和诊断信息。
下面，我将会结合我的Flutter项目，来对DevTools进行一个简洁并且带有用例的使用说明
载入DevTools
根据你所使用的编译器的不痛，Devtools的打开方式也略有差别
在AndroidStudio中打开
在AndroidStudio中，打开DevTools的地方在这里
在VSCode中打开
在VSCode中，打开DevTools的步骤如下：
首先，运行 Debug > Start Debugging
之后搜索devtools
然后打开
在命令行中打开
首先需要保证你的flutter的环境变量都配置妥善
在项目目录下，命令行输入：
flutter pub global run devtools
之后你会看到如下输出：
Serving DevTools at http://127.0.0.1.9100
然后在另外一个命令行中运行
flutter run
你会看到如下内容
将图中圈中部分填入以下输入框
然后点击“Connect”即可。
使用DevTools
DevTools在网页中打开后，整体如下
接下来，就开始依次介绍DevTools的各个功能了
Flutter Inspector
Flutter检查工具中包含以下内容
Select Widget Mode 
开启这个模式，你可以精确的定位到所选控件在 WidgetTree 中的位置
Refresh Tree 
可以用来刷新Widget树的信息
Performance Overlay 
用于切换GPU和CPU线程的性能图表展示（建议在真机的release模式下测试）
Slow Animations 
将所有的动画效果放慢
Debug Paint 
向rendering对象添加可视调试提示，去展示它的padding、alignment、spacers以及borders
Paint Baselines 
为每个RenderBox的文本绘制一条可显示的基准线
Repaint Rainbow 
当Widget被重绘时，包裹它的颜色会变化
Debug Mode Banner 
用于去除debug模式下，右上角的“debug”横幅
Platorm:Android/iOS
用于切换app在两个平台上的不同表现，比如
关于Flutter Inspector的内容大致就是如此，下面是TimeLine的介绍
TimeLine
TimeLine用来展示Flutter的帧信息，主要由三个部分组成
- 帧渲染图表
- 帧事件图表
- CPU分析
因为Flutter的debug模式并不能准确的展示出flutter的实际渲染效果，所以这里建议使用真机+profile模式来进行测试
代码：
flutter run --profile
不过如果是想知道造成flutter掉帧、卡顿的原因，使用模拟器+debug也可以，因为渲染的过程都是一样的 
图中，柱状图表示当前渲染帧所消耗的时间，正常的渲染应该小于16ms每帧，图中大部分柱状图都是红色，表示渲染耗时偏高。只有一个点是蓝色的，表示符合渲染要求。
因为是debug模式，所以以上帧率的数据不能作为实际结果，但是如果想检测某些实际的卡顿情况，进入帧详情图表查看也是没问题的，在最后的优化部分会详细进行介绍。
Memory
用于观察和分析app的内存使用情况，也建议在真机+profile模式下进行测试
在官方文档中，对上图中的各个部分有着详细的说明
通过Memory工具，可以直观的帮你分析内存使用情况，这样，诸如内存泄露的问题都能够很明显的观察到。
Performance
用于记录并且分析一段app操作的CPU信息等
Debugger
用于调试app，因为是非常基础的功能，关于调试这一块就不多赘述了
Logging
用于展示Dart运行时来自框架级(比如Flutter)和应用级的事件日志
上面的这些工具不一定要在网页中打开，比如通过android studio的运行按钮去编译项目的话，也可以很方便的使用这些工具
那么，接下来就是有关优化的部分了
优化
上面关于DevTools的使用有了一个简要的介绍，那么实际应用中应该如何去优化你的app呢？
下面展示一个简单的例子
我们可以通过google提供的skia的debugger工具来测试你的app渲染情况。
首先在命令行运行:
flutter run --profile --trace-skia
如果没有真机,就去掉"--profile"
记录下地址
然后，新开一个命令行窗口，运行:
flutter screenshot --type=skia --observatory-uri=http://127.0.0.1:59403/1OQax7zfd7A=/
接下来，项目根目录就生成了 skp 文件
接下来，我们就可以使用google提供的skia debugger 工具来进行检测了
打开 debugger.skia.org/ 地址
导入skp文件
然后你就可以看到每一帧的绘制情况
根据这些情况，可以明显的看到布局中是否有渲染顺序不合理的地方，如果有的话就可以针对这些布局进行调整(ps:上面的例子中没有举出反面例子,同时在部分真机，如魅族16x上无法正常运行生成skp文件的命令)
关于优化的方面，从WidgetTree的绘制过程去入手。可以通过减少频繁的全局刷新,降低build次数;以及合理的使用 RepaintBoundary 去分隔布局，从而降低Paint的范围以达到优化目的。
详情可以去观看附录中的视频地址，相信会对你有很大帮助;
附录
参考:
不能科学上网的小伙伴可以去B站观看：
项目地址
文章中所使用的的Flutter项目地址如下:
