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 uid s. 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 uid s 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.