Chrome DevTools MCP: Browser Automation for Coding Agents — 46K+ Stars

{{< resource-info >}}

Coding agents like Claude Code, Cursor, and Copilot can write code, run tests, and debug errors — but they cannot see what your website looks like in a real browser. They can read HTML source, but they cannot perceive layout, styling, animations, or runtime behavior. They can check console logs, but they cannot interact with the page as a user would.

Chrome DevTools MCP bridges this gap. It is an official Google Chrome project that exposes the full power of Chrome DevTools Protocol (CDP) to AI coding agents via the Model Context Protocol (MCP). Suddenly, your coding agent can take screenshots, analyze performance, inspect network requests, debug console errors, and automate browser interactions — all through a standardized protocol.

What Is Chrome DevTools MCP? #

Chrome DevTools MCP (chrome-devtools-mcp) is an MCP server that gives AI coding agents access to Chrome DevTools. It is maintained by the Chrome DevTools team at Google and released under the Apache-2.0 license.

The project has two components:

1. MCP Server — Connects your coding agent to a live Chrome browser via CDP
2. CLI — Standalone command-line tool for browser automation without MCP

With this, your coding agent can:

• See your website through screenshots
• Measure its performance through traces and metrics
• Debug network issues through request/response inspection
• Interact with the page through automated clicks, typing, and navigation
• Inspect the DOM and CSS in real time

Key Features #

Screenshot Capture #

Take full-page or viewport screenshots of any webpage. Your coding agent can use this to visually verify that its CSS changes, component updates, or layout adjustments look correct — without you needing to open the browser yourself.

Agent: "Let me take a screenshot to verify the layout."
→ chrome-devtools-mcp captures screenshot
→ Agent sees the rendered page
→ Agent adjusts CSS if needed

Performance Analysis #

Record performance traces and extract actionable insights:

• Core Web Vitals — LCP, FID, CLS measurements
• Network waterfall — Request timing and dependency chains
• JavaScript profiling — Function execution times and call stacks
• Frame rate analysis — Jank detection and FPS drops

Network Inspection #

Analyze every network request and response:

• Request headers, response codes, timing
• Payload sizes and compression ratios
• Failed requests and CORS errors
• Service worker activity

Console Debugging #

Read browser console messages with source-mapped stack traces:

• JavaScript errors with file and line numbers
• Console.log output from your application
• Warning messages about deprecated APIs
• Custom console messages from your code

DOM and CSS Inspection #

Query and manipulate the DOM:

• Select elements by selector, text, or role
• Read and modify CSS properties
• Check computed styles and layout dimensions
• Evaluate JavaScript in the page context

Browser Automation #

Automate user interactions:

• Click buttons and links
• Fill forms and submit data
• Navigate to URLs
• Handle dialogs and prompts
• Scroll and interact with dynamic content

Architecture #

Chrome DevTools MCP connects to a live Chrome browser via the Chrome DevTools Protocol:

┌──────────────────────────────────────────────┐
│              AI Coding Agent                 │
│  (Claude Code / Cursor / Copilot / etc.)     │
└──────────────────┬───────────────────────────┘
                   │ MCP Protocol (JSON-RPC)
                   ▼
┌──────────────────────────────────────────────┐
│         chrome-devtools-mcp Server           │
│                                              │
│  ┌────────────┐ ┌──────────┐ ┌────────────┐ │
│  │ Screenshots│ │ Network  │ │ Performance│ │
│  │   Tool     │ │ Tool     │ │   Tool     │ │
│  └────────────┘ └──────────┘ └────────────┘ │
│  ┌────────────┐ ┌──────────┐ ┌────────────┐ │
│  │  Console   │ │   DOM    │ │  Actions   │ │
│  │   Tool     │ │  Tool    │ │  Tool      │ │
│  └────────────┘ └──────────┘ └────────────┘ │
└──────────────────┬───────────────────────────┘
                   │ CDP (WebSocket)
                   ▼
┌──────────────────────────────────────────────┐
│              Live Chrome Browser             │
│                                              │
│  ┌──────────────────────────────────────┐    │
│  │         Your Web Application          │    │
│  └──────────────────────────────────────┘    │
└──────────────────────────────────────────────┘

Installation #

As an MCP Server #

# Install the MCP server
npm install -g chrome-devtools-mcp

# Start the MCP server
chrome-devtools-mcp server

Your coding agent connects to the MCP server and gains access to all DevTools tools.

As a CLI Tool #

# Install the CLI
npm install -g chrome-devtools-mcp

# Take a screenshot
chrome-devtools-mcp screenshot --url https://example.com --output screenshot.png

# Record performance trace
chrome-devtools-mcp performance --url https://example.com --output trace.json

# Get console messages
chrome-devtools-mcp console --url https://example.com

Launching Chrome with Debugging Enabled #

For the MCP server to connect to Chrome, you need to launch Chrome with remote debugging enabled:

# macOS
/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome \
  --remote-debugging-port=9222 \
  --new-window

# Linux
google-chrome --remote-debugging-port=9222 --new-window

# Windows
"C:\Program Files\Google\Chrome\Application\chrome.exe" ^
  --remote-debugging-port=9222

Or use the CLI’s auto-launch feature:

chrome-devtools-mcp server --auto-launch-chrome

This automatically launches a new Chrome instance with the correct debugging flags.

Tool Reference #

screenshot #

Capture a screenshot of the current page or a specific element.

# Full page screenshot
chrome-devtools-mcp screenshot --full-page

# Viewport screenshot
chrome-devtools-mcp screenshot --viewport

# Specific element
chrome-devtools-mcp screenshot --selector ".hero-section"

network #

Analyze network requests and responses.

# List all requests
chrome-devtools-mcp network --list

# Filter by status code
chrome-devtools-mcp network --filter status=404

# Inspect a specific request
chrome-devtools-mcp network --inspect url=https://api.example.com/data

performance #

Record and analyze performance traces.

# Record a 30-second trace
chrome-devtools-mcp performance --duration 30

# Analyze Core Web Vitals
chrome-devtools-mcp performance --cwv

# Profile JavaScript execution
chrome-devtools-mcp performance --cpu

console #

Read browser console messages.

# Get all messages
chrome-devtools-mcp console --all

# Filter errors only
chrome-devtools-mcp console --level error

# Clear console
chrome-devtools-mcp console --clear

dom #

Query and manipulate the DOM.

# Select an element
chrome-devtools-mcp dom --query "button.submit"

# Read inner text
chrome-devtools-mcp dom --text "#main-heading"

# Modify CSS
chrome-devtools-mcp dom --style "#hero { background: blue; }"

# Evaluate JavaScript
chrome-devtools-mcp dom --eval "document.title"

action #

Automate browser interactions.

# Navigate to a URL
chrome-devtools-mcp action --navigate https://example.com

# Click an element
chrome-devtools-mcp action --click "button.login"

# Fill a form
chrome-devtools-mcp action --fill "#email" "user@example.com"
chrome-devtools-mcp action --fill "#password" "secret123"
chrome-devtools-mcp action --click "button.submit"

Integration with Coding Agents #

Claude Code #

# In your MCP configuration (~/.claude/settings.json)
{
  "mcpServers": {
    "chrome-devtools": {
      "command": "chrome-devtools-mcp",
      "args": ["server"]
    }
  }
}

Claude Code can now use all DevTools tools to inspect and debug your web applications.

Cursor #

Settings → Features → MCP Servers → Add Server
Command: chrome-devtools-mcp
Args: server

Copilot (VS Code) #

// .vscode/mcp_servers.json
{
  "servers": {
    "chrome-devtools": {
      "command": "chrome-devtools-mcp",
      "args": ["server"]
    }
  }
}

Real-World Use Cases #

1. Visual Regression Testing #

Your coding agent makes CSS changes and immediately verifies them:

Agent: "I changed the button border radius to 8px. Let me verify..."
→ Takes screenshot
→ Compares with baseline
→ Reports: "Border radius applied correctly. No visual regressions detected."

2. Performance Optimization #

Agent: "The page load time seems slow. Let me profile it..."
→ Records performance trace
→ Identifies: "LCP is 4.2s, dominated by unoptimized hero image (2.1s)"
→ Fixes: "Reduced image size and added lazy loading"
→ Verifies: "LCP improved to 1.8s"

3. Debugging Console Errors #

Agent: "Users are reporting a JavaScript error. Let me check the console..."
→ Reads console messages
→ Finds: "Uncaught TypeError: Cannot read property 'map' of undefined at Line 42"
→ Fixes: "Added null check before calling .map()"
→ Verifies: "Console is clean after fix"

4. API Integration Testing #

Agent: "Let me verify the API integration is working..."
→ Inspects network requests
→ Finds: "POST /api/login returns 401 — missing Authorization header"
→ Fixes: "Added bearer token to request headers"
→ Verifies: "Login returns 200 with user data"

5. Form Automation #

Agent: "Let me test the registration form end-to-end..."
→ Navigates to /register
→ Fills in name, email, password
→ Clicks submit
→ Checks for success message
→ Reports: "Registration flow works. Success message displayed."

Comparison with Alternatives #

Chrome DevTools MCP vs Puppeteer #

Chrome DevTools MCP is purpose-built for AI agents. Puppeteer is a general-purpose browser automation library that requires manual integration for agent use.

Chrome DevTools MCP vs Playwright #

Playwright is more versatile for cross-browser testing. Chrome DevTools MCP is simpler and more AI-native for Chrome-specific debugging.

Chrome DevTools MCP vs Selenium #

Chrome DevTools MCP provides deeper browser insights than Selenium. Selenium is better for cross-browser E2E testing; Chrome DevTools MCP is better for debugging and development.

Security Considerations #

Disclaimer from the Chrome Team #

The project explicitly warns:

chrome-devtools-mcp exposes content of the browser instance to the MCP clients, allowing them to inspect, debug, and modify any data in the browser or DevTools. Avoid sharing sensitive or personal information that you don’t want to share with MCP clients.

Best Practices #

1. Use a dedicated browser profile — Do not use your personal browsing profile with MCP enabled
2. Avoid sensitive logins — Do not have banking, email, or other sensitive sessions open in the debuggable browser
3. Isolate the debugging port — Only bind to localhost (--remote-debugging-port=9222) to prevent external access
4. Review agent behavior — Monitor what your coding agent does with browser access, especially in automated workflows

Limitations #

Chrome Only #

chrome-devtools-mcp officially supports Google Chrome and Chrome for Testing only. Other Chromium-based browsers (Edge, Brave, Arc) may work but are not guaranteed. Firefox and Safari are not supported.

Live Browser Required #

The MCP server requires a live Chrome browser instance with remote debugging enabled. It cannot analyze static HTML files or headless screenshots without a running browser.

Single Browser Instance #

The MCP server connects to one Chrome instance. For multi-browser testing (Chrome + Firefox), you would need separate MCP servers or tools like Playwright.

No Page Modification Guarantees #

While the agent can modify DOM and CSS, there are no guarantees about how the page will respond. Some sites use Shadow DOM, iframes, or aggressive CSP headers that may limit what the agent can do.

Editor’s Take #

Chrome DevTools MCP is a significant step forward in making AI coding agents visually aware. Until this tool existed, coding agents were effectively blind to how their changes looked in a real browser. They could read HTML and CSS source code, but they could not see the rendered result.

This is like a human designer who can read CSS specifications but cannot look at a webpage. They might write perfect code on paper, but they have no way to verify that it actually produces the intended visual result.

Chrome DevTools MCP changes this by giving agents the equivalent of eyes. Through screenshots, they can see layout. Through performance traces, they can measure speed. Through network inspection, they can debug API issues. Through console access, they can read error messages. Through DOM queries, they can inspect the page structure.

The fact that this is an official Google Chrome project gives it credibility and ensures long-term maintenance. The Chrome DevTools Protocol is the gold standard for browser debugging, and exposing it via MCP makes it accessible to every AI coding agent that supports the protocol.

For web developers using AI coding agents, this is a must-have tool. It closes the feedback loop between writing code and seeing its visual result, dramatically improving the agent’s ability to produce correct, polished web applications.

FAQ #

Q: Does chrome-devtools-mcp work with headless Chrome? #

A: Yes. You can launch Chrome in headless mode (--headless=new) and chrome-devtools-mcp will still connect via CDP. However, some features like screenshots may behave differently in headless mode.

Q: Can I use this with non-Chrome browsers? #

A: Not officially. The project supports Google Chrome and Chrome for Testing. Other Chromium-based browsers may work but are not guaranteed. Firefox and Safari require different debugging protocols.

Q: How does this affect browser performance? #

A: Enabling remote debugging has minimal performance impact. The browser runs normally; the debugging port simply exposes additional diagnostic information. Expect < 5% overhead in most cases.

Q: Can multiple agents share the same browser instance? #

A: Yes. The MCP server manages the browser connection, and multiple MCP clients can connect simultaneously. Each client gets its own session for actions like navigation and DOM manipulation.

Q: Is there a way to automate the entire browser setup? #

A: Yes. Use the --auto-launch-chrome flag when starting the MCP server. This automatically launches Chrome with the correct debugging flags and connects the server.

Q: Can chrome-devtools-mcp take screenshots of local files? #

A: Yes. Navigate to file:///path/to/your/index.html and take screenshots or analyze the page. This is useful for testing local development servers and static sites.

More from Dibi8 #

• OmniRoute: Free AI Gateway with 237 Providers
• herdr: Terminal Agent Multiplexer for Coding Agents
• Orca: Parallel Agent Orchestration by StableAI
• Meetily: Privacy-First AI Meeting Assistant

Sources #

• chrome-devtools-mcp GitHub Repository
• npm Package
• Tool Reference Documentation
• Changelog

Published: July 07, 2026 | Last updated: July 07, 2026 | Stars: 46,034 | License: Apache-2.0