Debug performance for web apps

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.

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

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

• debugProfileBuildsEnabled: Adds Timeline events for every Widget built.
• debugProfileBuildsEnabledUserWidgets: Adds Timeline events for every user-created Widget built.
• debugProfileLayoutsEnabled: Adds Timeline events for every RenderObject layout.
• debugProfilePaintsEnabled: Adds Timeline events for every RenderObject painted.

1. [Optional] Set any desired tracing flags to true from your app's main method.
2. Run your Flutter web app in profile mode.
3. Open up the Chrome DevTools Performance panel for your application, and start recording to capture timeline events.