An MCP server by Google that enables AI coding agents (Claude, Gemini, Cursor) to control Chrome browsers in real-time via Puppeteer and Chrome DevTools Protocol for automation, performance analysis, and debugging.
Overview#
chrome-devtools-mcp is an open-source project by Google LLC that exposes Chrome DevTools capabilities to AI coding agents through the Model-Context-Protocol (MCP) standard.
Core Value: Breaks the barrier between AI models and browser environments. AI can directly "see" browser console logs, network requests, DOM structures, and performance trace data, and execute actions like clicks and navigation - rather than relying solely on pasted code snippets or screenshots.
Features#
Tool Collection (26 Tools, 6 Categories)#
1. Input Automation (8 tools)
click,drag,fill,fill_form,handle_dialog,hover,press_key,upload_file
2. Navigation Automation (6 tools)
close_page,list_pages,navigate_page,new_page,select_page,wait_for
3. Debugging & Inspection (5 tools)
take_screenshot,take_snapshot,list_console_messages,get_console_message,evaluate_script
4. Network Analysis (2 tools)
list_network_requests,get_network_request
5. Performance Insights (3 tools)
performance_start_trace,performance_stop_trace,performance_analyze_insight
6. Environment Emulation (2 tools)
emulate,resize_page
Core Capabilities#
- Performance Insights: Record traces with Chrome DevTools and extract actionable performance insights
- Advanced Browser Debugging: Analyze network requests, screenshots, console messages with source-mapped stack traces
- Reliable Automation: Puppeteer-based automation with automatic operation result waiting
- CrUX API Integration: Real-time user experience data
Requirements#
- Node.js: v20.19+ (latest maintenance LTS recommended)
- Chrome: Current stable version or newer
- npm
Quick Start#
Standard MCP Configuration#
{
"mcpServers": {
"chrome-devtools": {
"command": "npx",
"args": ["-y", "chrome-devtools-mcp@latest"]
}
}
}
Client Installation#
Claude Code CLI: claude mcp add chrome-devtools --scope user npx chrome-devtools-mcp@latest
Gemini CLI: gemini mcp add chrome-devtools npx chrome-devtools-mcp@latest
VS Code: code --add-mcp '{"name":"chrome-devtools","command":"npx","args":["-y","chrome-devtools-mcp"]}'
Configuration Options#
--autoConnect: Auto-connect to running Chrome (Chrome 144+)--browserUrl: Connect to Chrome at specified URL--wsEndpoint: Connect via WebSocket endpoint--headless: Run in headless mode--channel: Specify Chrome channel (stable/beta/canary)--isolated: Use temporary user data directory
Design Principles#
- Agent-Agnostic API: MCP standard, no LLM lock-in
- Token-Optimized: Semantic summaries instead of raw JSON
- Small, Deterministic Blocks: Composable tools
- Self-Healing Errors: Actionable errors with context and suggestions
- Human-Agent Collaboration: Machine and human readable output
Use Cases#
- Autonomous Frontend Debugging: AI analyzes page crashes, network errors, console exceptions
- End-to-End Testing: AI writes and executes E2E test flows
- Performance Auditing: Automatic Core Web Vitals detection with improvement suggestions
- Visual Regression: Compare page states via screenshots and snapshots