Chrome DevTools MCP: The Open-Source Browser Automation Tool With 50,000+ GitHub Stars That Gives AI Coding Agents Full DevTools Power

What Is Chrome DevTools MCP?

If you've ever wished your AI coding assistant could actually see and interact with the web page it's building — instead of just generating code in a vacuum — Chrome DevTools MCP is exactly what you need.

Officially maintained by the Google Chrome DevTools team, chrome-devtools-mcp is an open-source Model Context Protocol (MCP) server that acts as a bridge between your AI coding agent and a live Chrome browser. It exposes the full power of Chrome DevTools — performance traces, network requests, console logs, DOM inspection, and Puppeteer-based automation — as tools your AI agent can call directly.

The result? Your AI can click buttons, fill forms, take screenshots, analyze performance bottlenecks, and debug JavaScript errors in real time — all while explaining what it's doing and why.

How Chrome DevTools MCP Works

The architecture is straightforward but powerful. Chrome DevTools MCP runs as a local MCP server that connects to Chrome via the Chrome DevTools Protocol (CDP). When your AI agent sends a tool call, the server translates it into the corresponding Chrome DevTools action and returns structured results.

Setup in Under 60 Seconds

Adding Chrome DevTools MCP to your AI coding workflow takes one JSON config block:

{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": ["-y", "chrome-devtools-mcp@latest"]
    }
  }
}

Paste that into your MCP client configuration — whether it's Claude Code, Cursor, VS Code Copilot, or any other MCP-compatible agent — and restart. That's it.

The Three Power Modes

Chrome DevTools MCP offers three operational modes depending on your needs:

🔧 Full Mode (Default)

All tools enabled: performance profiling with Lighthouse integration, network request inspection, console log analysis, Puppeteer automation, screenshot capture, and DOM inspection. Best for comprehensive debugging sessions.

⚡ Slim Mode

Reduced tool set for basic browser automation — clicking, typing, navigating, and screenshots. Lower token usage, faster response times. Ideal when you just need your agent to interact with a UI.

{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": ["-y", "chrome-devtools-mcp@latest", "--slim", "--headless"]
    }
  }
}

🔗 Connected Mode

Connects to an already-running Chrome instance instead of launching a new one. Essential for debugging authenticated sessions or complex application states.

{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": ["-y", "chrome-devtools-mcp@latest", "--browser-url=http://127.0.0.1:9222"]
    }
  }
}

Performance Profiling Your AI Agent Can Actually Use

This is where Chrome DevTools MCP truly shines compared to other browser automation tools. It doesn't just click buttons — it understands performance.

Your AI agent can:

• Record Chrome DevTools performance traces and extract actionable insights
• Identify long tasks, layout thrashing, and forced reflows
• Fetch real-user experience data from the Chrome User Experience Report (CrUX) API
• Compare lab data against field data to understand real-world performance
• Suggest specific code changes to fix bottlenecks

Instead of manually opening DevTools, recording a trace, and interpreting flame charts, you simply ask: "Record a performance trace of the homepage load and tell me what's slow." The agent handles the rest — including telling you that your third-party analytics script is blocking the main thread for 340ms.

Network Debugging Without the Headache

Ever spent 20 minutes hunting for a failed API call? Chrome DevTools MCP can inspect network requests directly:

Agent: "Check the last 10 network requests on this page. Are any failing?"

Chrome DevTools MCP:
→ GET /api/users — 200 OK (45ms)
→ POST /api/orders — 422 Unprocessable Entity (89ms) ⚠️
→ GET /api/products — 200 OK (23ms)

The POST to /api/orders returned a 422 error. 
Response body: {"error": "validation_failed", "field": "email"}
The email field in your order submission form is missing validation.

Source-mapped stack traces are included in console error reports, so your AI can trace errors back to the exact line in your source code — not the minified bundle.

Real-World Example: Debugging a React App With AI

Here's a realistic workflow of using Chrome DevTools MCP to debug a React application:

You: "Open localhost:3000 and check if there are any console errors"

Agent: [navigates to localhost:3000]
      [takes screenshot]
      
      Found 3 console errors:
      
      1. TypeError: Cannot read property 'name' of undefined
         → src/components/UserProfile.tsx:47
         → The user prop is undefined on first render
      
      2. Warning: Each child in a list should have a unique "key" prop
         → src/components/ProductList.tsx:23
      
      3. GET /api/analytics — 500 Internal Server Error

You: "Fix the first error — add a null check for the user prop"

Agent: [reads src/components/UserProfile.tsx]
      [edits line 47 to add optional chaining: user?.name]
      [refreshes page in browser]
      
      ✅ First error resolved. 2 remaining.

This feedback loop — edit code, reload, verify in browser, report results — runs in seconds instead of minutes. No more alt-tab between editor, browser, and terminal.

Which AI Coding Agents Support Chrome DevTools MCP?

Chrome DevTools MCP has the broadest agent compatibility of any browser automation MCP server. As of August 2026, it officially supports:

• Claude Code — via MCP add or as a full plugin with skills
• Cursor — one-click install button or manual config
• GitHub Copilot / VS Code — plugin or MCP server install
• Google Antigravity — connects to Antigravity's built-in browser
• OpenAI Codex — via MCP configuration
• Gemini CLI — project-wide or global install
• Amp, Bob, Cline, Devin, Factory CLI, Command Code, Copilot CLI

Installation is standardized across all platforms — the same JSON config works everywhere, making it trivial to add to any development workflow.

Privacy and Data Considerations

Chrome DevTools MCP is transparent about data collection:

• Usage statistics (tool success rates, latency) are collected by default — disable with --no-usage-statistics
• CrUX field data fetches real-user metrics from Google — disable with --no-performance-crux
• Browser content is exposed to MCP clients — avoid sharing sensitive data in browser sessions
• Data is handled per Google's Privacy Policy

For CI environments or privacy-sensitive work, set the CI or CHROME_DEVTOOLS_MCP_NO_USAGE_STATISTICS environment variable to disable collection automatically.

Key Benefits of Chrome DevTools MCP

• ✅ Official Google project — maintained by the Chrome DevTools team, not a side project
• ✅ Performance profiling — record traces, identify bottlenecks, get AI-suggested fixes
• ✅ Network debugging — inspect requests, catch failed APIs, read response bodies
• ✅ Reliable automation — Puppeteer-based with automatic waiting for action results
• ✅ Source-mapped errors — trace bugs to original source code, not minified bundles
• ✅ Broad agent support — works with Claude, Cursor, Copilot, Gemini, and 10+ more
• ✅ 60-second setup — one JSON config, no API keys required
• ✅ CrUX integration — combine lab and real-user performance data
• ✅ 50,000+ developers already trust it in production workflows

Frequently Asked Questions

Is Chrome DevTools MCP free to use?

Yes, Chrome DevTools MCP is completely free and open source under the MIT License. There are no API keys, subscriptions, or usage limits. You can install it via npx and start using it immediately without any account or payment.

Does Chrome DevTools MCP work with browsers other than Chrome?

Officially, only Google Chrome and Chrome for Testing are supported. Other Chromium-based browsers like Edge or Brave may work but are not guaranteed. The Chrome DevTools team provides fixes and support only for the latest Extended Stable Chrome version.

What's the difference between Chrome DevTools MCP and Puppeteer?

Puppeteer is the underlying automation engine that Chrome DevTools MCP uses. However, Chrome DevTools MCP adds performance profiling, network inspection, CrUX field data, and structured tool interfaces designed specifically for AI agents. Puppeteer requires you to write JavaScript automation scripts; Chrome DevTools MCP lets your AI agent decide what to do through natural language.

Can I use Chrome DevTools MCP for end-to-end testing?

Yes, it's well-suited for AI-driven end-to-end testing. Your AI agent can navigate pages, fill forms, click buttons, take screenshots, and verify the resulting state — all through natural language instructions. The automatic wait-for-action-results feature makes tests more reliable than traditional Selenium or Playwright scripts that often need manual wait conditions.

How does Chrome DevTools MCP handle authentication?

Use Connected Mode (--browser-url flag) to attach to a Chrome instance where you're already logged in. The MCP server connects to your existing browser session via the Chrome DevTools Protocol on port 9222, inheriting all cookies, tokens, and authenticated state. This avoids the complexity of programmatically handling login flows.

Does Chrome DevTools MCP send my code or browser data to Google?

By default, Google collects anonymous usage statistics (tool invocation rates and latency). Browser content is exposed only to your local MCP client — it is not sent to Google servers. You can fully disable usage statistics with the --no-usage-statistics flag. CrUX data fetching sends URLs to Google's CrUX API for field metrics, which can be disabled with --no-performance-crux.