在Flutter中从头重建DevTools

近日，谷歌发布了全新版本的 Dart DevTools，这是我们用于 Dart 和 Flutter 代码的调试 / 性能分析工具套件。新版 DevTools 是在 Flutter 中从头重建的。这个版本的改进包括性能增强、Memory 页面更新以及全新的 Network 页面等。

本文最初发布于 Medium 网站，经原作者授权由 InfoQ 中文站翻译并分享。

大家可能都知道 Flutter 的热重载功能很出名，它让用户可以在移动应用运行时更改代码。但我们为大家送上的工具远不止热重载，这些工具可帮助你编写、测试、调试和分析应用程序。

首先我们来谈谈为什么要重建 DevTools，简单来说就是为了提升生产力和质量。Flutter 团队很清楚，Flutter 可以帮助开发人员快速构建美观而高性能的 UI，现在我们自己也想从中获益。这种生产力优势不仅能让我们重建 DevTools，而且还能在重建过程中加入很多重要的新特性。

我们决定将 DevTools 作为 Web 应用程序来交付，这样就可以轻松将其集成到所有的目标平台和 IDE 中，与现有工具链完美融合。因为我们在构建时处处考虑到了 Web 环境的特性，所以就能亲身体验到用户的感受；在这一过程中，我们发现了（并已解决）一些性能问题，例如页面滚动性能表现等。

我们还一直在评估 DevTools 的桌面编译版本，目前得到的反馈是很不错的。选择 Flutter 的一大好处是我们可以在写完代码后再选择分发模型，用不着提前做决策。许多客户还告诉我们，这是 Flutter 颇具吸引力的一项能力。

展望过 DevTools 的未来后，我们来快速介绍一下为 Flutter 开发人员准备的所有重要工具，DevTools 只是其中之一。

基础

当然，我们还有 flutter 工具，它可以在调试模式下运行你的应用，执行热重载，构建 APK 和 IPA 等。这款 Flutter 工具是用 Dart 编写的，并在命令行上运行，因此能够兼容所有操作系统或编辑器。

Dart 分析服务器可在各种 IDE 中提供静态分析和智能代码完成功能。

这里用了 VSCode 的例子，但所有示例在 Android Studio 中也都是一样的。

错误高亮显示提供了修复错误的文档链接。

https://dart.dev/tools/diagnostic-messages

对于常见的静态错误，IDE 会链接到一个加长版的错误消息，其中包括示例代码和常见的修复和智能 lint。

这里，分析器检测到有一个 Sink 创建后没有关闭——可能是内存泄漏。

分析服务器还可以使用语言服务协议，支持该协议的开发工具（有很多）都可以轻松支持它。

https://microsoft.github.io/language-server-protocol/

UI 代码助手

在 Flutter 中，你在构建 UI 时可以创建 widget 树。这意味着许多 Dart 代码都采用了嵌套构造器的形式，如下所示：

return MaterialApp(  title: 'My app',  home: Scaffold(    appBar: AppBar(      title: Text('Welcome'),    ),    body: Column(      ...    ),  ),);

Flutter 工具链简化了这类代码的使用过程。UI 向导会高亮显示你正在构建的 widget 树。

左侧的线（称为 UI 向导）清楚地标明了 widget 树。

尾随注释可以显示哪个结束括号属于哪个 widget。

注释由 IDE 显示，但实际上不属于文件内容。

智能重构可帮助你轻松修改树，例如用新的父级包装一部分树……

用 SizedBox 包装 IconButton。

此外，还有移动 widget。

DevTools

然后我们来看 DevTools，这是在浏览器中运行的独立工具套件。它们提供了一些没法放在 IDE 中的遥测和功能。

在浏览器窗口中打开 DevTools。

我们刚推出的新版 DevTools 是用 Flutter 编写的。（它们以前就是用 Dart 编写的，但没有使用 Flutter 框架。）这是完全从头重写的版本，使我们可以改进 UI 并添加很多全新的特性。

第一个选项卡是 Flutter Inspector：

https://flutter.dev/docs/development/tools/devtools/inspector

这是用于可视化和浏览 Flutter widget 树的工具。在这里，你可以选择正在运行的应用程序中的 widget，放慢所有动画的速度，查看文本基线等等。

一项新功能是 Layout Explorer，你可以在 Details Tree 旁边的 Flutter Inspector 选项卡中找到它。Layout Explorer 可让你检查 Flutter 的弹性布局模型。例如，当你不知道为什么一排 widget 的外观不符合你的预期，或者为什么会出现“RenderFlex overflowed by 42 pixels”错误时，这款工具可能就是你的救命稻草。

在 Flutter Inspector 选项卡旁边，有三个专门用于性能分析的选项卡：Timeline 视图、Memory 视图和 Performance 视图。

现在，Timeline 视图显示了每个帧的构建时间以及火焰图。这样在上下文中就可以很容易找出问题帧。

https://flutter.dev/docs/development/tools/devtools/timeline

Timeline 窗格还有新的 Track Widget Builds 按钮，它可将你应用中所有 widget 的构建时间添加到时间线中（但会拖累 profile 构建的性能，所以没有默认开启）。你可以很方便地找出具体是哪些 widget 位于慢速帧的后面。

Memory 视图使你可以查看应用程序在给定时刻的内存使用情况。现在，这个视图会显示已分配内存的热图，并且还可以跟踪平台内存。

https://flutter.dev/docs/development/tools/devtools/memory

性能视图是一个传统的 CPU 分析器。你可以用它录制应用程序的会话，并查看 CPU 的主要时间都花在了哪些函数上。一般用它来确定优化的对象。

https://flutter.dev/docs/development/tools/devtools/performance

DevTools 甚至有自己的调试器。如果你不用 IDE，但仍希望添加断点，逐步执行代码和查看变量值等，那么这个功能会非常好用。

https://flutter.dev/docs/development/tools/devtools/debugger

下一个选项卡是全新的。如你所想，Network 视图可用来检查网络流量。你可以查看自应用启动以来所发出全部请求的历史记录，以及每个请求的详细信息。这样你就不必在调试网络问题时自行记录这些事件。Network 选项卡当前显示的是 HTTP 通信。未来的改进包括显示常规的 socket I/O 流量。

https://github.com/flutter/devtools/issues/2044

现在，Timeline 视图中还能看到网络请求，这样就能检查它们的上下文了。

Logging 视图显示来自你的应用程序和框架的事件。你可以用它轻松过滤消息（例如，你可以指定 -gc 以滤出垃圾收集器事件，或者指定 flutter.frame 以仅显示帧事件）。

https://flutter.dev/docs/development/tools/devtools/logging

在 Dart 中，日志消息可以被结构化，并且 Logging 视图可以使用这种结构。

https://api.dart.dev/stable/dart-developer/log.html

DevTools 适用于移动应用、桌面应用和 Web 应用。

将 DevTools 用 Flutter 重写有很多好处：提高生产率，体验客户的感受，以及自由选择目标平台。还有一项好处是：在 Flutter 中重建 DevTools 可以让社区更容易做出贡献。DevTools 一直是公开开发的，今后多数用户都会熟悉它的结构（从 lib/main.dart 中的 runApp(DevToolsApp(…)) 开始）。

https://github.com/flutter/devtools/tree/master/packages/devtools_app

小结

工具链对于 Flutter 的开发体验是至关重要的。我们一直在投入大量资源来改进工具链，也非常重视大家的反馈意见

因此，请立即升级到最新版的 DevTools，并在你的应用中测试它。阅读文档以了解更多详细信息。

如果发现错误请提交报告，也可以为新特性投票。

我们希望新版 DevTools 能为你带来更舒心的 Flutter 开发体验。

作者介绍：

本文作者为谷歌负责 Dart 编程语言和 Flutter SDK 的开发经理。

原文链接：

https://medium.com/flutter/new-tools-for-flutter-developers-built-in-flutter-a122cb4eec86