在 Flutter 中从头重建 DevTools

发布于:2020 年 7 月 15 日 18:30

在Flutter中从头重建DevTools

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

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

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

在Flutter中从头重建DevTools

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

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

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

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

基础

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

在Flutter中从头重建DevTools

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

在Flutter中从头重建DevTools

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

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

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

在Flutter中从头重建DevTools

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

在Flutter中从头重建DevTools

这里,分析器检测到有一个 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 树。

在Flutter中从头重建DevTools

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

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

在Flutter中从头重建DevTools

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

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

在Flutter中从头重建DevTools

用 SizedBox 包装 IconButton。

此外,还有移动 widget。

在Flutter中从头重建DevTools

DevTools

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

在Flutter中从头重建DevTools

在浏览器窗口中打开 DevTools。

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

在Flutter中从头重建DevTools

第一个选项卡是 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中从头重建DevTools

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

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

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

在Flutter中从头重建DevTools

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

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

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

在Flutter中从头重建DevTools

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

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

在Flutter中从头重建DevTools

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

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

在Flutter中从头重建DevTools

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

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

在Flutter中从头重建DevTools

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

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

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

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

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

在Flutter中从头重建DevTools

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

在Flutter中从头重建DevTools

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

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

在Flutter中从头重建DevTools

小结

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

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

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

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

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

原文链接:
https://medium.com/flutter/new-tools-for-flutter-developers-built-in-flutter-a122cb4eec86

阅读数:3 发布于:2020 年 7 月 15 日 18:30

评论

发布
暂无评论