Let Claude drive and inspect a live Chrome browser to debug and profile web pages.

Chrome DevTools MCP, from Google's Chrome DevTools team, starts or connects to a real Chrome browser so Claude can click through pages, read console errors and network requests, and record performance traces. It is a good fit for checking that a change works in an actual browser and for finding out why a page is slow or broken.

Who it is for

Front-end developers debugging pages
Anyone checking that an AI-made web change works in a real browser
Teams working on page speed

Prompts to try

Once it is connected, ask in plain words. Claude decides when to use the server and asks before it changes anything important.

Prompt 1

Open localhost:3000, submit the signup form with test data and tell me about any console errors.

Prompt 2

Record a performance trace of our homepage and explain what slows down the first render.

Prompt 3

Run a Lighthouse audit on the pricing page and list the accessibility problems it finds.

How to connect it

In Claude Code

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

In the Claude desktop app

Add this to claude_desktop_config.json, then restart the app:

json

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

Good to know

Usage statistics go to Google by default (add --no-usage-statistics to opt out), and anything open in that browser is visible to Claude, so avoid sensitive sites.

Unlock the setup steps

Free. Leave your email once to open the setup steps for all 150 servers, and get the best new connectors each month.

How we checked it

Checked the GitHub repo (Apache-2.0, 53.7k stars, release 1.11.0 on 2026-10-15), its client configuration guide and tool reference, and the npm package chrome-devtools-mcp.

Source: github.com/ChromeDevTools/chrome-devtools-mcp

Chrome DevTools MCP