Chrome DevTools MCP: Debug Pages with Claude

Chrome DevTools MCP is the Chrome DevTools team’s MCP server for coding agents. It connects Claude to a live Chrome instance with DevTools capabilities, so Claude can do more than click: it can record performance traces, read console messages and inspect network requests.

Install in Claude Code

As a plugin, from inside a Claude Code session:

/plugin marketplace add ChromeDevTools/chrome-devtools-mcp
/plugin install chrome-devtools-mcp@chrome-devtools-plugins

Or as a plain MCP server, using the command the README gives for any client:

claude mcp add chrome-devtools -- npx -y chrome-devtools-mcp@latest

You need Chrome and a current Node.js LTS. Using @latest keeps you on the newest server version. See the plugins guide and the MCP guide for how each route behaves.

Use cases

Load localhost:3000, record a performance trace, and tell me what delays first render
Open the checkout page and list any console errors and failed network requests

• Diagnosing slow pages and layout shifts with real trace data.
• Finding the failing API call behind a broken UI.
• Checking a fix in the browser right after Claude edits the code.

Pros

• Official, from the Chrome DevTools team.
• Exposes data that pure automation tools do not: traces, console, network.
• Plugin install makes setup a two-line step in Claude Code.

Cons

• Chrome-only.
• Adds many tools to context; keep it disabled when not debugging front ends.
• Browsing untrusted pages carries prompt injection risk.

Related

• Playwright MCP for cross-browser automation.
• webapp-testing skill for scripted Playwright tests.