Dart DevTools 简介

Flutter 是 Google 开源的一个跨平台 UI 工具包，能够帮忙开发者通过一套代码库高效构建多平台精美利用，反对挪动、Web、桌面和嵌入式平台。同时，它也是 Google 将来的 Google Fuchsia 利用构建的次要形式。目前，Flutter 齐全开源、收费，领有宽松的开源协定，适宜商业我的项目。

应用 Flutter 开发跨平台利用时，常常须要用到一个开发者工具，即 Dart DevTools，Dart DevTools 是一套用于 Dart 和 Flutter 利用开发的性能和调试工具，能够用它来检测和剖析利用的性能，以及用它来调试利用日志和进行内存剖析等。

目前，Dart DevTools 反对的性能有如下一些：

• 检查和剖析应用程序的 UI 布局和状态。
• 诊断利用的 UI 性能问题。
• 检测和剖析应用程序的 CPU 应用状况。
• 剖析应用程序的网络应用状况。
• Flutter 或 Dart 应用程序的源代码级调试。
• 调试 Flutter 或 Dart 应用程序的内存应用状况和剖析内存问题。
• 查看运行的 Flutter 或 Dart 应用程序的个别日志和诊断信息。

装置 DevTools

应用 DevTools 之前须要先装置 DevTools 插件，如果还没有装置，能够先装置它。

Android Studio

默认状况下，只有装置了 Flutter 开发环境，根本就曾经装置了 DevTools 工具，装置之后运行我的项目会在 DevTools 工具栏看到如下图所示的工具集。

应用 DevTools 进行利用程序调试时，能够先在 Run 视图中抉择 Open DevTools 工具栏，而后在 Debug 视图中抉择 Open DevTools 工具栏进行操作，如下图所示。

具体的调试和剖析技巧会在前面讲到。

VS Code

如果应用的是 VS Code 集成开发环境，那么须要先在 VS Code 中装置 Dart DevTools 插件，顺次抉择【View】→【Command Palette…】关上搜寻菜单。在菜单中输出 install，并抉择 Extensions：Install Extension，而后在输入框中输出 Dart DevTools 点击装置即可，如下图所示。
第一次启动 DevTools 插件时，会看到下图所示的降级提醒。

当点击【Open】按钮时就会在浏览器中启动并主动连贯调试窗口，如下图所示。

DevTools 应用技巧

最近，Google 对 Dart DevTools 进行了降级，并公布了最新的版本，对 Dart 和 Flutter 代码调试和性能剖析进行了优化。Flutter 官网抉择以 Web 利用的模式交付 DevTools，这是因为能够轻松地将其集成到咱们所有指标平台和 IDE 的现有工具体验中，以 Web 状态构建 DevTools 也可能带来更好的用户体验。

目前，DevTools 是一套在浏览器中运行的独立工具，这些工具提供了额定的监测等性能，而这些性能是无奈在 IDE 中显示的，之所以这样设计，是因为思考到跨平台调试的须要。

最新版本的 DevTools 是应用 Flutter 编写的，而之前用的是 Dart 编写的，因而在最新的版本中，改良界面并增加全新的性能。应用最新版的 DevTools 开启利用调试，界面如下图所示。

Flutter Inspector

在下面的调试视图中，第一个标签是【Flutter Inspector】，这是一款用于可视化和浏览 Flutter Widget 树的工具。您能够抉择正在运行的利用中的 Widget，而后加快所有动画，查看文本基线等等，如下图所示。

Layout Explorer 是一项新增性能，在 Flutter Inspector 中位于 Details Tree 视图旁边。应用 Layout Explorer，您能够查看 Flutter 的柔性布局 (flex layout) 模型。例如，当您不确定为什么一排 widget 没有按您预期的形式显示时，或者为什么会呈现 “RenderFlex 溢出了 42 个像素 ” 这样的谬误时，这个性能兴许能帮上大忙。

在 Flutter Inspector 的左边，会发现三个专门用于性能剖析的标签页: Timeline (工夫线视图)、Memory (内存视图) 和 Performance (性能视图)。当然，Flutter Inspector 的性能还有很多，能够自行查看 Flutter Inspector 官网材料的介绍。

工夫线视图 (Timeline view)

工夫线视图 (Timeline view) 显示每帧的构建工夫以及火焰图。这样，您就可能很容易辨认呈现问题的帧，同时理解其所在的上下文。

新版本的 DevTools 新增了 Track Widget Builds (跟踪 widget 构建) 的按钮，它会将您利用中所有 Widget 的构建工夫增加到工夫线。对于工夫线视图 (Timeline view) 的更多介绍能够参考应用工夫线视图 (Timeline view)。

内存视图 (Memory view)

内存视图 (Memory view) 能够让开发者疾速的查看利用在特定时刻的内存应用状况，并且此视图当初能够显示所分配内存的热力求，同时也反对跟踪平台内存，还反对内存应用状况的更多筛选。

性能视图 (Performance view)

性能视图 (Performance view) 是传统的 CPU 分析器，能够通过此视图记录利用的运行会话，并查看 CPU 在哪些办法中消耗了大量工夫，而后就能够决定应该在哪里进行优化。

使用性能视图 (Performance view) 之前，须要先单击【Record】开始进行记录 CPU 的运行 信息，实现后点击【Stop】进行记录，CPU 分析器会把收集的信息推送到 VM 并别离在不同的信息窗口进行展现调用树 (Call Tree, Bottom Up, and Flame Chart)，即火焰图。

火焰图表展现的是自上而下的调用堆栈信息，即下面的堆栈帧调用上面的堆栈帧。每一个堆栈帧的宽度代表 CPU 执行的时长。栈帧耗费 CPU 的工夫越长，就越有可能是咱们进行性能改良的好中央。

同时，咱们还能够查看调用树视图，它是一种自上而下展现 CPU 中的调用堆栈信息办法的视图。在下图中的表格中能够看出，开展其中的一个办法能够查看它所有的调用者的信息。

网络视图 (Network view)

网络视图 (Network view) 则是用来查看网络流量的，您能够看到您的利用自启动以来全副申请的历史记录，以及每个申请的详细信息。这样，当您试图调试网络问题时，就不用再自行记录这些事件。网络视图目前显示的是 HTTP 流量，将来还会显示通用套接字 (socket) I/O 流量。当利用有网络申请时，就能够在网络视图 (Network view) 中查看到申请的信息，和抓包工具显示的信息差不多，如下图所示。

日志视图 (Logging view)

日志视图 (Logging view) 是用来显示利用和框架的事件日志的。默认状况下，日志视图 (Logging view) 会展现以下内容：

• Dart 运行时的垃圾回收事件。
• Flutter 框架事件，比方创立帧的事件。
• 利用的 stdout 和 stderr 输入。
• 利用的自定义日志事件。

当然，您能够用它轻松过滤音讯 (例如，您能够应用 -gc 来过滤掉 Garbage Collector 事件，或者应用 flutter.frame 以仅显示框架事件)。在 Dart 中，日志音讯能够结构化，而日志记录视图正是利用了这一点。

目前，DevTools 实用于挪动利用、桌面利用以及 Web 利用的调试工作，如果想要理解对于它的更多信息，能够查看官网 DevTools 开发工具的介绍。