# 调试 Web 应用性能

> 学习如何使用 Chrome DevTools 调试 Web 性能问题。



:::note
Profiling Flutter web apps requires Flutter version 3.14 or later.

分析 Flutter Web 应用需要 Flutter 3.14 或更高版本。
:::

The Flutter framework emits timeline events as it works to build frames,
draw scenes, and track other activity such as garbage collections.
These events are exposed in the
[Chrome DevTools performance panel][] for debugging.

Flutter 框架在构建帧、绘制场景以及跟踪垃圾回收等活动时会发出 timeline 事件。
这些事件会暴露在 [Chrome DevTools 性能面板][Chrome DevTools performance panel] 中，供调试使用。

:::note
For information on how to optimize web loading speed,
read the Flutter blog post
[Best practices for optimizing Flutter web loading speed][article].

有关如何优化 Web 加载速度的信息，
请参阅 Flutter 博客文章
[优化 Flutter Web 加载速度的最佳实践][article]。

[article]: https://blog.flutter.dev/best-practices-for-optimizing-flutter-web-loading-speed-7cc0df14ce5c
:::

You can also emit your own timeline events using the `dart:developer`
[Timeline][] and [TimelineTask][] APIs for further performance analysis.

你还可以使用 `dart:developer` 的
[Timeline][] 和 [TimelineTask][] API 发出自定义 timeline 事件，以进行更深入的性能分析。

[Chrome DevTools performance panel]: https://developer.chrome.com/docs/devtools/performance
[Timeline]: https://api.flutter-io.cn/flutter/dart-developer/Timeline-class.html
[TimelineTask]: https://api.flutter-io.cn/flutter/dart-developer/TimelineTask-class.html

![Screenshot of the Chrome DevTools performance panel](/assets/images/docs/tools/devtools/chrome-devtools-performance-panel.png)

## Optional flags to enhance tracing

## 用于增强跟踪的可选标志

To configure which timeline events are tracked, set any of the following top-level properties to `true`
in your app's `main` method.

要在应用中配置跟踪哪些 timeline 事件，请在 `main` 方法中将以下任一顶层属性设为 `true`。

- [debugProfileBuildsEnabled][]: Adds `Timeline` events for every `Widget` built.

  [debugProfileBuildsEnabled][]：为每个已构建的 `Widget` 添加 `Timeline` 事件。

- [debugProfileBuildsEnabledUserWidgets][]: Adds `Timeline` events for every user-created `Widget` built.

  [debugProfileBuildsEnabledUserWidgets][]：为每个用户创建的已构建 `Widget` 添加 `Timeline` 事件。

- [debugProfileLayoutsEnabled][]: Adds `Timeline` events for every `RenderObject` layout.

  [debugProfileLayoutsEnabled][]：为每次 `RenderObject` 布局添加 `Timeline` 事件。

- [debugProfilePaintsEnabled][]: Adds `Timeline` events for every `RenderObject` painted.

  [debugProfilePaintsEnabled][]：为每次 `RenderObject` 绘制添加 `Timeline` 事件。

[debugProfileBuildsEnabled]: https://api.flutter-io.cn/flutter/widgets/debugProfileBuildsEnabled.html
[debugProfileBuildsEnabledUserWidgets]: https://api.flutter-io.cn/flutter/widgets/debugProfileBuildsEnabledUserWidgets.html
[debugProfileLayoutsEnabled]: https://api.flutter-io.cn/flutter/rendering/debugProfileLayoutsEnabled.html
[debugProfilePaintsEnabled]: https://api.flutter-io.cn/flutter/rendering/debugProfilePaintsEnabled.html

## Instructions

## 操作步骤

1. _[Optional]_ Set any desired tracing flags to true from your app's main method.

   **[可选]** 在应用的 `main` 方法中将所需的跟踪标志设为 true。

2. Run your Flutter web app in [profile mode][].

   以 [profile 模式][profile mode] 运行 Flutter Web 应用。

3. Open up the [Chrome DevTools Performance panel][] for your application,
    and [start recording][] to capture timeline events.

   为应用打开 [Chrome DevTools 性能面板][Chrome DevTools Performance panel]，
   并 [开始录制][start recording] 以捕获 timeline 事件。

[start recording]: https://developer.chrome.com/docs/devtools/performance/#record

[profile mode]: /testing/build-modes#profile
[Chrome DevTools performance panel]: https://developer.chrome.com/docs/devtools/performance