blob: d8be583b229fd5076b0650aa5c0d0e7235ace40c [file] [log] [blame] [view]
# 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
```yaml
name: foo
issue_tracker: <link_to_your_issue_tracker.com>
version: 0.0.1
material_icon_code_point: '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:
```sh
flutter pub get &&
dart run devtools_extensions build_and_copy \
--source=. \
--dest=../foo/extension/devtools
```