Chrome DevTools MCP

Chrome DevTools for agents 1.0 lets coding agents control and inspect a live Chrome browser via the Model Context Protocol. Install it as a Claude Code plugin — not a bare MCP server — to get the bundled agent skills.

• Repository: ChromeDevTools/chrome-devtools-mcp
• npm package: chrome-devtools-mcp
• Node.js: latest LTS
• Chrome: current stable (144+ for auto-connect)

What it provides

43 tools across 11 categories:

• Input automation (10): click, click_at, drag, fill, fill_form, handle_dialog, hover, press_key, type_text, upload_file
• Navigation (6): close_page, list_pages, navigate_page, new_page, select_page, wait_for
• Emulation (2): emulate, resize_page
• Performance (3): performance_start_trace, performance_stop_trace, performance_analyze_insight
• Network (2): list_network_requests, get_network_request
• Debugging (8): evaluate_script, list_console_messages, get_console_message, lighthouse_audit, take_screenshot, take_snapshot, screencast_start, screencast_stop
• Memory (5): take_heapsnapshot, get_heapsnapshot_class_nodes, get_heapsnapshot_details, get_heapsnapshot_retainers, get_heapsnapshot_summary
• Extensions (5): install_extension, list_extensions, reload_extension, trigger_extension_action, uninstall_extension
• Third-party (2): list_3p_developer_tools, execute_3p_developer_tool
• WebMCP (2): list_webmcp_tools, execute_webmcp_tool

Bundled agent skills

The plugin ships six expert instruction skills that load automatically alongside the tools:

1. a11y-debugging — Accessibility auditing: semantic HTML, ARIA labels, focus states, keyboard navigation, tap targets, color contrast. Uses lighthouse_audit + take_snapshot.
2. chrome-devtools — Core debugging and browser automation. Covers the browser lifecycle, page selection, and element interaction via snapshot UIDs.
3. chrome-devtools-cli — Shell scripting via the chrome-devtools-mcp CLI binary for batch automation tasks.
4. debug-optimize-lcp — Guided LCP / Core Web Vitals debugging and optimization. Triggered by mentions of "LCP", "page load speed", "CWV".
5. memory-leak-debugging — Diagnoses JavaScript memory leaks using heap snapshots and memlab. Triggered by high memory usage or OOM errors.
6. troubleshooting — Connection and target troubleshooting when list_pages, new_page, or navigate_page fail.

Lighthouse audits

The lighthouse_audit tool runs Lighthouse directly from the agent. It covers five categories: performance, accessibility, SEO, best practices, and agentic browsing.

Setup

Install as a plugin (recommended)

The plugin bundles the MCP server and all six agent skills. Do not use claude mcp add — that installs only the bare server and loses the bundled skills.

/plugin marketplace add ChromeDevTools/chrome-devtools-mcp
/plugin install chrome-devtools-mcp@chrome-devtools-plugins

Verify it loaded:

/mcp

The chrome-devtools server should appear in the list.

Legacy: bare MCP server (discouraged)

If you need the server without the bundled skills, or for a generic MCP client that doesn't support plugins:

claude mcp add chrome-devtools --scope user npx chrome-devtools-mcp@latest

For per-project configuration without the plugin, add to .mcp.json:

{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": ["-y", "chrome-devtools-mcp@latest"]
    }
  }
}

Connecting to a running Chrome instance

By default the MCP server launches its own isolated Chrome. To connect to your existing session instead — useful when you need an authenticated state without re-logging in — choose one of the two modes below.

Auto-connect (Chrome 144+)

1. In Chrome, navigate to chrome://inspect/#remote-debugging and allow incoming debugging connections in the dialog that appears.
2. Add --autoConnect to the plugin's MCP server args.

Gotcha: the plugin cache is at ~/.claude/plugins/cache/chrome-devtools-plugins/chrome-devtools-mcp/latest/.claude-plugin/plugin.json. Edit the args array there and run /reload-plugins. Plugin updates overwrite this file, so you may need to re-apply the flag after each update.

Manual remote-debugging port (sandboxed)

Start Chrome with a dedicated profile and debugging port:

# macOS
/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome \
  --remote-debugging-port=9222 \
  --user-data-dir="$HOME/.chrome-debug-profile"

Then point the MCP server at that port with --browser-url:

{
  "args": [
    "-y", "chrome-devtools-mcp@latest",
    "--browser-url=http://127.0.0.1:9222"
  ]
}

This mode uses a separate profile, so it cannot access your main session's cookies or sign-ins. Use it for development and testing where isolation matters.

Multi-worktree setups: use a distinct --user-data-dir and debugging port per worktree to avoid conflicts. Port 9222 is a common default — collisions are silent. See Dev Serve for the parallel-worktree port-allocation pattern.

Configuration options

Pass options via args in the MCP configuration:

Option	Default	Purpose
--headless	false	Run without visible browser UI
--isolated	false	Temporary profile, cleaned up on close
--slim	false	Only 3 basic tools (navigation, scripts, screenshots)
--autoConnect	false	Auto-connect to running Chrome (144+)
--browser-url	—	Connect to an existing Chrome instance by URL
--channel	stable	Chrome channel: stable, canary, beta, dev
--viewport	—	Initial viewport size, e.g. 1280x720
--no-usage-statistics	—	Opt out of Google usage telemetry
--no-performance-crux	—	Disable CrUX API calls for field data
--executable-path	—	Custom Chrome binary path
--log-file	—	Write debug logs to a file
--accept-insecure-certs	false	Accept self-signed certificates

Run npx chrome-devtools-mcp@latest --help for the full list.

Example: performance audit

Prompt:

Check the performance of https://developers.chrome.com

The agent will:

1. Navigate to the URL with navigate_page
2. Run lighthouse_audit to evaluate performance, accessibility, SEO, best practices, and agentic browsing
3. Report Core Web Vitals (LCP, CLS, INP) and specific improvement suggestions

Example prompt for debugging:

A few images on localhost:8080 are not loading. What's happening?

The agent will navigate to the page, inspect network requests for failed image loads, check console errors, and report the root cause (e.g., 404s, CORS issues, incorrect paths).

Security considerations

Chrome DevTools for agents exposes your entire browser session to the agent.

• The agent can read and act on everything in the connected browser — page content, cookies, signed-in accounts, any data visible in DevTools.
• Auto-connect inherits your active session. If you are signed into banking, email, or other sensitive sites, the agent can access that data. Only connect to browsers where you are comfortable with agent access to every open tab.
• Remote debugging port is network-accessible. Any process on your machine can connect to it. Only enable it while actively using it, and use --user-data-dir with a dedicated profile rather than your main profile.
• Disable Google telemetry with --no-usage-statistics or CHROME_DEVTOOLS_MCP_NO_USAGE_STATISTICS=1.
• Use --isolated to prevent the MCP session from reading your regular Chrome profile data.

Troubleshooting

Cannot find module error

Corrupted npx/npm cache or unsupported Node version:

rm -rf ~/.npm/_npx
npm cache clean --force
node --version  # must be current LTS

Target closed error

Chrome could not start. Check:

• No other Chrome instances are running (when using default launch mode)
• Chrome stable is installed and up to date

Auto-connect timeout

Tools fail with timeout after enabling --autoConnect:

1. Confirm Chrome 144+ is running
2. Accept the connection prompt at chrome://inspect/#remote-debugging
3. Confirm no other tool holds the debugging port

Sandbox restrictions

If your MCP client uses OS sandboxing (macOS Seatbelt, Linux containers), Chrome cannot create its own sandbox. Use --browser-url to connect to a Chrome instance launched outside the sandbox.

Debug logging

{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": [
        "-y", "chrome-devtools-mcp@latest",
        "--log-file", "/tmp/chrome-devtools-mcp.log"
      ],
      "env": { "DEBUG": "*" }
    }
  }
}