Let Claude Code or Cursor debug your page in a real Chrome browser

When Claude Code or Cursor fixes a front-end bug, it is usually guessing. It reads your source, but it cannot see the page, the console errors or the network calls. The Chrome DevTools MCP server closes that gap: it lets your coding agent control and inspect a live Chrome browser, so it can reproduce a bug, read the real error and check that its fix worked. Here is the setup, using the commands from the README. The short version is on the Deduped use-case page.

chrome-devtools-mcp is a Model Context Protocol server that exposes Chrome DevTools to an AI coding assistant such as Claude, Cursor, Copilot or Antigravity. According to the README it does three main things:

{ "mcpServers": { "chrome-devtools": { "command": "npx", "args": [ "-y", "chrome-devtools-mcp@latest" ] } } } Enter fullscreen mode Exit fullscreen mode Using @latest means your client always starts the newest version. The README has per-client instructions for Claude Code, Cursor, VS Code and others in its client configuration guide.

Paste this into your client to check that everything works:

Check the performance of https://developers.chrome.com Enter fullscreen mode Exit fullscreen mode Your client should open Chrome and record a performance trace. The browser starts only when the agent first uses a tool that needs it, so connecting alone will not open a window.

Open http://localhost:3000/checkout, click Pay, and tell me what the console and network panel show. Then fix the cause and verify it in the browser. Enter fullscreen mode Exit fullscreen mode The agent can reproduce the click, read the failing request and the source-mapped stack trace, edit your code, reload and confirm the error is gone. That loop is the whole value: it checks its own work against a real browser instead of assuming.

The package also ships a chrome-devtools CLI, so you can drive the browser from a terminal or a script without MCP:

npm i chrome-devtools-mcp@latest -g chrome-devtools navigate_page 1 --url "https://developers.chrome.com" chrome-devtools take_screenshot 1 --filePath screenshot.png chrome-devtools stop Enter fullscreen mode Exit fullscreen mode Privacy settings worth knowing The server exposes the content of the browser instance to your MCP client, so avoid sharing sensitive data in that browser. A few details from the README:

Use it for bugs you can only see in a running page: a layout that breaks at one width, a request that fails only after login, a slow page where you need a trace rather than a hunch. For pure logic bugs a normal test run is faster.

Compare it with other browser tools on best AI repos for browser automation, or see every Chrome DevTools MCP use case.

Want the setup commands for 50 AI repos people actually ship with? Get the free AI Repos That Actually Ship pack: https://dedupedai.com/ship-pack/?utm_source=devto&utm_medium=article&utm_campaign=shippack