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

2,322 阅读7分钟

副标题:为什么我们在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(免费版)翻译