Quick Prompt Co.

Stop Pasting Console Errors Into Claude Code: Chrome DevTools MCP Lets It Read the Console, Network, and Performance Itself (2-Minute Setup)

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.

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.

What You’ll Need

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

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.

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

Verify It’s Actually Working

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

One response to “Stop Pasting Console Errors Into Claude Code: Chrome DevTools MCP Lets It Read the Console, Network, and Performance Itself (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 […]

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

More posts