# Chrome DevTools MCP — AI Browser Debugging via Model Context Protocol

> An MCP server that lets AI coding agents control and inspect live Chrome browsers for automated debugging, performance analysis, and testing.

## Install

Save as a script file and run:

# Chrome DevTools MCP — AI Browser Debugging via Model Context Protocol

## Quick Use
```bash
npx @anthropic-ai/chrome-devtools-mcp
# Or add to your MCP config
# Launch Chrome with remote debugging enabled
google-chrome --remote-debugging-port=9222
```

## 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/

---
Source: https://tokrepo.com/en/workflows/asset-195d0fff
Author: Script Depot