近日，谷歌发布了全新版本的 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 编写的，并在命令行上运行，因此能够兼容所有操作系统或编辑器。
错误高亮显示提供了修复错误的文档链接。
https://dart.dev/tools/diagnostic-messages
对于常见的静态错误，IDE 会链接到一个加长版的错误消息，其中包括示例代码和常见的修复和智能 lint。
分析服务器还可以使用语言服务协议，支持该协议的开发工具（有很多）都可以轻松支持它。
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 树。
尾随注释可以显示哪个结束括号属于哪个 widget。
智能重构可帮助你轻松修改树，例如用新的父级包装一部分树……
此外，还有移动 widget。
DevTools
然后我们来看 DevTools，这是在浏览器中运行的独立工具套件。它们提供了一些没法放在 IDE 中的遥测和功能。
我们刚推出的新版 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