Chrome DevTools MCP: Give Your AI Coding Agent Full Browser Control — 48,000+ GitHub Stars

If you've ever wished your AI coding assistant could actually see and interact with the web app you're building — not just generate code but debug it, profile it, and fix performance bottlenecks in real-time — Chrome DevTools MCP is exactly what you've been waiting for.

With nearly 48,000 GitHub stars and growing, this open-source project by Google's official ChromeDevTools team has become the de facto standard for bridging AI coding agents with live browser environments. It acts as a Model Context Protocol (MCP) server, exposing the full power of Chrome DevTools — from network inspection and performance traces to heap snapshots and Lighthouse audits — to your favorite AI coding tools.

In this deep dive, we'll explore what Chrome DevTools MCP can do, how to set it up in under 2 minutes, and real-world workflows that will fundamentally change how you build and debug web applications.

What Is Chrome DevTools MCP?

Chrome DevTools MCP (chrome-devtools-mcp) is a Node.js-based MCP server that connects your AI coding agent to a live Chrome browser instance. Think of it as giving your AI assistant the same superpowers that you have when you open DevTools — except the AI can process traces, analyze network waterfalls, and spot memory leaks faster than any human.

The project uses the Model Context Protocol (MCP), an open standard for connecting AI models to external tools and data sources. This means it works with virtually every major AI coding platform available today.

How It Works Under the Hood

The architecture is elegantly simple:

┌─────────────┐     MCP Protocol      ┌──────────────────┐    CDP     ┌───────────┐
│  AI Coding  │ ◄──────────────────►  │  chrome-devtools  │ ◄────────► │  Chrome   │
│   Agent     │    (stdio/SSE)        │    MCP Server     │  (Puppeteer)│  Browser  │
└─────────────┘                       └──────────────────┘            └───────────┘

1. Your AI coding agent (Claude, Cursor, Copilot, etc.) sends tool invocations via the MCP protocol
2. The chrome-devtools-mcp server translates these into Chrome DevTools Protocol (CDP) commands
3. Puppeteer executes these commands against a live Chrome instance
4. Results — screenshots, traces, network logs, performance metrics — flow back to the AI agent

40+ Tools Across 7 Categories

What makes Chrome DevTools MCP truly powerful is the breadth of its tooling. Here's the complete breakdown:

1. Input Automation (10 tools)

Your AI agent can interact with web pages just like a human user — clicking buttons, filling forms, typing text, dragging elements, and handling browser dialogs.

// Example: AI agent fills and submits a login form
// Tool: fill_form
{
  "form_fields": [
    { "selector": "#email", "value": "user@example.com" },
    { "selector": "#password", "value": "securePassword123" }
  ]
}

// Tool: click
{ "selector": "#submit-button" }

2. Navigation Automation (6 tools)

Navigate pages, open new tabs, close pages, and wait for specific conditions — giving the agent full control over the browsing session.

// Example: Navigate and wait for a specific element
// Tool: navigate_page
{ "url": "https://myapp.com/dashboard" }

// Tool: wait_for
{ "selector": ".dashboard-loaded", "timeout": 10000 }

3. Performance Profiling (3 tools)

This is where Chrome DevTools MCP really shines. Your AI agent can record performance traces, extract actionable insights, and even correlate them with real-user CrUX data.

// Step 1: Start recording a performance trace
// Tool: performance_start_trace
{ "reload": true }

// Step 2: Let the page load and interact
// Tool: navigate_page
{ "url": "https://myapp.com/heavy-page" }

// Step 3: Stop recording and get insights
// Tool: performance_stop_trace
// Returns: Actionable insights about LCP, CLS, INP, long tasks, etc.

4. Network Debugging (2 tools)

Inspect every network request — headers, response bodies, timing waterfalls — without manually sifting through the Network tab.

// Tool: list_network_requests
{ "url_filter": "/api/", "resource_type": "XHR" }

// Tool: get_network_request
{ "request_id": "12345", "include_response_body": true }

5. Debugging & Inspection (8 tools)

Take screenshots, evaluate JavaScript in the page context, run Lighthouse audits, and inspect console messages with source-mapped stack traces.

// Tool: take_screenshot
{ "full_page": true }

// Tool: lighthouse_audit
{ "categories": ["performance", "accessibility", "seo"] }

// Tool: list_console_messages
{ "level": "error" }

6. Memory Analysis (12 tools)

Perhaps the most impressive category — full heap snapshot capabilities that let your AI agent find memory leaks, compare snapshots, trace retaining paths, and identify duplicate strings.

// Take a heap snapshot before an operation
// Tool: take_heapsnapshot

// Perform some operations...

// Take another snapshot and compare
// Tool: compare_heapsnapshots
{ "base_snapshot_id": "snap1", "comparison_snapshot_id": "snap2" }

// Find objects retaining memory
// Tool: get_heapsnapshot_retainers
{ "object_id": "12345" }

7. Emulation (2 tools)

Emulate different devices, screen sizes, and network conditions to test responsive behavior.

// Tool: emulate
{ "device": "iPhone 14 Pro", "network": "3G" }

// Tool: resize_page
{ "width": 375, "height": 812 }

Setting Up Chrome DevTools MCP in Under 2 Minutes

Installation is remarkably straightforward. Here's how to add it to your favorite AI coding tool:

Universal MCP Config

Add this to your MCP client's configuration:

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

Platform-Specific Quick Setup

# Claude Code
claude mcp add chrome-devtools --scope user npx chrome-devtools-mcp@latest

# Gemini CLI
gemini mcp add -s user chrome-devtools npx chrome-devtools-mcp@latest

# Codex
codex mcp add chrome-devtools -- npx chrome-devtools-mcp@latest

# Amp
amp mcp add chrome-devtools -- npx chrome-devtools-mcp@latest

For VS Code & Cursor Users

VS Code and Cursor users get a one-click install experience:

# VS Code (macOS/Linux)
code --add-mcp '{"name":"chrome-devtools","command":"npx","args":["-y","chrome-devtools-mcp"]}'

# Or install as a Plugin (recommended for full skills support)
# Command Palette -> Chat: Install Plugin From Source -> ChromeDevTools/chrome-devtools-mcp

Slim Mode for Lightweight Use

If you only need basic browser automation without the full debugging suite:

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

Real-World Example: AI-Powered Performance Debugging Workflow

Let's walk through a realistic scenario where Chrome DevTools MCP transforms your development workflow. Imagine you're building a React dashboard that's loading slowly:

Step 1: Ask Your AI Agent to Diagnose the Problem

Prompt to your AI agent:
"The dashboard at localhost:3000/dashboard is loading slowly.
Profile the page performance and tell me what's causing the delay."

Step 2: AI Agent Records a Performance Trace

The agent automatically:

• Opens Chrome and navigates to your dashboard
• Records a performance trace during page load
• Analyzes the trace for Long Tasks, LCP, and bottleneck resources

Step 3: AI Identifies the Root Cause

AI Agent Response:
"I recorded a performance trace and found 3 issues:

1. **Long Task (847ms):** A JavaScript bundle (vendor.chunk.js) is blocking 
   the main thread for 847ms during parse/compile.
   
2. **Render-blocking CSS:** theme.css is blocking first paint by 320ms.
   Consider inlining critical CSS or using media queries.
   
3. **Large Image (2.3MB):** hero-banner.png is not optimized and delays LCP.
   Convert to WebP and add width/height attributes.

Would you like me to fix these issues?"

Step 4: AI Fixes and Verifies

The agent can then modify your code, rebuild, and run another trace to verify the improvements — all without you leaving your editor.

Key Benefits of Chrome DevTools MCP

• Unified debugging experience: Your AI agent becomes a full-stack debugging partner — not just a code generator
• Performance optimization at scale: Automated trace analysis that would take a senior engineer 30+ minutes, done in seconds
• Memory leak detection: Heap snapshot analysis that's traditionally one of the hardest debugging tasks, made accessible
• Cross-platform compatibility: Works with 20+ AI coding tools including Claude Code, Cursor, Copilot, VS Code, Windsurf, JetBrains, and more
• Zero-config setup: Single npx command, no complex installation or configuration
• Real-user data integration: Correlates lab data with CrUX field data for a complete performance picture
• Open-source and actively maintained: Backed by Google's official ChromeDevTools team with 48K+ GitHub stars
• Lighthouse integration: Run full accessibility, SEO, performance, and best practices audits directly from your AI agent

Privacy and Security Considerations

Chrome DevTools MCP is transparent about data handling:

• Usage statistics are collected by default to improve tool reliability — opt out with --no-usage-statistics
• CrUX data fetches real-user metrics from Google's API — disable with --no-performance-crux
• Browser exposure: The server gives MCP clients access to your browser instance — avoid sharing sensitive data during sessions
• Setting CI=true or CHROME_DEVTOOLS_MCP_NO_USAGE_STATISTICS=1 automatically disables telemetry

Frequently Asked Questions

What is Chrome DevTools MCP and why should I use it?

Chrome DevTools MCP is an open-source MCP server that gives AI coding agents direct access to Chrome DevTools capabilities. Instead of manually debugging in the browser, your AI assistant can record performance traces, analyze network requests, find memory leaks, and run Lighthouse audits — all through natural language prompts in your editor.

Which AI coding tools support Chrome DevTools MCP?

Chrome DevTools MCP supports over 20 platforms including Claude Code, Cursor, GitHub Copilot, VS Code, Windsurf, JetBrains AI Assistant, Gemini CLI, Amp, Codex, Cline, Kiro, Devin, and more. Any tool that supports the MCP protocol can use it.

Is Chrome DevTools MCP free to use?

Yes, Chrome DevTools MCP is completely free and open-source. It's maintained by Google's official ChromeDevTools team and published on npm. There are no usage limits, premium tiers, or licensing fees.

Can I use Chrome DevTools MCP with headless Chrome?

Yes! You can run Chrome DevTools MCP in headless mode by adding the --headless flag. Combined with --slim mode, this is perfect for CI/CD pipelines and automated testing environments where you don't need a visible browser window.

How does Chrome DevTools MCP compare to Playwright or Puppeteer for AI agents?

While Playwright and Puppeteer are browser automation libraries, Chrome DevTools MCP is specifically designed for AI agents. It provides 40+ purpose-built tools with semantic descriptions that AI models understand natively, includes performance profiling and memory analysis (which pure automation tools lack), and integrates directly with the MCP protocol so your AI agent can use it without custom code.

Does Chrome DevTools MCP work with my existing Chrome browser?

Yes, Chrome DevTools MCP officially supports Google Chrome and Chrome for Testing. It can either launch a new Chrome instance automatically or connect to an existing one via the --browser-url flag (e.g., connecting to Chrome running on port 9222).

What are the system requirements for Chrome DevTools MCP?

You need Node.js LTS version and the current stable version of Google Chrome (or newer). The MCP server itself is lightweight and runs via npx without permanent installation. It works on macOS, Linux, and Windows.

Ready to supercharge your AI coding workflow? Install Chrome DevTools MCP today with a single command and watch your AI assistant become a full-stack debugging powerhouse. For more developer tools and AI-powered workflows, explore CoddyKit's courses and level up your development skills.