Quick Prompt Co.

Chrome DevTools MCP for Claude Code: Let It Read the Console, Network, and Performance (2-Minute Setup)

By Tested in

Chrome DevTools MCP: Real browser debugging for Claude Code

Last Verified: September 2026 — commands checked against the official ChromeDevTools GitHub docs (v1.10.1)

The page is broken, and you’re the middleman: open DevTools, copy the red console error, paste it into Claude Code, go back for the failed network request, paste again, then explain the layout shift in words. Claude Code can read your source, but it’s debugging blind and guessing from whatever you remembered to copy.

Chrome DevTools MCP takes you out of that loop. It’s the official server from the Chrome DevTools team (~52k GitHub stars), and setup is one command. The agent opens a real Chrome, then reads console messages (with source-mapped stack traces), inspects network requests, records performance traces, runs Lighthouse audits, and takes heap snapshots. It then fixes the code based on what it actually saw.

Already using our Playwright MCP setup? The two are complementary. Playwright is built for driving the browser through flows. DevTools MCP is built for finding out why a page is broken or slow.

How it works

Youask in plain English
Claude Codepicks the right tool
Chrome DevTools MCPLocal (npx) · sign-in: None
Real data backConsole errors, network requests, performance traces

Measured by us · October 22, 2026

Windows 11 laptop (build 26200), Node 24.18.1. Our own script sent the two requests any MCP client makes to learn what a server offers (initialize, then tools/list) and timed the answer. No Claude Code session, no account, no API key.

What we checkedResult
Server versionChrome DevTools MCP server 1.12.0
Tools it adds32: click, close_page, drag, emulate, evaluate_script, fill, fill_form, get_console_message, and 24 more
Size of the tool definitions30.4 KB, about 7,770 tokens
Time to answer18.8 s on our first launch of the day, 6.3 s on the next one
Change since our October 3 run2 new: screencast_start, screencast_stop; definitions about 12% larger (6,927 → 7,774 tokens)

Tokens are estimated as characters ÷ 4, the same way as in our other measured posts; we didn’t run a tokenizer. This is what the server costs when it loads, not a whole session, and Claude Code’s tool search can defer MCP tool definitions until they’re needed, so treat it as the worst case.

Quick Start

One command (needs Node.js LTS and Chrome):

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

Restart Claude Code, then ask: “Check the performance of https://developers.chrome.com”. Chrome should open and record a trace. Total time: about 2 minutes.

⚡ Copy This Prompt: Let Claude Code Install and Verify It For You

Skip the manual steps below and hand the whole job to the agent instead:

You have shell access and the `claude mcp` CLI on this machine. Set up the Chrome DevTools MCP server and report back. Do not tell me it's done unless step 5 actually confirms it:

1. Check `node --version`. It needs a current Node.js LTS (20.19+ or 22.12+). If Node is missing or older, install the current LTS using whatever this machine already uses (nvm, Homebrew, winget, or the official installer from nodejs.org), then confirm `node --version` and `npx --version` work in this shell.
2. Confirm Google Chrome (stable) is installed. If it isn't, stop and tell me. Don't substitute another browser.
3. Run `claude mcp list` to see what's already configured.
4. Add the server:
   - macOS / Linux: `claude mcp add chrome-devtools --scope user npx chrome-devtools-mcp@latest`
   - Windows: `claude mcp add chrome-devtools --scope user -- cmd /c npx -y chrome-devtools-mcp@latest`
5. Run `claude mcp list` again and confirm chrome-devtools shows as Connected.

If any step fails, give me the exact error and the command that produced it. Do not skip ahead.

The agent checks Node first because an outdated Node version is the most common reason npx servers fail to start. Step 1 handles that before anything else.

Chrome DevTools MCP's repo, captured October 2026.
Chrome DevTools MCP’s repo, captured October 2026.
On this page (7 sections)
  1. Before You Add Chrome DevTools MCP
  2. Step-by-Step Setup
  3. What Each Piece Does
  4. Check Chrome DevTools MCP Is Really Connected
  5. Common Mistakes to Avoid
  6. Q&A
  7. Official Resources

Before You Add Chrome DevTools MCP

RequirementWhy You Need ItTime
Claude Code installedProvides the claude mcp command used to register the server0 min
Node.js LTS (20.19+ or 22.12+)The server runs through npx; the package requires these versions0–3 min
Google Chrome (stable)Officially supported browser. Other Chromium browsers may work but aren’t guaranteed0 min
No API keyEverything runs locally against your own Chrome0 min

Step-by-Step Setup

Prefer to do it by hand instead of delegating to the agent? Here’s the manual version.

Step 1 — Check Node.js

~1 min

node --version

You need 20.19+ or 22.12+ (or 23+). Older? Install the current LTS from nodejs.org or your version manager.

Step 2 — Add the server

~1 min

macOS / Linux. --scope user makes it available in every project:

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

Windows. The cmd /c wrapper avoids the “MCP error -32000: Connection closed” startup failure:

claude mcp add chrome-devtools --scope user -- cmd /c npx -y chrome-devtools-mcp@latest
Terminal: claude mcp add chrome-devtools --scope user npx chrome-devtools-mcp@latest; then claude mcp list
Real run, October 2026, Windows 11, Node 24. Connected means the server started; Chrome itself only opens when a browser tool runs.

Step 3 — Or install it as a plugin (MCP + skills)

~2 min

The plugin version bundles the server with extra skills. If you already added it with the CLI in Step 2, remove that first (claude mcp remove chrome-devtools). Then, inside Claude Code:

/plugin marketplace add ChromeDevTools/chrome-devtools-mcp
/plugin install chrome-devtools-mcp@chrome-devtools-plugins

Restart Claude Code and check with /skills.

Step 4 — Restart and run a first test

~1 min

Chrome doesn’t open when the server connects. It opens the first time the agent uses a browser tool. Kick it off with:

Check the performance of https://developers.chrome.com

Step 5 — Pick a browser mode (optional)

~2 min

Flags go after chrome-devtools-mcp@latest. Re-add the server with the one you want (run claude mcp remove chrome-devtools first):

Throwaway profile, wiped when the browser closes:

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

No visible window:

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

Your own running Chrome, handy for debugging pages behind a login. Needs Chrome 144+: open chrome://inspect/#remote-debugging, enable remote debugging, then:

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

Chrome shows a permission dialog the first time. Click Allow.

Browser with an inspector panel and a stethoscope, cabled to a terminal
Claude Code reads the console, network requests, and performance traces itself.

What Each Piece Does

Tool Group (on by default)What the Agent Can DoTools
DebuggingRead console messages with source-mapped stack traces, screenshots, DOM snapshots, CSS styles, run Lighthouse, evaluate JS9
NetworkList requests and inspect a single request’s headers, status, and body2
PerformanceRecord a trace and pull out actionable insights (LCP, layout shifts, long tasks)3
MemoryTake and compare heap snapshots, find retainers and duplicate strings when hunting leaks14
Input + NavigationClick, fill forms, type, upload files, open/switch tabs, wait for content16
EmulationEmulate devices/network conditions and resize the viewport2

Extensions, PWA, WebMCP, and third-party tool groups also exist but are off by default. Each needs its own flag. See the tool reference below.

FlagWhat It Does
--isolatedUses a temporary profile that’s deleted when the browser closes
--headlessRuns Chrome with no visible window
--autoConnectAttaches to the Chrome you already have open (Chrome 144+) instead of launching a new one
--slimExposes a reduced tool set for basic browser tasks
--no-usage-statisticsOpts out of Google’s usage statistics, which are on by default
--no-performance-cruxStops trace URLs being sent to the CrUX API for real-user field data

Check Chrome DevTools MCP Is Really Connected

claude mcp list
✔ chrome-devtools    Connected
! chrome-devtools    Connected, but Chrome never opens  → normal until a browser tool runs
✘ chrome-devtools    MCP error -32000: Connection closed  → Windows: use the cmd /c command

“Connected” only confirms the server started. The real test is a debugging task the agent can’t answer from your source code alone:

Open http://localhost:3000 (or [YOUR APP URL]) in Chrome. List any console errors and any network requests that returned 4xx/5xx, then tell me the most likely cause of each, citing the file and line from the stack trace.

If it comes back with real console output and request statuses (not guesses), it’s working end to end.

Common Mistakes to Avoid

  • Thinking it’s broken because Chrome didn’t open. The browser only launches when the agent calls a tool that needs it. Connecting alone never opens a window.
  • Skipping the cmd /c wrapper on Windows. Plain npx often fails to launch from inside another process on Windows. That’s the classic “Connection closed” error.
  • Installing both the CLI version and the plugin. The docs say to remove the CLI-installed server before installing the plugin, or you’ll have two copies fighting over the same browser profile.
  • Browsing sensitive accounts in the agent’s Chrome. The server exposes the browser’s content to your MCP client. With --autoConnect it can see every open window in that profile. Use --isolated when you don’t need your logins.
  • Not knowing what gets sent to Google. Usage statistics are on by default, and performance traces can send page URLs to the CrUX API. Add --no-usage-statistics and --no-performance-crux if that matters for your project.

Q&A

How is this different from Playwright MCP?

Playwright MCP is built for driving the browser through flows (click, fill, navigate) across browsers. Chrome DevTools MCP is Chrome-only but adds the DevTools side: performance traces, Lighthouse, network inspection, source-mapped console errors, and heap snapshots. Many people run both.

Is it free?

Yes. It’s open source from the Chrome DevTools team and runs locally. No API key or account needed.

Can it debug pages that need a login?

Yes. Use --autoConnect to attach to your own running Chrome (Chrome 144+, remote debugging enabled at chrome://inspect/#remote-debugging), so the agent works in your already-signed-in session.

Does it work with Edge or Brave?

Only Google Chrome and Chrome for Testing are officially supported. Other Chromium browsers may work, but that isn’t guaranteed.

How do I remove it?

claude mcp remove chrome-devtools. Its default browser profile lives in ~/.cache/chrome-devtools-mcp/ if you want to delete that too.

Official Resources

Comments

2 responses to “Chrome DevTools MCP for Claude Code: Let It Read the Console, Network, and Performance (2-Minute Setup)”

  1. How to Install Sentry MCP for Claude Code (Fix Production Errors From Your Terminal) – Quick Prompt Co.

    […] pairs well with our Chrome DevTools MCP setup. DevTools MCP catches bugs on your machine, and Sentry MCP brings in the ones your users hit in […]

  2. Stop Pasting Figma Screenshots Into Claude Code: Figma MCP Gives It Your Real Layout, Variables, and Components – Quick Prompt Co.

    […] it with our Chrome DevTools MCP guide and Claude can build the UI from Figma, then open it in a real browser to check it against the […]

More posts