Flutter应用如何调试--DevTools介绍(上)

Flutter应用如何调试–DevTools介绍(上)
Flutter应用如何调试–DevTools介绍(中)
Flutter应用如何调试–DevTools介绍(下)
我们使用Flutter开发跨平台的APP，当写完一个需求，运行在高性能手机上，可能感觉非常流畅，但是换个性能差些的手机运行，则有些卡顿。我们想要尽可能的提升APP性能，除了人工排查找出问题代码，本文将要介绍一个很强大的调试工具DevTools，它可以帮助我们更准确的分析APP。

DevTools简介

DevTools是一套Dart和Flutter性能调试工具，目前已经进行到Beta版本，仍在持续开发中，它可以帮助我们：

• 检查 Flutter 应用程序的 UI 组件布局和状态；
• 在 Flutter 应用程序中诊断 UI 性能过低的问题；
• Flutter 和 Dart 应用的 CPU 性能检测；
• 为 Flutter 应用进行网络性能检测；
• 为 Flutter 或 Dart 应用进行源码级的调试；
• 在 Flutter 或 Dart 命令行应用中测试内存问题；
• 查看正在运行的 Flutter 或 Dart 的命令行应用程序相关的常规日志和诊断信息。

本文结合官方文档及个人实践经验，对这些功能在调试APP的过程中如何使用进行介绍，如有疏漏、错误欢迎联系我进行交流。

dart-devtools.gif

构建模式

介绍如何使用DevTools之前，先对Flutter的构建模式做下简单介绍，因为DevTools的功能可能需要在不同模式下进行使用。Flutter 支持三种模式编译 app，除了我们接触最多的debug、release，还有profile模式。在debug模式下我们可以对应用进行断点调试、热重载，极大的方便我们快速开发，但也会输出很多额外信息，因此debub模式下并不代表我们APP的真正性能。给用户使用时我们选择release模式进行发布，release模式下断点是不可用的，调试信息是不可见的，对编译速度、快速执行和包大小进行了优化，除了用眼睛看，我们不便进行分析。这也就是profile构建模式的作用了，profile模式主要就是用来对APP进行分析，它有着和release模式相近的的性能，同时又有一些调试能力--足够用来分析APP性能。

使用哪个构建模式，取决于你处于哪个开发周期：

开发过程中，需要使用 热重载 功能，请选择 debug 构建模式；
当你需要分析性能的时候，选择使用 profile 构建模式；
发布应用的时候，需要选择使用 release 构建模式。

构建APP、启用devtools，可以使用Android Studio/IntelliJ 和 VS Code（借助 Flutter 和 Dart 插件）以及使用命令行工具。
本文主要使用Android Studio进行讲解，原理相通，DevTools部分是一样的。此外本文不会局限于介绍DevTools工具，而会对整个开发调试流程进行介绍。

启动DevTools

debug模式下，无论是以Flutter为主工程还是以Native为主混合工程正常启动即可。
profile模式下:
选择run‘android’ in Prodfle Mode

runprofile.png

以Native为主混合工程，如果不能选择的话，想要运行profile模式，首先需要在app -> build.gradle中配置profile模式，如果是多module的话，那么所有的module的build.gradle中增加此配置，默认情况下这里可能是配置好的，如果没有的话添加上即可。

profile.png
然后Android native工程在buildVariants中选择profile模式后点击运行
Androidprofile.png

app运行后 点击 flutter工程的 Flutter attach 按钮

attach.png

退出app，重新进入app当出现 Syncing files to device xxx的时候说明已经连上设备

dpendevtools1.png

然后点击open Devtools进入开发工具页面。
当程序运行起来之后，除了上面的进入Devtools入口，在Android studio右侧，还可以从Flutter inspector里面的more action，以及Flutter Performance底部的入口进入。

opendevtools2.png
opendevtools3.png

如果使用VSCode请参看在 VS Code 里安装和使用开发者工具
如果使用命令行开发请参看通过命令行安装和运行开发者工具

接下来我们一起开始使用Devtools吧，将会对里面的7个工具进行一一介绍，分别是：

• Flutter inspector
• Timeline
• Memory
• Performance
• Debugger
• Network
• Logging
  Flutter应用如何调试–DevTools介绍(中)