chrome-devtools

Q: How do I install chrome-devtools?

Run npx skills add https://github.com/chromedevtools/chrome-devtools-mcp --skill chrome-devtools in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/chrome-devtools/ (personal) or .claude/skills/chrome-devtools/ (project).

by chromedevtoolsAI & Agents

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).

Installs: 8.6K
Last 24h: +33
Trending rank: #4201
Security: Warn

Install

Works with every agent the skills CLI supports.

npx skills add https://github.com/chromedevtools/chrome-devtools-mcp --skill chrome-devtools

01
Install
Run the command in your project. The CLI asks which agents to install for.
02
Describe the task
Ask your agent for something this skill covers. It loads chrome-devtools automatically when relevant.
03
Review the result
The agent follows the SKILL.md steps, scripts and references bundled with the skill.

Security audits

Independent scans of the skill's instructions and bundled files.

Gen Agent Trust Hub PassSAFE ·The chrome-devtools skill provides a set of tools for browser automation and debugging via the official Chrome DevTools MCP server. The skill is fundamentally safe and uses official software from the Chrome team. However, because its primary function involves processing and interacting with content from external, untrusted websites, it possesses an inherent attack surface for indirect prompt injection. Malicious instructions embedded in a web page could potentially attempt to influence the agent's behavior during a session. Users should ensure they are interacting with trusted sites when using automated browser features.

Socket PassNo alerts

Snyk WarnMEDIUM ·Risk: MEDIUM · 1 issue

Runlayer WarnMEDIUM ·1/1 file flagged

ZeroLeaks PassNONE ·Score: 93/100 · 2 sections analyzed

SKILL.md

The instructions your agent reads when the skill is triggered.

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 --categoryExtensions flag.
For memory tooling, use the --memoryDebugging flag.

Page targeting: Page-scoped tools require a pageId parameter to target a specific page. Use list_pages to see available pages and their IDs (e.g. pageId: 1), or use the ID returned when creating a page with new_page. Note: For evaluate_script, pageId is required when targeting pages. However, when --categoryExtensions is enabled, pageId is optional so you can pass serviceWorkerId instead to evaluate inside an extension background service worker. 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_page or new_page
Wait: wait_for to ensure content is loaded if you know what you look for.
Snapshot: take_snapshot with pageId to understand page structure
Interact: Use element uids from snapshot for click, fill, etc., passing the corresponding pageId.

Efficient data retrieval

Use filePath parameter for large outputs (screenshots, snapshots, traces)
Use pagination (pageIdx, pageSize) and filtering (types) to minimize data
Set includeSnapshot: false on 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)
CSS & Styling inspection: Use get_css_styles to inspect matched rules, cascade, and CSS variables. Treat the output as authoritative and complete.
Additional details: Use evaluate_script for runtime DOM/JS data not available via get_css_styles or take_snapshot.

Parallel execution

You can send multiple tool calls in parallel, but maintain correct order: navigate → wait → snapshot → interact.

Testing an extension

Before proceeding: Extension tools (install_extension, list_extensions, etc.) are only available when the MCP server is started with the --categoryExtensions flag. If these tools are not in your tool list, stop and ask the user to update their MCP server configuration:
{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": ["chrome-devtools-mcp@latest", "--categoryExtensions"]
    }
  }
}
After updating, the user must restart the MCP server (or their AI client) for the change to take effect.

Install: Use install_extension with the path to the unpacked extension.
Identify: Get the extension ID from the response or by calling list_extensions.
Trigger Action: Use trigger_extension_action to open the popup or side panel if applicable.
Verify Service Worker: Use evaluate_script with serviceWorkerId (omitting pageId and args) to check extension state or trigger background actions. When evaluating in a page, pass pageId (omitting serviceWorkerId).
Verify Page Behavior: Navigate to a page where the extension operates and use take_snapshot to 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.

FAQ

What does the chrome-devtools skill do?

How do I install chrome-devtools?

Run npx skills add https://github.com/chromedevtools/chrome-devtools-mcp --skill chrome-devtools in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/chrome-devtools/ (personal) or .claude/skills/chrome-devtools/ (project).

Which AI agents can use chrome-devtools?

Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.

Is chrome-devtools safe to install?

Security partners have reviewed it: Gen Agent Trust Hub passed; Socket passed; Snyk flagged items to review; Runlayer flagged items to review; ZeroLeaks passed. As with any skill, read the SKILL.md and bundled scripts before installing.

Who maintains chrome-devtools?

It is published by chromedevtools in chromedevtools/chrome-devtools-mcp. It has 8,646 recorded installs.