Chrome DevTools MCP — AI Browser Debugging via Model Context Protocol

Introduction

Chrome DevTools MCP is an MCP server that bridges AI coding agents to live Chrome browser sessions. It exposes Chrome DevTools Protocol capabilities through the Model Context Protocol, enabling agents to inspect DOM, monitor network traffic, capture screenshots, and debug JavaScript in real time.

What Chrome DevTools MCP Does

• Connects AI agents to running Chrome instances via the DevTools Protocol
• Provides tools for DOM inspection, element selection, and CSS modification
• Captures screenshots and records performance profiles for analysis
• Monitors console output, network requests, and JavaScript errors
• Enables automated accessibility audits and Lighthouse-style reports

Architecture Overview

The server acts as a bridge between MCP-compatible AI clients and Chrome's remote debugging protocol. It launches or connects to a Chrome instance on a specified debugging port, translates MCP tool calls into DevTools Protocol commands, and streams results back to the agent. The architecture supports multiple concurrent tabs and persistent sessions.

Self-Hosting & Configuration

• Requires Node.js 18+ and a Chrome or Chromium installation
• Launch Chrome with --remote-debugging-port=9222 for external connections
• Configure in Claude Desktop via claude_desktop_config.json MCP server entry
• Supports headless mode for CI/CD pipelines with --headless flag
• Environment variable CHROME_PATH overrides default browser location

Key Features

• Full DOM tree traversal and element manipulation from AI agents
• Network request interception and response inspection
• JavaScript console evaluation with return value capture
• Performance timeline recording with CPU and memory profiling
• Screenshot capture at arbitrary viewport sizes

Comparison with Similar Tools

• Playwright MCP — broader browser support but heavier setup; Chrome DevTools MCP is Chrome-specific and lighter
• Puppeteer — programmatic API without MCP integration; requires custom glue code
• Browser Use — full browser automation agent; Chrome DevTools MCP focuses on debugging and inspection
• Stagehand — higher-level browser actions; Chrome DevTools MCP provides low-level protocol access

FAQ

Q: Does it work with browsers other than Chrome? A: It works with any Chromium-based browser (Edge, Brave, Arc) that supports the DevTools Protocol.

Q: Can multiple agents connect to the same browser? A: Yes, the server supports multiple concurrent MCP sessions targeting different tabs.

Q: Is it safe to use in production? A: It is designed for development and testing. Production use requires careful access control on the debugging port.

Q: Does it require a paid API? A: No. The MCP server is fully open source and free. It connects to your local Chrome installation.

Sources

• https://github.com/ChromeDevTools/chrome-devtools-mcp
• https://chromedevtools.github.io/devtools-protocol/