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…
Claude Code and Cursor are AI coding assistants that can help fix front-end bugs, but they make assumptions rather than actually seeing the page, console errors, or network calls. To bridge this gap, the Chrome DevTools MCP server is used. This server allows an AI agent to control and inspect a live Chrome browser, reproducing bugs, reading real errors, and verifying fixes.
The setup involves adding the server to the MCP client configuration using Node.js and Chrome npm. Once the server is running, the agent can perform tasks such as checking the performance of a website, reproducing bugs, reading console and network messages, and fixing issues. The agent can interact with the browser, edit code, and check if the error is resolved.
The Chrome DevTools MCP server exposes the browser's content to the client, so sensitive data should be avoided. Google collects usage statistics by default, and performance tools may send trace URLs to the Google CrUX API. Users can opt out of these features. The server is compatible with Google Chrome and Chrome for Testing, and other Chromium browsers may work but are not guaranteed.
This tool is particularly useful for bugs that can only be seen in a running page, such as layout issues at specific widths or slow pages that require a trace. However, for pure logic bugs, a normal test run may be faster.
Written by urgent.news from Dev.to's reporting — not their text. Machine-written — may contain errors; check the original before relying on it.
This story
This is one outlet's version. Read the fullest account.
