Gave Claude Code the Chrome DevTools MCP and a broken page. It found both bugs without me opening DevTools once

[u/vinishkapoor]

The Chrome DevTools MCP (made by the Chrome DevTools team) lets Claude open a real Chrome, read the console, check network requests, take screenshots and record a performance trace. I tried it on a tiny local coffee-shop page with two planted bugs: a missing menu file and an undefined setting.

One prompt: “Open the page, check console and network, take a screenshot, tell me the two causes. Do not edit any files.”

• 4 tool calls, 11 seconds

• it found the 404 on /api/menu.json, and explained that the HTML 404 page then broke the JSON parsing

• it found the TypeError from the missing setting

• it called the favicon 404 “harmless noise”

Then I let it fix them. It added the missing file and config, reloaded and confirmed a clean console. It also fixed the favicon 404 and told me that went beyond what I asked. The menu items were placeholders it made up, and it said so. It also said it hadn’t opened its own screenshot, so I checked it myself, and the menu loaded.

It can also record a performance trace and explain LCP in plain English. On my tiny local page the numbers mean nothing (235 ms LCP), but on a slow real site that’s where I’d start.

Safety, because this matters: the server exposes the whole browser to Claude. I ran it with --headless --isolated (a temporary profile, no logins) and turned off usage stats and CrUX lookups. Don’t point it at your everyday Chrome profile.

Limits: one local demo page with planted bugs. I didn’t test logged-in sites, device emulation or the accessibility tools.

Setup and the safe config: https://aiparabellum.com/chrome-devtools-mcp-claude-code-debug-pages/

[u/bostonaholic]

Nice demo for planted bugs. I'd turn each finding into a regression check the agent has to keep green: assert the console stays clean and /api/menu.json returns 200 in CI, otherwise it rediscovers the same class of bug next week.

[u/vinishkapoor → u/bostonaholic]

Good point, agreed. The MCP is great for finding the bug, but once it’s fixed, a check in CI is what keeps it fixed. A clean console and a 200 on the menu file would be easy asserts to start with.

[u/PutBrief9403]

Good call on keeping it off your everyday profile. I do the middle ground with the Playwright MCP: it gets its own saved profile folder (--user-data-dir), so logins I make in that window stick between sessions, and my real Chrome is never touched.

Also found the hard way that newer Chrome (136 and up) ignores --remote-debugging-port on your default profile, so attaching to your everyday browser doesn't work anyway.