Example DevTools Extension

This is an end-to-end example of a DevTools extension, including

• the parent package:foo that provides the DevTools extension to end-user applications (foo/packages/foo)
• the end-user application (app_that_uses_foo) that depends on package:foo, which will trigger a load of the package:foo DevTools extension when debugging this app with DevTools
• the package:foo DevTools extension (foo/packages/foo_devtools_extension), which is a Flutter web app that will be embedded in DevTools when debugging an app the uses package:foo

This example will show you how to:

1. Structure your package for optimal extension development and publishing

   foo/  # formerly the repository root of your pub package
       packages/
           foo/  # your pub package
           extension/
               devtools/
               build/
                   ...  # pre-compiled output of foo_devtools_extension
               config.yaml
           foo_devtools_extension/  # source code for your extension
   

2. Configure your extension using the foo/extension/devtools/config.yaml file

   name: foo
   issueTracker: <link_to_your_issue_tracker.com>
   version: 0.0.1
   materialIconCodePoint: '0xe0b1'
   

3. Use package:devtools_extensions and package:devtools_app_shared to develop your DevTools extension (see source code under foo_devtools_extension).
4. Ship your extension with your pub package by including the pre-built assets in the foo/extension/devtools/build directory.
   • For this example, the pre-built assets for foo_devtools_extension were added to foo/extension/devtools/build by running the following command from the foo_devtools_extension/ directory:

     flutter pub get &&
     dart run devtools_extensions build_and_copy \
         --source=. \
         --dest=../foo/extension/devtools