Chrome DevTools MCP Complete Guide: Let Your AI Coding Agent Control the Browser

Chrome DevTools for agents — enabling AI coding agents to inspect, debug, and optimize web pages just like real developers do with Chrome DevTools.

One of the hottest projects on GitHub in the first half of 2026 is ChromeDevTools/chrome-devtools-mcp (45k+ stars). Its mission is straightforward: let your AI coding agent (Claude Code, Cursor, Copilot, Codex, etc.) directly control a real Chrome browser instance.

This is not a simple Puppeteer script wrapper. Through the MCP (Model Context Protocol), it exposes the full power of DevTools to AI agents — letting them inspect the DOM, analyze network requests, take screenshots, check console logs, and even pull performance trace data.

This guide will walk you through what the project is, why it matters, how to set it up, and practical use cases from scratch.

What Is Chrome DevTools MCP?

Chrome DevTools MCP is an official MCP (Model Context Protocol) server published by the Google Chrome team. It bridges the gap between AI coding agents and the Chrome browser.

Core Capabilities

Why Do You Need It?

Before this project, AI coding agents mainly relied on two approaches to interact with browsers:

1. Puppeteer/Playwright scripts: Requires manually writing automation code. AI-generated scripts often fail due to async timing issues.
2. Direct Chrome DevTools Protocol (CDP) connections: The protocol is complex, and agents need to "understand" dozens of low-level APIs.

Chrome DevTools MCP wraps all advanced DevTools features into MCP tools. AI agents can simply call high-level tools to get things done, dramatically improving reliability and efficiency.

Prerequisites

Make sure the following environment is ready before installing:

# 1. Node.js LTS version (v20 or v22)
node -v  # recommended ≥ v20.0.0
npm -v   # recommended ≥ v10.0.0

# 2. Chrome browser (current stable release or newer)
google-chrome --version

# 3. An MCP-compatible AI coding agent
#    Claude Code / Cursor / Copilot / Codex, etc.

Installation & Configuration

Basic Installation

Chrome DevTools MCP is distributed via npm — a single command to install:

# Install globally
npm install -g chrome-devtools-mcp

Claude Code Configuration

Two ways to integrate with Claude Code:

Option 1: CLI install (MCP tools only)

claude mcp add chrome-devtools --scope user npx chrome-devtools-mcp@latest

Option 2: Install as a plugin (MCP + Skills)

# Add the plugin marketplace registry
/plugin marketplace add ChromeDevTools/chrome-devtools-mcp

# Install the plugin
/plugin install chrome-devtools-mcp@chrome-devtools-plugins

# Restart Claude Code, then verify via /skills that it loaded successfully

💡 Tip: If your corporate firewall blocks plugin cloning (Failed to clone repository), fall back to the CLI method or check the official troubleshooting guide.

Cursor / VS Code Copilot Configuration

Add this to your MCP configuration file:

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

You can also add it quickly via the VS Code command line:

# macOS / Linux
code --add-mcp '{"name":"io.github.ChromeDevTools/chrome-devtools-mcp","command":"npx","args":["-y","chrome-devtools-mcp"],"env":{}}'

# Windows PowerShell
code --add-mcp '{"""name""":"""io.github.ChromeDevTools/chrome-devtools-mcp""","""command""":"""npx""","""args""":["""-y""","""chrome-devtools-mcp"""]}'

OpenAI Codex Configuration

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

Windows 11 users need extra environment variable and timeout configuration:

# .codex/config.toml
[mcp_servers.chrome-devtools]
command = "cmd"
args = ["/c", "npx", "-y", "chrome-devtools-mcp@latest"]
env = { SystemRoot="C:\\Windows", PROGRAMFILES="C:\\Program Files" }
startup_timeout_ms = 20_000

Slim Mode

If you only need basic browser operations, use --slim mode to reduce resource consumption:

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

Real-World Scenarios

Scenario 1: AI Agent Debugging a Web Page

Once configured, you can simply tell your AI agent to open and analyze a page:

You: Open https://dashen-tech.com and check how the homepage loads. Any performance issues?

The AI agent will: 1. Open the page via Puppeteer 2. Take a screenshot to confirm the page loaded correctly 3. Analyze the Network panel to check resource loading 4. Read console output to spot JS errors 5. Record a Trace to analyze Core Web Vitals

Scenario 2: E2E Test Automation

Previously, writing E2E tests meant hand-crafting Puppeteer scripts. Now just describe your test intent to the AI agent:

You: Write a test case for me:
1. Open the login page
2. Enter username and password
3. Click the login button
4. Verify redirect to the dashboard
5. Check for any error logs

The AI agent will automatically execute these steps and verify each result through DevTools.

Scenario 3: Performance Analysis & Optimization

This is one of the most powerful use cases for Chrome DevTools MCP:

You: Analyze the performance of https://example.com and find the biggest bottleneck.

The AI agent will: 1. Record a Performance Trace 2. Analyze Long Tasks, Layout Shifts, FCP, LCP, and other metrics 3. Check CrUX real-user data 4. Provide concrete optimization recommendations

Scenario 4: Cross-Browser Compatibility Checks

You: Open this page and check the console for any compatibility warnings,
and look at the Network panel for any failed requests.

The AI agent can simultaneously check: - Warnings and errors in the Console - Network request status codes and response times - Whether the page renders correctly

Advanced Configuration

Opt Out of Data Collection

Chrome DevTools MCP collects usage statistics by default. You can disable it:

# Option 1: Startup flag
npx chrome-devtools-mcp@latest --no-usage-statistics

# Option 2: Environment variable
export CHROME_DEVTOOLS_MCP_NO_USAGE_STATISTICS=1

# Option 3: Automatic in CI (disables when CI env variable is present)

Disable CrUX Data

The performance tool sends trace URLs to the Google CrUX API for real-user data by default:

npx chrome-devtools-mcp@latest --no-performance-crux

Disable Update Checks

export CHROME_DEVTOOLS_MCP_NO_UPDATE_CHECKS=1

Connect to an Existing Browser Instance

If you want Chrome DevTools MCP to connect to an already-running browser (instead of launching a new one), specify --browser-url:

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

Note: In this mode, the browser instance is not auto-started. You need to manually launch Chrome with remote debugging enabled first (--remote-debugging-port=9222).

Supported AI Coding Agents

Chrome DevTools MCP supports all major AI coding agents currently available:

Summary

Chrome DevTools MCP is a milestone project for the AI coding agent era. It lets AI move beyond just "reading code" to actually operating a browser, analyzing the network, and debugging performance — working just like a real developer.

For a tech blog like dashen-tech.com, this means:

• ✅ More reliable E2E testing: AI agents can automatically verify article pages load correctly
• ✅ Automated performance monitoring: Periodically record traces and track Core Web Vitals changes
• ✅ Faster issue triage: Directly inspect rendering problems, JS errors, and failed resource loads in the browser

GitHub: ChromeDevTools/chrome-devtools-mcp Stars: 45k+ (July 2026) License: Apache-2.0 Tech Stack: TypeScript + Puppeteer + Chrome DevTools Protocol

If you're interested in browser automation for AI coding agents, you might also want to check out our previous articles: Tabby Terminal Complete Guide and Terminal Emulator Comparison 2026.