Chrome DevTools MCP 讓 Claude Code 或 Cursor 在 Chrome 瀏覽器中除錯網頁

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.

What it gives your agent

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:

• Performance insights: records traces with Chrome DevTools and extracts actionable findings.
• Advanced browser debugging: analyzes network requests, takes screenshots and reads console messages with source-mapped stack traces.
• Reliable automation: uses puppeteer to act in Chrome and waits for the results of each action.

Requirements

• Node.js (an LTS version)
• Current stable Chrome
• npm

Step 1: add the server to your MCP client

Add this config to your MCP client:

{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": ["-y", "chrome-devtools-mcp@latest"]
    }
  }
}

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.

Step 2: run the first prompt

Paste this into your client to check that everything works:

Check the performance of https://developers.chrome.com

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.

Step 3: point it at your own bug

Now give it a real task. For example:

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.

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.

Optional: use the CLI instead of MCP

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

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:

• Google collects usage statistics by default. Opt out with the --no-usage-statistics flag, for example "args": ["-y", "chrome-devtools-mcp@latest", "--no-usage-statistics"].
• Performance tools may send trace URLs to the Google CrUX API to add real-user data. Disable that with --no-performance-crux.
• Update checks can be turned off with the CHROME_DEVTOOLS_MCP_NO_UPDATE_CHECKS environment variable.
• Only Google Chrome and Chrome for Testing are officially supported. Other Chromium browsers may work but are not guaranteed.

When to use it

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.

More like this

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