谷歌在Flutter中从头开始重建DevTools以获得更好的性能和更大的通用性

导读Flutter是一个跨平台的编程框架,旨在解决开发跨平台应用程序的麻烦,而不会带来一堆非本地代码。借助Dart编程语言的知识,开发人员可以为

Flutter是一个跨平台的编程框架,旨在解决开发跨平台应用程序的麻烦,而不会带来一堆非本地代码。借助Dart编程语言的知识,开发人员可以为Android,iOS,Web和桌面构建具有统一UI的应用程序。Flutter 1.9使macOS和Catalina支持处于Alpha状态,而v1.12版本已经超过了Alpha之前的状态,而Flutter的v1.17和Dart的v2.8标志着他们在2020年首次稳定发布。正在发布适用于Dart和Flutter代码的DevTools新版本,该版本已在Flutter中从头开始重建,并进行了一些改进。

在之前的公告中,Google提到了其将Dart DevTools的当前版本替换为新的Flutter版本的意图。这已经发生了,因为新的DevTools已在Flutter中从头开始重建。这个新版本的DevTools增加了一些改进,例如对性能和内存页面的更改,以及全新的网络页面。

但是,为什么要重建仍然可用的东西呢?Flutter背后的团队声称,在构建高性能UI时,提高生产力非常重要,要证明对这些主张的信心,最好的方法就是自己采用完全相同的工具。在Flutter中进行重建还使开发人员能够在编写代码后选择分发模型,这与当前决策流程图不同,后者由分发模型决定代码。

DevTools作为Web应用程序提供,可以更轻松地将工具集成到所有目标平台和IDE的现有工具体验中。DevTools是在浏览器中运行的独立工具套件,适用于移动应用程序,桌面应用程序和Web应用程序。

DevTools包含以下功能:

Flutter Inspector:可视化和探索小部件树的工具。您可以在运行的应用程序中选择小部件,放慢所有动画的速度,查看文本基线等等。

布局资源管理器是新功能之一,您可以在“详细信息树”旁边的Flutter Inspector选项卡中找到它。布局资源管理器使您可以检查Flutter的弹性布局模型。团队举例说明了该工具如何帮助调试为什么一排小部件看起来不像开发人员所期望的那样。

时间轴视图:显示每个帧的构建时间和火焰图。这使得很容易识别上下文中有问题的帧。

现在,此窗格合并了新的“跟踪小部件构建”按钮,该按钮将应用中所有小部件的构建时间添加到时间线(以牺牲个人资料构建的性能为代价,因此默认情况下未启用)。当您尝试找出哪些小部件确实位于慢速帧的后面时,这非常方便。

内存视图:显示给定时刻您的应用如何使用内存。

现在,该视图显示了已分配内存的热图,并允许跟踪平台内存。

性能视图:这是传统的CPU分析器。它使您可以记录应用程序的会话,并查看CPU在大部分时间中使用了哪些功能。您可以使用它来决定将时间花在优化上。

DevTools甚至包括其自己的调试器。如果您不使用IDE,但仍希望该选项添加断点,逐步执行代码,查看变量值等,则此功能很有用。

网络视图:这是全新的。

顾名思义,它使您可以检查网络流量。您可以查看自应用启动以来所发出请求的全部历史记录,并获取有关每个请求的详细信息。这使您不必在尝试调试网络问题时自行记录这些事件。

“网络”选项卡当前显示HTTP通信。未来的改进包括显示常规的套接字I / O流量。

网络请求也显示在“时间轴”视图中,因此您可以在上下文中查看它们。

日志视图:显示来自您的应用和框架的事件。使用它,您可以轻松过滤消息(例如,可以指定“ -gc”过滤掉垃圾收集器事件,或者指定“ flutter.frame”仅显示帧事件)。在Dart中,可以构造日志消息,并且“日志”视图可以使用该结构。

要充分利用DevTools,您可以阅读文档。如果发现任何错误,或者想要对新功能进行投票,可以在GitHub上进行。

免责声明:本文由用户上传,如有侵权请联系删除!