# 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
    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:
        ```sh
        flutter pub get &&
        dart run devtools_extensions build_and_copy \
            --source=. \
            --dest=../foo/extension/devtools 
        ```