Claude + Chrome DevTools MCP: Browser Debugging Guide

As AI-assisted development becomes more common, many people want more than a chatbot that only answers questions. They want Claude to inspect the browser directly, read the DOM, execute JavaScript, watch network traffic, and help debug real pages.

That is exactly what MCP (Model Context Protocol) and chrome-devtools-mcp make possible.

1. What is MCP, and who introduced it?

MCP stands for Model Context Protocol. It was introduced by Anthropic in 2024.

Its goal is straightforward:

Let AI interact with external tools such as filesystems, browsers, databases, and Git through a standard, controlled protocol.

If USB is a universal interface for devices, MCP is a universal interface between AI and tools.

Official references:

• Claude Code MCP docs
• Model Context Protocol on GitHub
• The Verge coverage of MCP

2. What is chrome-devtools-mcp?

chrome-devtools-mcp is an MCP server built by the Chrome team. It lets Claude control the browser through the Chrome DevTools Protocol (CDP).

• GitHub: github.com/ChromeDevTools/chrome-devtools-mcp
• Purpose: connect Claude to a live Chrome or Chromium session

Once it is configured, Claude can do things like these:

3. Requirements

4. Full setup, step by step

4.1 Install chrome-devtools-mcp

npm install -g chrome-devtools-mcp

4.2 Launch Chrome in remote debugging mode

/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome \
  --remote-debugging-port=9222 \
  --user-data-dir=/tmp/chrome-mcp

Notes:

• 9222 is the DevTools debugging port.
• --user-data-dir keeps this debug session separate from your normal Chrome profile.

4.3 Start the MCP server

chrome-devtools-mcp --port 8080

4.4 Register the server in Claude Desktop

Edit the Claude Desktop config file:

Add the following:

{
  "mcpServers": {
    "chrome-devtools": {
      "command": "chrome-devtools-mcp",
      "args": ["--port", "8080"]
    }
  }
}

Then restart Claude Desktop.

5. How to test the setup

Open Claude Desktop and run:

/mcp

If you see something like chrome-devtools loaded successfully, the integration is working.

Then try prompts such as:

Open https://example.com and return the page title

or:

Run document.title and return the result

6. claude mcp add vs --scope user

The Claude CLI can also register MCP servers.

If you want the server available everywhere, the user-scoped command is usually the better choice.

7. Common problems and fixes

8. The full flow in one line

Install Node.js -> install chrome-devtools-mcp -> launch Chrome with remote debugging -> start the MCP server -> register it in Claude -> let AI operate the browser

9. Summary

• MCP is the tool protocol behind Claude's broader integration model.
• chrome-devtools-mcp is the bridge that connects Claude to Chrome DevTools.
• Once configured, Claude can inspect pages, read the DOM, run JavaScript, and help debug browser behavior directly.

If you want AI to move beyond text-only assistance and actually help with live browser debugging, this setup is one of the most practical ways to do it.

Related FreeMac Guides

• If Claude Code is not installed yet, start with Claude Code local installation and proxy setup.
• If you want safer automation rules, read the Hookify guide.
• If you are debugging React rendering, continue with React hydration failure causes and fixes.

When this setup is worth it

Use Chrome DevTools MCP when the browser state matters: a hydration error that only appears after interaction, a layout bug that depends on viewport size, a form that needs real typing, or a network request that must be inspected in context. Those are cases where screenshots and copied console logs are weaker than letting the assistant inspect the live page.

Do not use it for every small frontend question. If the issue is a pure TypeScript error, a missing import, or a known API choice, ordinary code inspection is faster. Browser control is most valuable when the page, DOM, network panel, and console all need to be correlated.

Keep the scope narrow. Ask the assistant to inspect one route, one component, or one failing interaction. A live browser is powerful, but it can also produce noisy observations if the task is not framed clearly.