Chrome DevTools MCP server in Claude Code.
Give Claude Code a real browser to debug against. One CLI command registers the official Chrome DevTools MCP server, and your agent can inspect, profile, and screenshot live pages without leaving the terminal.
Claude Code can edit your frontend code all day, but without a browser it's guessing about what actually renders. Chrome DevTools MCP — the official server from the Chrome DevTools team, with 43.2k GitHub stars — closes that loop. It drives a live Chrome instance so the agent can read console errors, watch network requests, and run performance traces on the page it just changed.
Because Claude Code lives in your terminal, setup is a single command. This guide covers both the CLI route and the project-scoped .mcp.json route, plus what to check when the server doesn't show up.
Why pair a browser debugger with a terminal agent
The typical Claude Code frontend loop is: edit, ask you to check the browser, wait. With Chrome DevTools MCP in the loop, the agent verifies its own work — it loads the page, reads the console, and inspects the DOM directly. Debugging a layout bug or a failing fetch becomes one continuous session instead of a copy-paste relay.
The server is published on npm as chrome-devtools-mcp and runs over stdio, which is exactly the transport Claude Code expects for local servers. You need Chrome installed and a recent Node runtime; check the README on GitHub for the current minimum version.
Register the server with the CLI
The fastest path is `claude mcp add`, which writes the config for you. Run this from any directory for a user-scoped server, or pass `--scope project` to commit it to the repo you're in:
claude mcp add chrome-devtools -- npx chrome-devtools-mcp@latestOr check a .mcp.json into your project
If you want the whole team to get the server when they clone the repo, add a .mcp.json file at the project root instead. Claude Code reads it on startup and asks each user to approve project-scoped servers the first time:
{
"mcpServers": {
"chrome-devtools": {
"command": "npx",
"args": ["chrome-devtools-mcp@latest"]
}
}
}Verify it works
Start a new Claude Code session and type `/mcp`. You should see chrome-devtools listed as connected, along with its tools. A quick smoke test: ask the agent to open a URL you're developing and report any console errors. The first call will be slower while npx fetches the package and Chrome launches.
You can see the server's tool list and live listing on the Loomal marketplace at https://loomal.ai/marketplace/chrome-devtools-mcp.
Troubleshooting in Claude Code
Server missing from `/mcp`? First check scope: `claude mcp list` shows what's registered and where. A server added with local scope in one directory won't appear when you launch Claude Code somewhere else. If you used .mcp.json, confirm you approved it when prompted — declined project servers stay off until you reset approval.
If the server shows as failed, the usual culprit is the launch command: npx must resolve in the same shell environment Claude Code runs in, so test `npx chrome-devtools-mcp@latest --help` in that terminal. JSON syntax errors in a hand-edited .mcp.json (a trailing comma is the classic) will also silently stop the server from loading. After any config change, start a fresh session — running sessions don't re-read MCP config.
FAQ
How do I install Chrome DevTools MCP in Claude Code?
Run `claude mcp add chrome-devtools -- npx chrome-devtools-mcp@latest` in your terminal. That registers the official npm package as a stdio server. Alternatively, commit a .mcp.json with the same command to your project root so teammates get it too.
Where does Claude Code store MCP configuration?
It depends on scope. User- and local-scoped servers added via `claude mcp add` live in Claude Code's own settings, while project-scoped servers live in a .mcp.json at the repo root. Run `claude mcp list` to see everything that's registered and from where.
Chrome DevTools doesn't appear after setup — what now?
Type `/mcp` in a fresh session to see the server's status. If it's absent, check the scope you registered it under; if it's failing, run the npx command manually to confirm Node and Chrome are available. Config changes only take effect in new sessions.
Does the agent control my normal Chrome profile?
By default the server launches its own Chrome instance rather than attaching to your day-to-day browser. The README documents flags for channels and connection options, so check it before pointing the agent at a browser with logged-in sessions.
More MCP servers for Claude Code.
Browse the Loomal marketplace — every listing shows live tools and pricing.