Overview
Official Chrome DevTools for coding agents via MCP — DOM inspection, network monitoring, console logging, performance profiling.
Setup
Run with npx:
npx @puppeteer/chrome-devtools-mcp --port 9222Configuration
Chrome must be started with --remote-debugging-port=9222Documentation
Chrome DevTools MCP
Overview
The Chrome DevTools MCP is Google's official Model Context Protocol server that exposes the full Chrome DevTools suite to AI coding agents. Released by the Chrome DevTools team, it provides agents with direct access to DOM inspection, network monitoring, console logging, performance profiling, and accessibility auditing — all through standardized MCP tool calls. With 46,167 GitHub stars, it marks Google's formal endorsement of MCP as the standard protocol for agent-browser interaction.
Features
- Full DevTools API exposure — agents can inspect DOM, monitor network, evaluate console, and profile performance
- Standard MCP protocol — compatible with any MCP client (Claude Code, Cursor, VS Code, Windsurf)
- Real-time page interaction — agents can click, type, navigate, and extract data from live pages
- Network interceptor — inspect and modify network requests/responses in real-time
- Console access — read console logs, evaluate JavaScript, catch errors
- Screenshot and snapshot — capture page state for visual grounding
- Accessibility auditing — run axe-core audits through agent commands
- Performance profiling — start/stop CPU and memory profiling programmatically
- Apache-2.0 license
Installation
npx @puppeteer/chrome-devtools-mcp --port 9222
Chrome must be started with remote debugging enabled:
google-chrome --remote-debugging-port=9222
# or on macOS:
/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222
Configuration (Claude Code)
{
"mcpServers": {
"chrome-devtools": {
"command": "npx",
"args": [
"@puppeteer/chrome-devtools-mcp",
"--port", "9222"
]
}
}
}
Available Tools
| Tool | Description |
|---|---|
page.navigate | Navigate to a URL |
page.snapshot | Get accessible snapshot of page |
page.captureScreenshot | Capture visual screenshot |
dom.click | Click an element by selector |
dom.fill | Fill a form field |
network.monitor | Monitor network requests |
console.read | Read console log entries |
performance.profile | Start/stop performance profiling |
accessibility.audit | Run accessibility audit |
Usage Examples
Web Scraping with an Agent
// Agent can navigate to a page, wait for content, and extract data
await page.navigate('https://example.com');
await page.snapshot(); // Get page content
const elements = await dom.query('article h2'); // Find all headings
Debugging a Web App
// Monitor network errors during a user flow
await network.monitor({ capture: 'errors' });
await dom.click('#submit-button');
const errors = await console.read({ level: 'error' });
Performance Auditing
// Profile page load performance
await performance.profile({ type: 'load' });
await page.navigate('https://myapp.com');
const profile = await performance.stop();
Pros
- ✅ Official Google/Chrome DevTools support guarantees long-term maintenance
- ✅ Full browser automation without browser extensions or third-party dependencies
- ✅ Standard MCP protocol ensures compatibility with any MCP-compatible agent
- ✅ Comprehensive DevTools capabilities beyond basic browser automation
- ✅ Active development by Chrome DevTools team
Cons
- ❌ Requires Chrome with remote debugging port enabled
- ❌ Limited to a single browser instance per server process
- ❌ No built-in support for mobile device emulation
- ❌ Network monitoring can be overwhelming on complex pages
When to Use
Chrome DevTools MCP is ideal when you need production-grade browser automation for AI agents — particularly for web scraping, automated testing, performance auditing, and debugging workflows. Use it when you need more than basic navigation and clicking, and want access to the full Chrome DevTools suite through the MCP protocol.