Flutter 3.41 is live! Check out theFlutter 3.41 blog post!
Debug performance for web apps
Learn how to use Chrome DevTools to debug web performance issues.
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 theChrome DevTools performance panel for debugging.
For information on how to optimize web loading speed, check out the (free) article on Medium,Best practices for optimizing Flutter web loading speed.
You can also emit your own timeline events using thedart:developerTimeline andTimelineTask APIs for further performance analysis.
Optional flags to enhance tracing
# To configure which timeline events are tracked, set any of the following top-level properties totrue in your app'smain method.
- debugProfileBuildsEnabled: Adds
Timelineevents for everyWidgetbuilt. - debugProfileBuildsEnabledUserWidgets: Adds
Timelineevents for every user-createdWidgetbuilt. - debugProfileLayoutsEnabled: Adds
Timelineevents for everyRenderObjectlayout. - debugProfilePaintsEnabled: Adds
Timelineevents for everyRenderObjectpainted.
Instructions
#- [Optional] Set any desired tracing flags to true from your app's main method.
- Run your Flutter web app inprofile mode.
- Open up theChrome DevTools Performance panel for your application, andstart recording to capture timeline events.
Unless stated otherwise, the documentation on this site reflects Flutter 3.38.6. Page last updated on 2025-10-30.View source orreport an issue.