Chrome DevTools MCP server in Claude Desktop.
Let Claude Desktop open a real Chrome window, read console errors, and profile page performance. One JSON entry in claude_desktop_config.json and a full restart is all it takes.
Claude Desktop is a chat app, which makes it an unexpectedly good cockpit for browser debugging — you describe the problem in plain language and the agent does the DevTools work. Chrome DevTools MCP, maintained by the Chrome DevTools team itself (43.2k stars on GitHub), gives Claude the tools to inspect, debug, and profile live web pages.
Unlike editor-based clients, Claude Desktop has no CLI or settings toggle for MCP — everything goes through one JSON file. Here's exactly where that file lives, what to put in it, and the restart step people most often get wrong.
What Claude Desktop can do with a browser
Once connected, you can ask things like 'open localhost:3000 and tell me why the checkout button does nothing' and Claude will load the page, read console output, and inspect network activity to answer. Performance questions work too — the server exposes Chrome's tracing, so 'what's slowing down this page' gets an evidence-based reply instead of a generic checklist.
The server ships on npm as chrome-devtools-mcp. It needs Node installed on your machine (npx does the fetching) and a Chrome install for it to drive.
Find your config file
Claude Desktop reads MCP servers from claude_desktop_config.json. On macOS it's at ~/Library/Application Support/Claude/claude_desktop_config.json; on Windows it's %APPDATA%\Claude\claude_desktop_config.json. If the file doesn't exist yet, open Claude Desktop's Settings, go to the Developer section, and use Edit Config — it creates the file in the right place for you.
Add the server entry
Add chrome-devtools under the top-level mcpServers key. If you already have other servers, add this as a sibling entry rather than replacing the object:
{
"mcpServers": {
"chrome-devtools": {
"command": "npx",
"args": ["chrome-devtools-mcp@latest"]
}
}
}Restart fully, then test
Claude Desktop only reads this file at launch, and closing the window is not the same as quitting. On macOS use Cmd+Q; on Windows quit from the system tray icon. After relaunch, the tools indicator in the chat input should list chrome-devtools. Ask Claude to open a public URL and summarize its console messages as a first test.
The server's live tool list is on its Loomal marketplace listing at https://loomal.ai/marketplace/chrome-devtools-mcp.
Troubleshooting in Claude Desktop
If nothing appears after restart, the config file is suspect: a stray trailing comma or unescaped backslash makes Claude Desktop ignore the whole file. Windows paths in JSON need double backslashes. Validate the JSON in any linter before relaunching.
If the server appears but errors out, check the MCP logs — ~/Library/Logs/Claude/ on macOS, the logs folder under %APPDATA%\Claude on Windows — for the server's stderr. A common failure is that GUI apps don't inherit your shell's PATH, so npx isn't found; the fix is to put the absolute path to npx (run `which npx` or `where npx`) in the command field. And confirm Chrome itself is installed — the server launches it on first tool call.
FAQ
How do I install Chrome DevTools MCP in Claude Desktop?
Edit claude_desktop_config.json and add a chrome-devtools entry under mcpServers with command npx and args ["chrome-devtools-mcp@latest"]. Then quit Claude Desktop completely and relaunch — the config is only read at startup.
Where is the Claude Desktop config file?
On macOS: ~/Library/Application Support/Claude/claude_desktop_config.json. On Windows: %APPDATA%\Claude\claude_desktop_config.json. You can also reach it from Settings > Developer > Edit Config inside the app, which creates it if missing.
I restarted and the server still doesn't show. Why?
Most often the JSON is invalid (trailing comma, single backslashes on Windows) or the app wasn't fully quit — close it from the menu bar or system tray, not just the window. If it shows but fails, check the MCP log files for errors and try using the absolute path to npx.
Will Claude browse with my personal Chrome profile?
No — by default the server starts a separate Chrome instance for the agent to control. That isolation is worth keeping; review the project's README on GitHub before connecting it to any browser profile with saved logins.
More MCP servers for Claude Desktop.
Find your next server on the Loomal marketplace, with live tool lists per listing.