调试 Web 应用性能
了解如何使用 Chrome DevTools 调试 Web 应用性能问题。
Flutter 框架在构建帧、绘制场景以及跟踪垃圾回收等其他活动时会发出时间线事件。这些事件在 Chrome DevTools 性能面板 中公开,用于调试。
您还可以使用 dart:developer 的 Timeline 和 TimelineTask API 发出您自己的时间线事件,以进行进一步的性能分析。
增强跟踪的可选标志
#要配置跟踪哪些时间线事件,请在应用程序的 main 方法中将以下顶级属性中的任何一个设置为 true。
-
debugProfileBuildsEnabled:为每个构建的
Widget添加Timeline事件。 -
debugProfileBuildsEnabledUserWidgets:为每个构建的用户创建的
Widget添加Timeline事件。 -
debugProfileLayoutsEnabled:为每个
RenderObject布局添加Timeline事件。 -
debugProfilePaintsEnabled:为每个
RenderObject绘制添加Timeline事件。
说明
#- [可选] 从应用程序的 main 方法中将任何所需的跟踪标志设置为 true。
- 在 profile 模式 下运行您的 Flutter Web 应用。
- 打开应用程序的 Chrome DevTools 性能面板,并 开始录制 以捕获时间线事件。