Chrome DevTools MCP

Control and inspect a live Chrome browser via MCP. Provides 26 tools for reliable automation, debugging, performance analysis, and accessibility testing.

Quick Reference

Topic	Reference
Tool Reference	All 26 tools with parameters
Configuration	CLI options, MCP client setup, connecting to running Chrome
Troubleshooting	Common errors and debugging
Accessibility	A11y auditing workflow and scripts
Android Debugging	Remote debugging Chrome on Android

Setup

MCP client configuration:

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

Requirements: Node.js v20.19+, Chrome stable, npm.

Core Concepts

Browser lifecycle: Browser starts automatically on first tool call using a persistent Chrome profile. Configure via CLI args: npx chrome-devtools-mcp@latest --help.

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_page or new_page
Wait: wait_for to ensure content is loaded
Snapshot: take_snapshot to understand page structure
Interact: Use element uids from snapshot for click, fill, etc.

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

Need	Tool	Why
Automation/interaction	`take_snapshot`	Text-based, faster, better for automation
Visual inspection	`take_screenshot`	When user needs to see visual state
Additional details	`evaluate_script`	Data not in accessibility tree
Performance analysis	`performance_start_trace` → `performance_stop_trace`	Core Web Vitals, insights
Network debugging	`list_network_requests` → `get_network_request`	Request/response inspection
Console errors	`list_console_messages` → `get_console_message`	JS errors, warnings, issues

Parallel execution

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

Tool Categories (26 tools)

Input Automation (8)

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

Navigation (6)

close_page, list_pages, navigate_page, new_page, select_page, wait_for

Emulation (2)

emulate (color scheme, CPU throttle, network, viewport, geolocation, user agent), resize_page

Performance (3)

performance_start_trace, performance_stop_trace, performance_analyze_insight

Network (2)

list_network_requests, get_network_request

Debugging (5)

evaluate_script, take_screenshot, take_snapshot, list_console_messages, get_console_message

Troubleshooting

If chrome-devtools-mcp is insufficient, guide users to Chrome DevTools UI:

For launch/connection errors, see Troubleshooting.