[Flutter翻译]使用Flutter编写Flutter开发者的新工具

副标题：为何咱们在Flutter中从头开始重建Dart DevTools？

原文地址：medium.com/flutter/new…

原文做者：medium.com/@filiph

做者：Filip Hracek & Chris Sells

今天，咱们发布了新版本的Dart DevTools，这是咱们的一套工具，用于Dart和Flutter代码的调试和性能分析。它已经使用Flutter从头开始重建。这个版本增长了几项改进，好比性能和内存页面的更新，以及一个全新的网络页面。

不少人都知道Flutter的热重载功能，它可让你在移动应用运行时对其进行修改。但热重载只是咱们提供的一套工具中的一个，咱们提供的工具能够帮助您编写、测试、调试和分析您的应用程序。

首先让咱们花点时间来讨论一下咱们为何要重建DevTools的初衷。简短的答案是生产力和质量。Flutter团队了解Flutter在构建漂亮、高性能的用户界面时的生产力优点--咱们但愿本身也能享受到这些优点。这种生产力使咱们不只可以重建DevTools，并且可以沿途添加大的新功能。

咱们选择将 DevTools 做为 Web 应用程序发布，由于它很容易让咱们在全部目标平台和 IDE 上集成到现有的工具体验中。以网络为中心进行构建也使咱们可以站在客户的立场上思考问题；在这样作的过程当中，咱们了解（并修复）了一些性能问题，例如滚动性能。

咱们也一直在评估将DevTools做为编译后的桌面应用程序发布的好处，到目前为止，结果是有但愿的。选择Flutter的一个主要好处是，选择分发模式是咱们在写完代码后就能够作的事情，而不是咱们必须作出的第一个决定。不少客户也告诉咱们，这是Flutter的一个吸引人的能力。

如今咱们已经讨论了一点关于DevTools的不久的过去和新的将来，让咱们深刻了解一下每一个Flutter开发者可使用的全部主要工具的快速概述。由于DevTools并非惟一值得你关注的工具。

基础知识

固然，还有flutter工具，它能够在调试模式下运行你的应用程序，执行热重载，构建APK和IPA等等。flutter工具是用Dart编写的，在命令行上运行，因此不管你喜欢哪一种操做系统或编辑器，均可以使用Flutter。

Dart分析服务器在各类IDE中提供静态分析和智能。这意味着你能够获得代码补全...

这刚好是VS Code，但这里全部的例子在Android Studio中也能使用，固然。

...... 错误高亮显示并连接到如何修复它们的文档.......

对于最多见的静态错误，IDE会连接到一个较长版本的错误信息，包括示例代码和常见的修复方法。

......和智能代码检查。

在这里，分析器检测到一个Sink被建立但从未关闭--这多是内存泄漏。

分析服务器还可使用语言服务器协议，这意味着全部使用它的开发工具（有不少）均可以轻松支持它。

UI代码助手

使用Flutter，你能够经过建立widget树在代码中构建UI。这意味着，不少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，这是一套独立的工具，在浏览器中运行。它们提供了额外的遥测和功能，这些功能在IDE中显示并不实用。

DevTools在浏览器窗口中打开。

咱们本周推出的DevTools是用Flutter编写的。(它们以前是用 Dart 编写的，但没有使用 Flutter 框架。)这是一次从头开始的彻底重写，这为改进 UI 和添加全新的功能带来了机会。

第一个标签是Flutter Inspector，这是一个可视化和探索Flutter widget树的工具。从这里，你能够选择正在运行的应用中的widget，放慢全部动画，查看文本基线等。

新功能之一是布局资源管理器，您能够在细节树旁边的Flutter检查器标签中找到它。布局资源管理器让你检查Flutter的柔性布局模型。例如，当你不肯定为何一排widget看起来不是你预期的方式，或者为何你获得 "RenderFlex溢出了42个像素 "的错误时，这能够成为救命稻草。

在Flutter Inspector选项卡旁边，你会发现三个专门用于性能分析的选项卡：时间轴视图、内存视图和性能视图。

时间线视图如今显示了每一个帧的构建时间以及火焰图。这使得它很容易识别有问题的帧，同时在上下文中看到它们。

时间线窗格还有新的跟踪widget构建按钮，它将您的应用程序中全部widget的构建时间添加到时间线（以牺牲您的配置文件构建的性能为代价 - 这就是为何它默认状况下没有打开）。当你试图找出究竟是哪些widget形成了慢帧时，这很方便。

内存视图可让你窥视你的应用程序在特定时刻的内存使用状况。该视图如今显示了分配内存的热图，并容许跟踪平台内存。

性能视图是一个传统的CPU剖析器。它可让你记录应用程序的一个会话，并查看CPU在哪些功能上花费了大部分时间，整体而言。这一般用于决定在哪里进行优化工做。

DevTools甚至包括本身的Debugger。若是您不使用IDE进行开发，但仍然但愿选择添加断点、逐步查看代码、偷看变量值等，这可能会颇有用。

下一个选项卡是全新的。网络视图让你检查，你猜对了，网络流量。你能够看到你的应用程序自启动以来的所有请求历史，以及每一个请求的详细信息。这让你在试图调试网络问题时，没必要再自行记录这些事件。网络选项卡目前显示的是HTTP流量；将来的改进包括显示通常的套接字I/O流量。

如今，您还能够在 "时间轴 "视图中找到网络请求，以便您能够在上下文中查看它们。

日志视图显示来自你的应用程序和框架的事件。有了它，你能够轻松地过滤消息（例如，你能够指定-gc来过滤掉Garbage Collector事件，或者flutter.frame来只显示frame事件）。在Dart中，日志消息能够被结构化，而日志视图就利用了这一点。

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

DevTools改写为Flutter有不少好处：提升了生产力，站在客户的立场上行走，以及目标平台的自由选择。有一个好处咱们尚未提到：在Flutter中重写DevTools邀请社区更容易作出贡献。DevTools一直是在开放中开发的，但今天，大多数用户会熟悉它的结构（从lib/main.dart中的runApp(DevToolsApp(...))开始）。

概要

工具对 Flutter 开发者的体验相当重要。咱们天天都会投入大量资金使其更好。但咱们只能经过您的反馈来实现这一点。

所以，今天就升级到最新的 DevTools，并在您的应用程序上进行测试。阅读文档，了解全部隐藏的精华。若是您发现错误，请反馈问题，或在GitHub上为新功能投票。

咱们但愿新的DevTools能让您的Flutter开发体验更加愉快。

经过www.DeepL.com/Translator（免费版）翻译