Chrome DevTools MCP

Overview

Chrome DevTools MCP brings the full power of Chrome DevTools to AI coding agents. Built by the Chrome DevTools team at Google, it lets agents inspect the DOM, debug JavaScript, capture performance profiles, analyze network traffic, and take screenshots — all through natural language. With 33k+ stars, it’s one of the most popular MCP servers.

How It Works

1. Install the MCP server — npm install
2. Connect to Chrome — Server connects via CDP
3. Add to client — Configure in Claude Desktop or Cursor
4. Debug naturally — “Why is this element not visible?” or “Profile the page load”

Use Cases

• Visual debugging — AI inspects DOM for layout and CSS issues
• Performance optimization — Automated Lighthouse audits
• Accessibility testing — AI-driven a11y audits with fix suggestions
• Network analysis — Identify slow requests and failed API calls
• Console monitoring — Track JavaScript errors in real-time

Getting Started

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

Example

User: "The login button isn't working. Debug it."

Agent → Chrome DevTools MCP:
  - navigate("http://localhost:3000/login")
  - evaluate("document.querySelector('#login-btn').onclick") → null
  
Agent: "The login button has no click handler. Your selector '.login-button' 
doesn't match the HTML id='login-btn'. Fix the selector in app.js line 42."

Alternatives

• Browser Use — Full browser control for AI agents
• MCP Chrome Extension — Chrome extension-based MCP
• Playwright MCP — Browser automation and testing via MCP