How do I install the Debugging Devtools Extensions skill?

Run npx skillmds@latest add flutter/debugging-devtools-extensions in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is Debugging Devtools Extensions safe to use?

This skill has not completed SkillMD's automated safety review yet. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Debugging Devtools Extensions?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Debugging Devtools Extensions free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Debugging Devtools Extensions?

flutter (@flutter) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Debugging Devtools Extensions by flutter

Name: Debugging Devtools Extensions
Author: flutter

Debugging Devtools Extensions

Guidelines and step-by-step workflow for debugging DevTools extensions locally, including stub mode, fixed-port launching, browser auto-opening, URL query parameters, target app connection, and human-in-the-loop interaction. Use when debugging or testing DevTools extension behavior.

flutter 5fbb2e4 3.3 KB Updated Sep 17, 2026

File contents

Debugging DevTools Extensions

Follow this workflow to test and debug DevTools extensions locally.

1. Local Stub Extensions Mode (No Server Needed)

When running DevTools in standalone web mode (flutter run -d chrome), DevTools does not run the devtools_server backend by default. To test extensions without a running server backend:

Open packages/devtools_app/lib/src/shared/development_helpers.dart.
Set const _debugDevToolsExtensions = true;.

[!WARNING] Never commit _debugDevToolsExtensions = true; to git. A repository unit test (development_helpers_test.dart) enforces that this flag remains false.

Activating stub mode registers the following mock extensions:

foo_ext (package:foo)
bar_ext (package:bar)
provider_ext (package:provider)

2. Automated Launch & Browser Navigation

The agent can automate running DevTools AND launching the browser directly to the target URL:

Step 2a: Launch DevTools on a Fixed Port

In packages/devtools_app, launch DevTools specifying a fixed --web-port:

flutter run -d chrome --web-port=52941

Step 2b: Open Browser to Target URL Automatically

Use the system OS open command to launch Chrome/browser directly to the desired test URL:

macOS: open "http://localhost:52941/foo_ext?embedMode=one"
Linux: xdg-open "http://localhost:52941/foo_ext?embedMode=one"
Windows: start "http://localhost:52941/foo_ext?embedMode=one"

3. Connecting to an End-User Target App

To test against real pub package extensions:

Run the sample app in packages/devtools_extensions/example/app_that_uses_foo:

cd packages/devtools_extensions/example/app_that_uses_foo
flutter run -d chrome

Ask the user to copy/paste the VM Service URI from the terminal output (e.g. ws://127.0.0.1:8181/xxx=/ws).
Open the browser automatically with the uri parameter using the appropriate OS command (as described in Step 2b):
- macOS: open "http://localhost:52941/foo_ext?embedMode=one&uri=<VM_SERVICE_URI>"
- Linux: xdg-open "http://localhost:52941/foo_ext?embedMode=one&uri=<VM_SERVICE_URI>"
- Windows: start "http://localhost:52941/foo_ext?embedMode=one&uri=<VM_SERVICE_URI>"

4. Human Interaction & User Prompting Steps

When an AI agent is performing this workflow:

Obtaining VM Service URI: When connecting to a target app, ask the user to provide the VM Service URI printed in the target app's console output (using ask_question or a direct prompt).
Automated Browser Opening: The agent should launch DevTools and execute the appropriate OS command (open, xdg-open, or start as described in Step 2b) to launch the browser automatically.
Manual Visual Verification: Ask the user to inspect the opened browser window and confirm whether the expected extension UI or behavior is visible.

---name: debugging-devtools-extensionsdescription: Guidelines and step-by-step workflow for debugging DevTools extensions locally, including stub mode, fixed-port launching, browser auto-opening, URL query parameters, target app connection, and human-in-the-loop interaction. Use when debugging or testing DevTools extension behavior.---# Debugging DevTools ExtensionsFollow this workflow to test and debug DevTools extensions locally.## 1. Local Stub Extensions Mode (No Server Needed)When running DevTools in standalone web mode (`flutter run -d chrome`), DevTools does not run the `devtools_server` backend by default. To test extensions without a running server backend:1. Open [`packages/devtools_app/lib/src/shared/development_helpers.dart`](file:///Users/ryjohn/code/github/flutter/devtools/packages/devtools_app/lib/src/shared/development_helpers.dart#L57).2. Set `const _debugDevToolsExtensions = true;`.> [!WARNING]> Never commit `_debugDevToolsExtensions = true;` to git. A repository unit test (`development_helpers_test.dart`) enforces that this flag remains `false`.Activating stub mode registers the following mock extensions:- `foo_ext` (`package:foo`)- `bar_ext` (`package:bar`)- `provider_ext` (`package:provider`)## 2. Automated Launch & Browser NavigationThe agent can automate running DevTools AND launching the browser directly to the target URL:### Step 2a: Launch DevTools on a Fixed PortIn `packages/devtools_app`, launch DevTools specifying a fixed `--web-port`:```bashflutter run -d chrome --web-port=52941```### Step 2b: Open Browser to Target URL AutomaticallyUse the system OS open command to launch Chrome/browser directly to the desired test URL:- **macOS**: `open "http://localhost:52941/foo_ext?embedMode=one"`- **Linux**: `xdg-open "http://localhost:52941/foo_ext?embedMode=one"`- **Windows**: `start "http://localhost:52941/foo_ext?embedMode=one"`## 3. Connecting to an End-User Target AppTo test against real pub package extensions:1. Run the sample app in `packages/devtools_extensions/example/app_that_uses_foo`: ```bash cd packages/devtools_extensions/example/app_that_uses_foo flutter run -d chrome ```2. Ask the user to copy/paste the VM Service URI from the terminal output (e.g. `ws://127.0.0.1:8181/xxx=/ws`).3. Open the browser automatically with the `uri` parameter using the appropriate OS command (as described in Step 2b): - **macOS**: `open "http://localhost:52941/foo_ext?embedMode=one&uri=<VM_SERVICE_URI>"` - **Linux**: `xdg-open "http://localhost:52941/foo_ext?embedMode=one&uri=<VM_SERVICE_URI>"` - **Windows**: `start "http://localhost:52941/foo_ext?embedMode=one&uri=<VM_SERVICE_URI>"`## 4. Human Interaction & User Prompting StepsWhen an AI agent is performing this workflow:- **Obtaining VM Service URI**: When connecting to a target app, ask the user to provide the VM Service URI printed in the target app's console output (using `ask_question` or a direct prompt).- **Automated Browser Opening**: The agent should launch DevTools and execute the appropriate OS command (`open`, `xdg-open`, or `start` as described in Step 2b) to launch the browser automatically.- **Manual Visual Verification**: Ask the user to inspect the opened browser window and confirm whether the expected extension UI or behavior is visible.

Frequently asked questions