Chrome DevTools MCP — AI Agents with Browser Debugging

AI coding agents are great at writing code, but they’re blind to what happens when that code runs in a browser. Console errors, layout shifts, network timeouts, memory leaks — these runtime issues are invisible to agents that only see source files.

The Chrome DevTools MCP server changes that. Created by the official Chrome DevTools team, this open-source MCP server gives AI agents the full power of Chrome DevTools — directly from your AI coding assistant.

What is Chrome DevTools MCP?#

Chrome DevTools MCP is a Model Context Protocol server that bridges AI coding agents with a live Google Chrome browser instance. It exposes the entire Chrome DevTools feature set as MCP tools that agents can call:

• Navigate pages and inspect the DOM accessibility tree
• Capture console logs with source-mapped stack traces
• Monitor network requests and responses
• Record and analyze performance traces
• Take heap snapshots and debug memory leaks
• Run Lighthouse audits
• Emulate devices, network conditions, and geolocation

Under the hood, it uses Puppeteer and the Chrome DevTools Protocol (CDP) to control a Chrome instance.

Installation#

# Via npx (no install needed)
npx -y chrome-devtools-mcp@latest

Add to your MCP client config:

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

For headless mode:

{
  "args": ["-y", "chrome-devtools-mcp@latest", "--headless"]
}

Available Tools#

The server provides 50+ MCP tools across 7 categories:

Navigation (6 tools)#

navigate_page, new_page, close_page, list_pages, select_page, wait_for

Navigate to URLs, manage tabs, and wait for elements or network conditions.

Input Automation (10 tools)#

click, drag, fill, fill_form, handle_dialog, hover, press_key, type_text, upload_file, click_at

Interact with pages like a real user — click buttons, fill forms, handle alerts, upload files.

Emulation (2 tools)#

emulate, resize_page

Emulate devices, viewports, network conditions, CPU throttling, geolocation, color scheme, and user agent.

Debugging & Analysis (8 tools)#

evaluate_script, get_console_message, list_console_messages, lighthouse_audit, take_screenshot, take_snapshot, screencast_start, screencast_stop

Execute JavaScript, read console output, audit with Lighthouse, and capture screenshots or accessibility tree snapshots.

Network (2 tools)#

list_network_requests, get_network_request

Monitor all network activity — requests, responses, headers, timing, and payloads.

Performance (3 tools)#

performance_start_trace, performance_stop_trace, performance_analyze_insight

Record and analyze performance traces to diagnose LCP, INP, CLS, and other Core Web Vitals.

Memory / Heap (12 tools)#

take_heapsnapshot, close_heapsnapshot, compare_heapsnapshots, get_heapsnapshot_summary, get_heapsnapshot_details, get_heapsnapshot_class_nodes, get_heapsnapshot_dominators, get_heapsnapshot_duplicate_strings, get_heapsnapshot_edges, get_heapsnapshot_object_details, get_heapsnapshot_retainers, get_heapsnapshot_retaining_paths

Full heap analysis — snapshot, compare, trace retaining paths, find detached DOM nodes.

Extensions (5 tools)#

install_extension, list_extensions, reload_extension, trigger_extension_action, uninstall_extension

Manage browser extensions from your AI agent.

Third-Party & WebMCP (4 tools)#

list_3p_developer_tool, execute_3p_developer_tool, list_webmcp_tools, execute_webmcp_tool

Extend with third-party DevTools and WebMCP capabilities.

Agent Integration#

Claude Code#

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

Or install as a plugin:

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

Cursor#

Go to Cursor Settings → MCP → New MCP Server, paste the JSON config.

VS Code / GitHub Copilot#

Command Palette → Chat: Install Plugin From Source → paste ChromeDevTools/chrome-devtools-mcp.

Gemini CLI#

gemini mcp add chrome-devtools npx chrome-devtools-mcp@latest

OpenCode#

{
  "mcp": {
    "chrome-devtools": {
      "type": "remote",
      "url": "http://localhost:3000/mcp"
    }
  }
}

Real-World Workflows#

Bug Reproduction#

1. Navigate to the bug URL
2. Click through the reproduction steps
3. Capture console errors and network requests
4. Take a screenshot of the failure state
5. Report findings to the developer

Performance Optimization#

1. Start a performance trace
2. Interact with the slow page
3. Stop the trace
4. Ask "What is causing high LCP?"
5. The agent analyzes the trace and identifies bottlenecks

Memory Leak Detection#

1. Take a heap snapshot (baseline)
2. Perform actions that should release memory
3. Take a second heap snapshot
4. Compare snapshots — find detached DOM nodes
5. Trace retaining paths to find the leak source

UI Testing#

1. Navigate to the page
2. Emulate a mobile device
3. Check the accessibility tree
4. Run a Lighthouse audit
5. Report accessibility and performance issues

Why This Matters#

Before Chrome DevTools MCP, AI coding agents were limited to static code analysis for frontend work. They could review your source code but couldn’t see what the browser actually rendered, couldn’t catch runtime console errors, couldn’t measure real performance, and couldn’t verify that a UI fix actually worked.

Now, an AI agent can:

• Write code, build it, open a browser, and verify the result — all autonomously
• Debug runtime issues by reading console output, network timing, and heap snapshots
• Audit performance with Lighthouse and trace analysis
• Test across devices with emulation

This closes the loop between writing code and validating it in the browser — a capability that previously required a human developer at every step.

References#

• Chrome DevTools MCP GitHub Repository ↗
• Model Context Protocol Specification ↗
• Chrome DevTools Protocol ↗