Chrome DevTools MCP: Give Your AI Coding Agent Full Browser Control for Debugging and Performance Analysis

What Is Chrome DevTools MCP?

When AI coding agents help you build web applications, they often need to test, debug, and optimize what they create. Until now, that meant switching between your IDE and the browser — a context-switching tax that slows you down.

Chrome DevTools MCP solves this by exposing the full power of Chrome DevTools to your AI assistant through the Model Context Protocol (MCP). Your coding agent can now:

• Record performance traces and extract actionable insights
• Analyze network requests and responses in detail
• Capture screenshots and inspect browser console messages (with source-mapped stack traces)
• Automate browser actions reliably using Puppeteer
• Fetch real-user experience data from Chrome User Experience Report (CrUX)

Think of it as giving your AI pair programmer the same debugging superpowers you have when you open DevTools — but automated and integrated into your workflow.

How It Works

Chrome DevTools MCP runs as a lightweight Node.js server that connects to Chrome via the Chrome DevTools Protocol (CDP). It translates DevTools capabilities into MCP tools that any compatible AI agent can invoke.

Architecture

┌─────────────┐    MCP     ┌──────────────────┐    CDP     ┌─────────┐
│  AI Agent   │◄──────────►│  chrome-devtools  │◄──────────►│ Chrome  │
│ (Claude,    │            │      -mcp         │            │ Browser │
│  Cursor,    │            │   (Node.js)       │            │         │
│  Copilot)   │            └──────────────────┘            └─────────┘
└─────────────┘

Installation

Adding Chrome DevTools MCP to your setup takes less than a minute. Here's the universal MCP config:

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

Most IDEs offer one-click install:

• Claude Code: claude mcp add chrome-devtools --scope user npx chrome-devtools-mcp@latest
• Cursor: Settings → MCP → New MCP Server → paste config above
• VS Code / Copilot: code --add-mcp '{"name":"chrome-devtools","command":"npx","args":["-y","chrome-devtools-mcp"]}'
• JetBrains: Settings → Tools → AI Assistant → MCP → Add

Key Features That Make It Powerful

1. Performance Profiling with Real-User Data

Chrome DevTools MCP doesn't just run lab tests — it combines them with field data from the Chrome User Experience Report (CrUX). Your AI agent can:

• Record performance traces of your application
• Identify bottlenecks (long tasks, layout shifts, resource contention)
• Compare lab metrics against real-user experience data
• Suggest optimizations based on Core Web Vitals

// Your AI agent can now say:
"Performance trace shows a 2.3s blocking task in main.js.
Core Web Vitals field data confirms LCP is 3.1s (poor).
Recommendation: Code-split the heavy chart library
and lazy-load it after hydration."

2. Network Request Analysis

Forget manually inspecting the Network tab. Your AI agent can:

• Capture all network requests and responses
• Identify failed requests, slow endpoints, and inefficient payloads
• Analyze API response structures
• Detect CORS issues, authentication problems, or misconfigured headers

3. Console Log Inspection with Source Maps

When your app throws an error, the AI agent sees the full picture:

• Console messages with source-mapped stack traces
• Error categorization (runtime, network, CSP violations)
• Automatic correlation between errors and code locations

4. Reliable Browser Automation

Built on Puppeteer, the MCP server provides:

• Click, type, scroll, and navigate actions
• Automatic waiting for page loads and element visibility
• Screenshot capture for visual verification
• Form filling and submission

Real-World Example: Debugging a Slow Dashboard

Imagine you're building an analytics dashboard and users report it's sluggish. Here's how Chrome DevTools MCP helps:

You: "The dashboard at localhost:3000/dashboard is loading slowly.
     Can you investigate?"

AI Agent: (invokes chrome-devtools-mcp tools)
1. Opens the page and records a performance trace
2. Analyzes network requests
3. Checks console for errors

AI Agent response:
"I found three issues:

1. **Performance bottleneck**: main.js has a 1.8s blocking task
   during initial render. The chart library (chart.js) is 420KB
   and loads synchronously.

2. **Network waterfall**: 14 sequential API calls to /api/metrics
   could be parallelized. Total wait: 3.2s.

3. **Console warning**: 'Deprecated API: /api/v1/stats will be
   removed in v2.0' appears 47 times.

Recommendations:
- Lazy-load chart.js with dynamic import()
- Batch the 14 API calls into a single /api/metrics/batch request
- Migrate to /api/v2/stats endpoint"

Key Benefits

• Zero context switching: Debug and optimize without leaving your IDE
• Automated performance analysis: AI identifies bottlenecks you might miss
• Real-user data integration: CrUX field data alongside lab metrics
• Reliable automation: Puppeteer-based actions with automatic waits
• Universal compatibility: Works with Claude Code, Cursor, Copilot, VS Code, JetBrains, Gemini CLI, and more
• Open source and free: MIT-licensed, maintained by the Google Chrome DevTools team
• Privacy controls: Opt out of usage statistics with --no-usage-statistics

When to Use Chrome DevTools MCP

Frequently Asked Questions

Is Chrome DevTools MCP free?

Yes, it's completely free and open source under the MIT license. You can use it with any compatible AI coding agent without restrictions.

Which AI coding agents support Chrome DevTools MCP?

It works with any MCP-compatible agent: Claude Code, Cursor, GitHub Copilot, VS Code, JetBrains AI Assistant, Gemini CLI, Codex, Amp, Cline, and many more. One-click installers are available for most IDEs.

Does it work with browsers other than Chrome?

Chrome DevTools MCP officially supports Google Chrome and Chrome for Testing. Other Chromium-based browsers (Edge, Brave, Arc) may work but are not officially supported.

Can I use it in headless mode?

Yes, pass the --headless flag to run Chrome without a visible window. For basic browser tasks only, use --slim mode to reduce the tool surface area.

Is my data sent to Google?

By default, Google collects anonymous usage statistics (tool invocation success rates, latency) to improve the tool. You can opt out with the --no-usage-statistics flag. Performance tools may fetch CrUX data from Google's API unless you disable it with --no-performance-crux.

How is this different from Puppeteer or Playwright?

Puppeteer and Playwright are browser automation libraries. Chrome DevTools MCP wraps Puppeteer and adds performance profiling, network analysis, console inspection, and CrUX integration — all exposed as MCP tools your AI agent can use directly.

Can I connect to an already-running Chrome instance?

Yes, use the --browser-url=http://127.0.0.1:9222 flag to connect to Chrome running with remote debugging enabled. This is useful when your IDE (like Antigravity) manages its own browser instance.