▌BestMCPTools.org
Chrome DevTools MCP logo

Chrome DevTools MCP

Google's official MCP server that gives AI agents a live Chrome DevTools session.

Browser AutomationOpen SourceClaude CodeCursorGemini CLICodexEasy
Visit Tool52,672 stars

Last verified: September 20, 2026

Own Chrome DevTools MCP? Boost it to the top.✦ Upgrade to Featured

Maintenance status

Active
Last code update: September 27, 2026License: Apache-2.0Checked September 28, 2026

How to Install Chrome DevTools MCP

$npx -y chrome-devtools-mcp@latest

Requires Claude Desktop, Cursor, Windsurf, or another MCP-compatible client.

Setup by client

Claude Desktop (claude_desktop_config.json)

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

Cursor (~/.cursor/mcp.json)

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

VS Code (.vscode/mcp.json)

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

Claude Code (terminal)

claude mcp add chrome-devtools-mcp -- npx -y chrome-devtools-mcp@latest

Add any API keys or environment variables the server's README lists.

About Chrome DevTools MCP

Chrome DevTools MCP is Google's official server connecting AI coding agents to a real Chrome browser over the DevTools Protocol. It exposes performance tracing, network request inspection, console messages with source-mapped stack traces, and screenshots as MCP tools. This turns "the page is slow" or "something is failing in prod" into something an agent can actually investigate rather than guess at. For scripted clicks and form filling across browsers, the Playwright MCP setup is the natural complement.

Requirements: Node.js v20.19+ (or newer maintenance LTS) and current stable Chrome or newer.

Client-specific installs: - Claude Code: claude mcp add chrome-devtools --scope user npx chrome-devtools-mcp@latest - Gemini CLI: gemini mcp add chrome-devtools npx chrome-devtools-mcp@latest - Codex: codex mcp add chrome-devtools -- npx chrome-devtools-mcp@latest

Key Features

  • browser
  • debugging
  • performance
  • chrome
  • official

Pricing

Open Source: from Free (open source)

Pros & Cons

Pros

  • Reaches sites that don't expose APIs
  • Self-healing test flows
  • Strong selectors paired with LLM context

Cons

  • Slower than direct API calls
  • Brittle against aggressive bot protection
  • Per-session state can leak without isolation

Best For

  • End-to-end testing
  • Scraping rendered pages
  • Form-heavy workflows
  • Dashboard data extraction

Our Take on Chrome DevTools MCP

If your agent works on front-end code, this is close to essential. It is the difference between an agent reasoning about a page and an agent actually measuring it. Being Google-maintained means it tracks Chrome releases properly, which third-party browser servers frequently do not.

Frequently Asked Questions

Tags

#Browser Automation#browser#debugging#performance#chrome#official