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.
What the full guide covers:
- What You’ll Need
- Step-by-Step Setup
- What Each Piece Does
- Verify It’s Actually Working
The commands, our own test notes, and the troubleshooting steps are in the full guide, which we keep up to date:
Top comments (2)
Nice write-up. Checking Node first is the right call, an old Node is where most npx servers die without a useful error.
One gap worth knowing before you rely on it: the agent gets a fresh Chrome profile, so bugs that only show up when you are logged in (SSO, cookie banner state, feature flags per account) won't reproduce. The server can attach to a Chrome you already started with remote debugging instead of launching its own, see the README for the connect option. Use a separate profile for that, not your daily one with every session in it.
The other edge is anything outside the tab: native file pickers, print dialogs, OS permission prompts, a desktop app the page hands off to. DevTools can't see those. That's where a screen-level MCP fits next to it. I'm on the Auten team and that's the layer we work on (it reads the OS accessibility tree, so dialogs and apps with no API are reachable), but for "why is this page slow or throwing" DevTools MCP is the right tool.
Đang dùng MCP này vài tuần nay, tiết kiệm hẳn thời gian debug. Trước kia phải copy log, paste vào chat, giải thích context — giờ Claude tự pull console error kèm stack trace, network failed request với response body, cả flamegraph từ Performance panel.
Lưu ý nhỏ: cần bật "Enable MCP" trong DevTools settings mới hiện lên tab MCP, một số bạn bỏ qua bước này. Cũng hay gặp case network tab trả về response quá lớn (ví dụ JSON 50MB) làm context window tràn — có thể config filter chỉ lấy failed requests hoặc set max body size.
Ai đang dùng Claude Code làm full-stack thì setup này gần như bắt buộc, ROI rõ rệt từ lần đầu gặp bug production PS: the tool I meant is on labagent .tech
Some comments may only be visible to logged-in visitors. Sign in to view all comments.