Chrome DevTools MCP verbindet Claude Code mit echtem Chrome

Posted on Oct 25 • Originally published at netraptor.dev • AI-assisted

TL;DR: Chrome DevTools MCP is the Chrome DevTools team's open-source MCP server. It lets Claude Code, Cursor, Codex or Gemini CLI drive a real Chrome and use DevTools features: network requests, console, screenshots, performance traces, Lighthouse and heap snapshots. Install it with claude mcp add chrome-devtools --scope user -- npx chrome-devtools-mcp@latest. Add --autoConnect (Chrome 144+) to let it attach to the Chrome you're already signed in to. It's great for debugging the page in front of it. It's a poor fit for "map this app's whole API".

My agent kept writing frontend fixes it couldn't check. With a browser MCP server it opens the page, reads the console, looks at the failing request and tells me what broke. The Chrome team shipped this as a public preview in September 2025, and it now has around 60 tools (some behind opt-in flags).

You need Node.js LTS and current stable Chrome.

/plugin marketplace add ChromeDevTools/chrome-devtools-mcp /plugin install chrome-devtools-mcp@chrome-devtools-plugins Enter fullscreen mode Exit fullscreen mode Cursor (Settings → MCP → New MCP Server) and most other clients:

{ "mcpServers": { "chrome-devtools": { "command": "npx", "args": [ "-y", "chrome-devtools-mcp@latest" ] } } } Enter fullscreen mode Exit fullscreen mode Codex / Gemini CLI

codex mcp add chrome-devtools -- npx chrome-devtools-mcp@latest gemini mcp add chrome-devtools npx chrome-devtools-mcp@latest Enter fullscreen mode Exit fullscreen mode First prompt to try: Check the performance of https://developer.chrome.com. You'll see a Chrome window open and a trace get recorded.

The trick I like most: call get_network_request with no reqid and it returns whatever request you have selected in the DevTools Network panel. I click the broken call, then type "why did this 403?".

If headers carry tokens you'd rather not send to a model, start the server with --redactNetworkHeaders.

By default the server launches Chrome with its own profile in ~/.cache/chrome-devtools-mcp/chrome-profile. --isolated uses a throwaway profile instead. To debug something behind your real login:

"args": [ "-y", "chrome-devtools-mcp@latest", "--autoConnect" ] Enter fullscreen mode Exit fullscreen mode Approve the permission dialog Chrome shows each time the server connects. A "Chrome is being controlled by automated test software" banner stays up while it's attached. No --autoConnect (sandboxes, older Chrome)? Start Chrome yourself and point the server at it:

Playwright MCP ( claude mcp add playwright npx @playwright/mcp@latest ) overlaps a lot. How I pick:

User flows and cross-browser checks: Playwright. "Why is this page slow or erroring in Chrome": DevTools MCP. Playwright's README also notes that coding agents may get on better with its CLI + skills, since those calls cost fewer tokens than MCP.

Both servers only see what the browser loads while the agent is connected. When I want the agent to understand the whole API of an app, that hurts:

The full guide, with links to every doc above, is at netraptor.dev/guides/chrome-devtools-mcp.