[ Web Proxy ]
URL:
Viewing: https://docs.flutter.dev/perf/web-performance [Back]  [Original]

Debug performance for web apps Skip to main content

docs.flutter.dev uses cookies from Google to deliver and enhance the quality of its services and to analyze traffic.

Learn more OK, got it
Flutter logo [Flutter logo] Flutter Docs
On this page

Debug performance for web apps

Learn how to use Chrome DevTools to debug web performance issues.

Note

Profiling Flutter web apps requires Flutter version 3.14 or later.

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.

Note

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

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

Screenshot of the Chrome DevTools performance panel [Screenshot of the Chrome DevTools performance panel]

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.

Instructions

#
  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.

Web Proxy Viewer  |  New URL  |  Original Page