DevTools 能干啥

本篇文章翻译自官方的 👉DevTools，这篇文章是 DevTools 的总览文章，介绍 DevTools 是干啥用的，让大家知道有这么一个东西，后面会顺序翻译各个功能模块。

以下是正文

---

DevTools 是什么？

DevTools 是一套用于 Dart 和 Flutter 性能和 Debug 相关的工具。

开发者能用 DevTools 做什么？

下面列出来的就是 DevTools 的主要功能：

• 检查 UI 布局以及和 UI 相关的 状态
• 诊断 Flutter 应用 UI 丢帧的性能问题
• Flutter 或者 Dart 应用的 CPU 分析
• Flutter 应用的网络分析
• Flutter 或者 Dart 应用源码级别的调试
• 调试 Flutter 或者 Dart command-line 应用的内存问题
• 查看在运行的 Flutter 或者 Dart command-line 应用的日志和诊断信息
• 分析代码和应用的大小

我们希望开发者可以自己的 IDE、command-line 开发工具与 DevTools 结合起来使用。

开发者怎么安装 DevTools 呢？

Android Studio 中安装、运行 DevTools

安装 Flutter 插件

没有安装 Flutter 插件的先安装插件，可以在 IntelliJ 和 Android Studio 的设置（settings）页中找到 Plugins 页面。然后在 marketplace 中搜索 Flutter 插件。

run 起一个 Debug 应用

在打开 DevTools 之前，需要先 run 起一个 Flutter 应用，比如在设备已经连接的情况下，点击 Run 或者 Debug 按钮。

从 toolbar 开启 DevTools

只要 app run 起来了，就可以按着下面的顺序开启 DevTools ：

• 在 Run 窗口点击 Open DevTools 按钮

• 在 Debug 窗口点击 Open DevTools 按钮

• Flutter Inspector 窗口的 More Actions 菜单中点击 Open DevTools 按钮

从 action 中打开 DevTools

开发者也可以从 action 中开启 DevTools。 打开 Find Action… 对话框，Mac 用户 Command+Shift+A 快捷键，输入 Open DevTools 搜索

会先安装 DevTools，安装之后就会打开一个网页，网页就是调试工具。 这种方式打开的是入口页面，DevTools 并没有连接上应用，需要开发者给定端口号

Android Studio 中安装 DevTools 的问题

在 Android Studio 4.0.1 版本的时候，会 DevTools 会一直在 Installing DevTools。

解决的办法：

• 首先 更新 Flutter 插件
• 然后 取消 Flutter 的 Enable embedding DevTools... 的选中
• 其次 清除缓存
• 最后 奉上 👉问题记录

VS Code 中安装、运行 DevTools

安装 VS Code 扩展

VS Code 中使用 DevTools 的话，需要 Dart extension，如果想要调试 Flutter 应用，也需要安装 Flutter extension。

debug 应用

在 VS Code 中打开项目根文件夹，点击 Run > Start Debugging (快捷键 F5)。

开启 DevTools

只要 Debug 建立连接并且应用运行起来，VS Code 命令面板中就可以运行 Dart: Open DevTools 命令。

第一次运行的话，会提醒开发者激活或者升级 DevTools。

点击 Open 按钮就会激活 DevTools，然后，DevTools 就会在浏览器中打开，并且自动连接上调试。

当 DevTools 被激活了，开发者就可以在 VS Code 的状态栏中看到它。如果开发者不小心关掉了浏览器的 DevTools 窗口，也可以点击 VS Code 状态栏重启浏览器 DevTools 窗口。

提供反馈

开发者可以尝试使用 DevTools，并且提供使用和问题反馈，反馈的地址是 DevTools issue tracker。