chrome-devtools
- Repo stars 42,728
- Author updated Live
- Author repo chrome-devtools-mcp
- Domain
- AI
- Compatible agents
-
- Claude Code
- Cursor
- Cline
- Codex
- Windsurf
- Gemini CLI
- +20
- Trust score
- 88 / 100 · community maintained
- Author / version / license
- @ChromeDevTools · no license declared
- Token usage
- Lean
- Setup complexity
- Guided setup
- External API key
- Not required
- Operating systems
- macOS · Linux · Windows
- Runtime requirements
- No special requirements
- Permissions
-
- Read-only
- Shell exec
- Write / modify
- Network behavior
- Local-only
- Install commands
- 26 variants
Profile is derived at build time from SKILL.md and install vectors. Subject to drift from author intent.
Heads up: 未限定 allowed-tools，默认拥有全部工具权限。
---
name: chrome-devtools
description: Uses Chrome DevTools via MCP for efficient debugging, troubleshooting and browser automation. Us…
category: ai
runtime: no special runtime
---
# chrome-devtools output preview
## PART A: Task fit
- Use case: Uses Chrome DevTools via MCP for efficient debugging, troubleshooting and browser automation. Use when debugging web pages, automating browser interactions, analyzing performance, or inspecting network requests. This skill does not apply to `--slim` mode (MCP configuration)..
- Inputs: target material, constraints, expected output, and acceptance criteria.
- Evidence boundary: follow “Core Concepts / Workflow Patterns / Before interacting with a page” and do not present inference as author intent.
## PART B: Execution result
- **01** The card summarizes the use case; runtime output centers on “Uses Chrome DevTools via MCP for efficient debugging, troubleshooting and browser automation. Use when debugging web pages, automating browser interactions, analyzing performance, or inspecting network requests. This skill does not apply to `--slim` mode (MCP configuration).”.
- **02** When the source has headings, the agent prioritizes “Core Concepts / Workflow Patterns / Before interacting with a page” so the result follows the author’s structure.
- **03** Typical output includes task judgment, concrete steps, required commands or file edits, validation, and follow-up options.
- **04** Risk context follows the fingerprint: read files, run shell commands, write/modify files; mostly runs locally; usually needs no extra API key.
## Running Rules
- read files, run shell commands, write/modify files; mostly runs locally; usually needs no extra API key.
- Validate with a small sample before expanding scope.
- Return the result, validation criteria, and next iteration options.The source does not require a stable slash command. After installation, invoke the skill by name and describe the task.
Name target files or source material, expected output, forbidden changes, and whether network or shell access is allowed. Permission fingerprint: read files, run shell commands, write/modify files.
Start with a small task and check whether the result follows “Core Concepts / Workflow Patterns / Before interacting with a page”. Inspect diffs, logs, previews, or tests before expanding scope.
Confirm the final output includes a concrete result, evidence, and next action. If it stays generic, tighten inputs, boundaries, and acceptance criteria.
---
name: chrome-devtools
description: Uses Chrome DevTools via MCP for efficient debugging, troubleshooting and browser automation. Us…
category: ai
source: ChromeDevTools/chrome-devtools-mcp
---
# chrome-devtools
## When to use
- Uses Chrome DevTools via MCP for efficient debugging, troubleshooting and browser automation. Use when debugging web p…
- Use it when the task has clear inputs, repeatable steps, and validation criteria.
## What to provide
- Target material, scope, expected result, and forbidden changes.
- Whether network, commands, file writes, or external services are allowed.
## Execution rules
- Organize steps around “Core Concepts / Workflow Patterns / Before interacting with a page” and keep inference separate from source facts.
- read files, run shell commands, write/modify files; mostly runs locally; usually needs no extra API key.
- Validate with a small sample before expanding the task.
## Output requirements
- Return the deliverable, key evidence, validation method, and next action.
- Mark missing information as unknown; do not invent commands, platforms, or dependencies.The author source anchors workflow facts; repository files anchor sources and commands; Fluxly only adds fit, limitations, and quality judgment.
skill "chrome-devtools" {
input -> user goal + target files + boundaries + acceptance criteria
context -> Core Concepts / Workflow Patterns / Before interacting with a page
rules -> SKILL.md triggers / order / output contract
runtime -> no special runtime | read files, run shell commands, write/modify files | mostly runs locally
guardrails -> usually needs no extra API key + small-sample validation + diff/log review
output -> copyable result + checklist + next iteration
}Core Concepts
Browser lifecycle: Browser starts automatically on first tool call using a persistent Chrome profile. Configure via CLI args in the MCP server configuration: npx chrome-devtools-mcp@latest --help.
Addional tooling can be enabled by providing the following flags:
- For extension tooling, use the
--categoryExtensionsflag. - For memory tooling, use the
--memoryDebuggingflag.
Page selection: Tools operate on the currently selected page. Use list_pages to see available pages, then select_page to switch context.
Element interaction: Use take_snapshot to get page structure with element uids. Each element has a unique uid for interaction. If an element isn't found, take a fresh snapshot - the element may have been removed or the page changed.
Workflow Patterns
Before interacting with a page
- Navigate:
navigate_pageornew_page - Wait:
wait_forto ensure content is loaded if you know what you look for. - Snapshot:
take_snapshotto understand page structure - Interact: Use element
uids from snapshot forclick,fill, etc.
Efficient data retrieval
- Use
filePathparameter for large outputs (screenshots, snapshots, traces) - Use pagination (
pageIdx,pageSize) and filtering (types) to minimize data - Set
includeSnapshot: falseon input actions unless you need updated page state
Tool selection
- Automation/interaction:
take_snapshot(text-based, faster, better for automation) - Visual inspection:
take_screenshot(when user needs to see visual state) - Additional details:
evaluate_scriptfor data not in accessibility tree
Parallel execution
You can send multiple tool calls in parallel, but maintain correct order: navigate → wait → snapshot → interact.
Testing an extension
- Install: Use
install_extensionwith the path to the unpacked extension. - Identify: Get the extension ID from the response or by calling
list_extensions. - Trigger Action: Use
trigger_extension_actionto open the popup or side panel if applicable. - Verify Service Worker: Use
evaluate_scriptwithserviceWorkerIdto check extension state or trigger background actions. - Verify Page Behavior: Navigate to a page where the extension operates and use
take_snapshotto check if content scripts injected elements or modified the page correctly.
Troubleshooting
If chrome-devtools-mcp is insufficient, guide users to use Chrome DevTools UI:
If there are errors launching chrome-devtools-mcp or Chrome, refer to https://github.com/ChromeDevTools/chrome-devtools-mcp/blob/main/docs/troubleshooting.md.
Decide Fit First
Design Intent
How To Use It
Boundaries And Review