DevTools extensions

What are DevTools extensions?


DevTools extensions are developer tools provided by third-party packages that are tightly integrated into the DevTools tooling suite. Extensions are distributed as part of a pub package, and they are dynamically loaded into DevTools when a user is debugging their app.

Use a DevTools extension


If your app depends on a package that provides a DevTools extension, the extension automatically shows up in a new tab when you open DevTools.

Configure extension enablement states


You need to manually enable the extension before it loads for the first time. Make sure the extension is provided by a source you trust before enabling it.

Screenshot of extension enablement prompt

Extension enablement states are stored in a devtools_options.yaml file in the root of the user's project (similar to analysis_options.yaml). This file stores per-project (or optionally, per user) settings for DevTools.

If this file is checked into source control, the specified options are configured for the project. This means that anyone who pulls a project's source code and works on the project uses the same settings.

If this file is omitted from source control, for example by adding devtools_options.yaml as an entry in the .gitignore file, then the specified options are configured separately for each user. Since each user or contributor to the project uses a local copy of the devtools_options.yaml file in this case, the specified options might differ between project contributors.

Build a DevTools extension


For an in-depth guide on how to build a DevTools extension, check out Dart and Flutter DevTools extensions, a free article on Medium.

To learn more about writing and using DevTools extensions, check out the following video: