Chrome DevTools MCP
Google's official MCP server that gives coding agents a live Chrome — Puppeteer automation plus DevTools network, console, and performance insights.
Chrome DevTools MCP (Google's Chrome DevTools team, ~43k stars, v1.x since May 2026) gives agents a real browser with the debugger attached: 49 tools spanning Puppeteer-driven navigation and input, network request analysis, console messages with source-mapped stack traces, screenshots, emulation, and performance trace recording with actionable insights plus CrUX field data.
Chrome DevTools MCP is Google's answer to a blind spot every coding agent has: it can write frontend code but can't see it run. This server hands the agent a live Chrome with the DevTools attached — it navigates, clicks, screenshots, reads the console with source-mapped stack traces, inspects network requests, and records performance traces that come back with actionable insights.
Highlights
- 49 tools across the debugging surface — input and navigation automation, emulation, network, console, memory, performance, and a WebMCP category.
- Performance traces with insights — record a trace and get the analysis, augmented with CrUX real-user field data for the URL.
- Debugging-grade visibility — console messages with source-mapped stacks; network requests inspectable individually.
- Reliable automation — Puppeteer-driven with auto-waiting, the same engineering as Google's own testing stack.
- Plugin or plain server — a one-liner MCP install, or the official plugin that adds skills on top.
In an AI-assisted workflow
claude mcp add chrome-devtools --scope user npx chrome-devtools-mcp@latest
# then:
# > Open localhost:3000/checkout, reproduce the broken submit button,
# > read the console error, and fix the root causeThe loop that changes frontend work: the agent makes a change, verifies it in a real browser, reads the actual error or trace, and iterates — closing the gap between "the diff looks right" and "the page works." For performance work, "record a trace on the product page and fix the top insight" turns the performance-engineer playbook into something measurable.
WARNING
The README's own disclaimer applies: the server exposes browser content to the MCP client. Run it against a clean Chrome profile — not the one holding your banking sessions — and know that telemetry is on by default (--no-usage-statistics to opt out, --no-performance-crux to skip CrUX calls).
Good to know
Apache-2.0 from Google's Chrome DevTools team, ~43k stars, 1.0 in May 2026 and moving fast (v1.2 added the plugin and WebMCP tools). Chrome and Chrome-for-Testing only — for cross-browser automation, Playwright MCP remains the complement, and many teams run both: Playwright to drive flows, DevTools MCP to diagnose them.
Frequently asked questions
- How do I add Chrome DevTools MCP to Claude Code?
- One command, verbatim from the README: claude mcp add chrome-devtools --scope user npx chrome-devtools-mcp@latest. There's also a plugin with bundled skills: /plugin marketplace add ChromeDevTools/chrome-devtools-mcp then /plugin install chrome-devtools-mcp@chrome-devtools-plugins. Requirements: Node LTS and a current stable Chrome.
- Chrome DevTools MCP vs Playwright MCP — which one?
- Playwright MCP is the generalist for cross-browser automation and testing flows. Chrome DevTools MCP is Chrome-only but brings the debugger: performance traces with insights, CrUX real-user data, network and console inspection with source maps. For 'why is this page slow/broken', DevTools MCP; for 'automate and test this flow everywhere', Playwright.
- Is it safe to point at my main browser?
- Point it at a clean profile. The README's own disclaimer: it exposes all browser content to the MCP client — a logged-in profile means logged-in sessions become agent-readable. Note also that usage-statistics telemetry is on by default (opt out with --no-usage-statistics).
Related
- The Best MCP Servers in 2026The MCP servers actually worth connecting in 2026 — Context7, GitHub, Chrome DevTools, Playwright, Serena, Exa, Firecrawl, and the best official vendor servers, by use case.
- Adding MCP Servers to Claude Code: Local, Remote, and Project-ScopedThe complete claude mcp add reference — stdio vs HTTP transports, local/project/user scopes, .mcp.json with env expansion, OAuth via /mcp, and the gotchas.
- Playwright MCPMicrosoft's open-source MCP server that gives AI agents structured browser automation via Playwright's accessibility tree.
- Performance EngineerUse this agent to profile and optimize performance — latency, throughput, memory, bundle size. Examples — a slow endpoint, an N+1 query, a heavy render, a large JS bundle.
- Accessibility AuditorUse this agent to audit web UI against WCAG 2.2 AA — semantics, keyboard, ARIA, contrast, forms, and motion. Examples — auditing a new component for keyboard traps, checking a form for accessible errors, running a pre-ship a11y pass on a page.
- DebuggerUse this agent to diagnose failing tests, runtime errors, or unexpected behavior by forming and testing hypotheses. Examples — a stack trace to root-cause, a flaky test, a "works locally but not in CI" bug.
- Browser Agents in 2026: Browser Use vs Stagehand vs Skyvern vs Playwright MCPThe four ways to give AI a browser — autonomous framework, code-first SDK, workflow platform, or MCP server — compared honestly by control, cost, and reliability.
- How Computer-Use Agents WorkInside the perception-action loop that lets AI operate real software — screenshots in, clicks out — plus grounding, reliability, and when to use APIs instead.
- Computer UseComputer use is an AI agent operating software through its real interface — reading the screen, moving the cursor, clicking, and typing like a person would.