Chrome DevTools MCP — Browser Debugging for AI Agents

What it is

Chrome DevTools MCP is a Model Context Protocol server that lets AI coding agents control and inspect a live Chrome browser. With 29 built-in tools, it provides reliable browser automation via Puppeteer, advanced network debugging, console analysis, and performance tracing.

It is built for developers who need AI-assisted browser testing, debugging, and performance analysis. It works with Claude Code, Cursor, Copilot, VS Code, and 15+ other AI tools.

How it saves time or tokens

Instead of manually switching between your editor and browser DevTools, your AI agent can inspect the DOM, read console errors, capture screenshots, and trace network requests directly. The --slim flag reduces the tool count for token-constrained contexts, and --headless mode runs without a visible browser window for CI pipelines.

How to use

1. Add the MCP server config to your .mcp.json
2. Restart your AI tool (Claude Code, Cursor, etc.)
3. Ask your agent to navigate, click, inspect, or debug in the browser

Example

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

For lightweight usage with fewer tools and less token consumption:

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

Once configured, your agent can run commands like:

'Navigate to localhost:3000 and check if there are any console errors'
'Take a screenshot of the login page'
'Run a Lighthouse audit on the homepage'

Related on TokRepo

• MCP Chrome Integration -- Deep dive into Chrome MCP capabilities
• AI Tools for Browser Automation -- Browser automation tools for AI agents

Common pitfalls

• The MCP server launches its own Chrome instance; if you have multiple instances running, port conflicts can occur
• The --slim flag is recommended for most use cases to avoid overwhelming the agent with 29 tools when only a few are needed
• Headless mode does not support visual debugging; use headed mode when you need to see what the browser is doing