Loading video...
Video Failed to Load
How to add Chrome DevTools MCP to Claude Code (Bookmark this post to follow the setup later) This lets Claude debug your web apps in a real browser... performance traces, network inspection, console errors. Requirements: - Node.js 22+ - Chrome browser In the video below I show you: -... show more
52,510 views • 1 year ago •via X (Twitter)
15 Comments
Installation command: npx claude-code-templates@latest --mcp=devtools/chrome-devtools --yes Example prompt I use in the video: "Run a performance trace on and suggest ways to make it load faster" Claude Code detects the MCP, launches Chrome in debug mode, and analyzes the page automatically. Other useful prompts: - "Why are images not loading on localhost:8080?" - "Check what's wrong with the layout on this page" - "Verify my fix works in the browser" More details:
This is gold. Debugging with Claude in a real browser? Game changer for web devs.
Ive been loving Chrome Devtools mcp. Of course it eats up tokens like pacman, but it’s a huge timesaver.
Integrating real browser tools definitely takes debugging to another level. Excited to see how this shifts development workflows!
Huge unlock. Claude + real DevTools is the dream duo. Does it capture CPU profiles too?
Debugging web apps: where performance traces meet existential crisis 🔍
a whole new security nightmare
what video recording software is this ?
just curious, what do you use it for?
Wow, integrating Chrome DevTools with Claude sounds like a total time-saver. That JSON setup and terminal view look pretty slick-definitely a step up from traditional debugging.
Do you want to try MCP More? The built-in MCP marketplace allows you to install various MCPs with one click, including the Chrome DevTools MCP.
Can this work with custom agents that do not have knowledge about the code base
Love it! Performance traces + network inspection made easy
what apps did you use to record this ?
sounds like a game changer for debugging
![yesterday i showed claude code using codex's computer use, today i got some more fucking fire for you claude can also drive codex's official chrome extension, and it controls chromium browsers beautifully all in the background, without the "allow" popup chrome devtools mcp throws at you every time a new agent connects it even handles more than one browser: each install of the extension gets its own instance id, so claude knows which is which i have helium as my main and chrome for work, and claude code now uses both first, install the chrome plugin in the codex app and add openai's chatgpt extension to your chromium browser (or all of them, if you have a few) then give this to your claude: "Set up Codex's Chrome extension for you on my Mac. I've installed the Chrome plugin in the Codex app and the extension. Use Codex's computer use MCP server as user MCP "codex-cu": keep it if it's already registered, otherwise copy the "cua_repl" entry from ~/.codex/plugins/cache/openai-bundled/unified-computer-use/ /.mcp.json. Its browser side rejects calls without Codex turn metadata, so put a small stdio proxy in front that adds _meta["x-codex-turn-metadata"] (session_id and turn_id as a JSON string) to every tools/call. Add a Stop hook that tells this session's proxy to call the hidden turn_ended tool and start a new turn_id, so your tabs get released without touching other sessions. Test it by opening a tab straight at a URL in each browser with cua.createBrowserTab(browserId, url). Browsers can all report as "Chrome", so if I have several, ask me which test tab showed up in which browser." got more than one browser and ok with it touching your claude.md? give it this too: "Write each browser's name and metadata.extensionInstanceId into my global CLAUDE.md, with a note to pick browsers by that id and open tabs straight at a URL."](https://image.24vids.com/tw-2106789987907940538/amplify_video_thumb/2106784556720529408/img/ryyKFFArtD7vAWHT.jpg)
