Chrome DevTools MCP: Full Browser Control for Every Coding Agent

For the last two years, coding agents have been remarkably effective at writing, debugging, and explaining code. But they've had a blind spot: the browser. An agent could fix a React component's logic but couldn't see what that component rendered. It could analyze stack traces but couldn't open Chrome DevTools to inspect network waterfalls or heap snapshots. That gap just closed.

Chrome DevTools MCP is Google's official MCP server that hands your coding agent the full power of Chrome DevTools — 45 tools across 10 categories, all accessible through standard Model Context Protocol (MCP) interfaces. I've been testing v1.0.1 since its May 18 release, and it changes how agents interact with web applications. Here's what it does, how to set it up, and where it falls short.

What Is Chrome DevTools MCP?

It's an open-source TypeScript server — published as chrome-devtools-mcp on npm — that exposes Chrome DevTools capabilities as MCP tools. Under the hood, it runs Puppeteer v25.0.4 to control Chrome and integrates Lighthouse 13.3.0 for auditing. Think of it as a programmatic API for everything you'd normally do in the DevTools panel.

The server ships with 45 tools across 10 categories: Input automation (10), Navigation automation (6), Debugging (8), Memory (5), Extensions (5), Performance (3), Network (2), Emulation (2), Third-party (2), and WebMCP (2). Plus a --slim flag exposing a subset of 3 tools.

The server supports 22+ coding clients including Claude Code, Cursor, Codex, Copilot, Gemini CLI, OpenCode, and Windsurf. If your client speaks MCP, Chrome DevTools MCP works.

What Can It Actually Do?

I've been running this server for the past week across several real workflows. Here's what stood out.

Performance Insights with CrUX Field Data

The performance_analyze_insight tool doesn't just run lighthouse. It pulls Chrome's built-in Performance Insights panel, which includes Chrome User Experience (CrUX) field data. Your agent can ask "what's the LCP on this page?" and get real-user metrics alongside lab data. No more context-switching to PageSpeed Insights .

Full Heap Snapshot Analysis

This is the capability I didn't expect. The memory tools let your agent take a heap snapshot and then query it: find class nodes, trace retainer paths, get summaries. I used it to debug a memory leak in a large React dashboard where the agent took a snapshot, identified detached DOM nodes via get_heapsnapshot_retainers, and pointed me to the exact component that wasn't cleaning up event listeners.

That's a workflow that previously required manual DevTools digging.

Lighthouse Audits from Agent Conversations

The lighthouse_audit tool runs a full Lighthouse report through the agent. You can ask "audit this page for accessibility" and get back scores, opportunities, and diagnostics — all within your editor or terminal. The agent can then act on those results: fix contrast ratios, add aria labels, optimize images.

Chrome Extension Debugging

The server can install, list, reload, trigger actions, and uninstall extensions — all programmatically. For teams running E2E tests against browser extensions, this eliminates a whole category of manual setup.

Slim Mode

The --slim flag reduces the tool surface to just three operations: navigation, script execution, and screenshots. This is useful when you want browser control without the full DevTools payload — saves tokens and reduces decision complexity for the agent.

Screencast (Experimental)

The screencast_start and screencast_stop tools let the agent record browser interactions as video output. It requires ffmpeg installed locally, and the feature is marked experimental. I got it working, but the frame rate is inconsistent. Useful for demo recording, not production monitoring.

Setting It Up: Configuration Guide

The server publishes to npm as chrome-devtools-mcp. The universal configuration works with any MCP-compatible client:

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

For specific clients, here are the exact commands I tested:

Claude Code (desktop app):

claude mcp add chrome-devtools --scope user npx chrome-devtools-mcp@latest

Codex CLI:

codex mcp add chrome-devtools -- npx chrome-devtools-mcp@latest

Gemini CLI:

gemini mcp add chrome-devtools npx chrome-devtools-mcp@latest

VS Code / Copilot: Install as a VS Code agent plugin via Chat: Install Plugin From Source with repository ChromeDevTools/chrome-devtools-mcp.

Cursor: One-click install via the MCP setup URL at cursor.com/en/install-mcp .

Pro Tips

• Use the --headless flag for CI environments where no display is available.
• Pass --chrome-path if you need to point to a specific Chrome executable (useful in containerized builds).
• Enable experimental features with --experimentalPageIdRouting for concurrent session support across multiple pages.
• For token-sensitive workflows, always add --slim to limit the tool surface.
• Chrome 144+ supports auto-connect mode, which shares state between the agent and your existing browser session — no new window spawned.

How It Stacks Up Against Playwright MCP and Puppeteer

Let me be direct: these tools serve different purposes, but Chrome DevTools MCP overlaps with both.

Playwright MCP (33K ⭐, Microsoft) supports Chrome, Firefox, WebKit, and Edge. Its strength is cross-browser testing. If your team needs to validate behavior across multiple engines, Playwright MCP is the choice. But it lacks performance tracing, heap snapshots, and Lighthouse — capabilities that Chrome DevTools MCP handles natively.

Puppeteer (94.4K ⭐, Google) is the underlying engine for Chrome DevTools MCP. You can use Puppeteer directly if you need fine-grained control and want to write Node scripts. But it's not an MCP server — there's no standard protocol interface. Chrome DevTools MCP gives you Puppeteer's power through any MCP client without writing a single line of orchestration code.

Here's the decision matrix:

The verdict: if you work primarily with Chrome and need debugging depth (performance, memory, Lighthouse), Chrome DevTools MCP is the clear winner. If cross-browser coverage is your priority, go Playwright MCP. If you need to script complex browser automation in Node, Puppeteer remains the right foundation.

Real-World Use Cases

I've been putting this server through real production work. Here's where it earned its place.

Debugging CI failures: Our E2E tests failed intermittently on a staging deploy. I had the agent navigate to the failing page, take a screenshot, list console messages, and run a Lighthouse audit — all in one session. It found a third-party script blocking the main thread that only showed up on the staging environment. Debug time: 12 minutes instead of an hour.

Performance regression hunting: Pointed the agent at a page before and after a deploy, ran performance_analyze_insight on both, and asked for a diff. The agent identified a 300ms LCP regression caused by an unoptimized hero image. No manual DevTools profiling needed.

Memory leak detection: Connected the agent to a long-running SPA, took a heap snapshot after 5 minutes and again after 30. The agent used get_heapsnapshot_retainers to trace growing detached DOM trees back to a subscription that wasn't being cleaned up on component unmount.

Accessibility auditing: Ran lighthouse_audit with the accessibility category flag. The agent returned scores, flagged missing aria labels, and generated a fix list with line-number references. I applied the changes and re-audited in the same session.

Limitations and Caveats

No tool is perfect, and this one has real edges.

• Chrome only. If you need Firefox, Safari, or Edge coverage, you'll need Playwright MCP or a custom setup.
• Telemetry. The server collects anonymous usage data by default. You can opt out with --no-usage-statistics or set CHROME_DEVTOOLS_MCP_NO_USAGE_STATISTICS.
• Experimental features. screencast and pageIdRouting are marked experimental. They work but expect rough edges. Don't build production workflows around them yet.
• Security. This server gives your agent full control of a browser instance. In CI or shared environments, restrict access via --chrome-path pointing to a sandboxed profile. Never expose the MCP endpoint to unauthenticated network access.
• Memory overhead. Running a full DevTools session has a noticeable memory footprint. Slim mode reduces this significantly, but it's not negligible.
• Agent capability gap. Not every MCP client handles 45 tools gracefully. Simpler agents may struggle with the large tool surface, resulting in slower selection or missed capabilities. Test with your specific agent before relying on it.
• MCP round-trip latency. Each tool invocation adds protocol overhead. For rapid, sequential interactions (e.g., typing into a form), the latency is noticeable compared to in-process Puppeteer scripts. Batch operations where possible.
• No official Docker image. You'll need to bundle Chrome, Node, and the server yourself for containerized environments. The --headless flag works, but there's no ready-to-use container on Docker Hub.

Verdict

Chrome DevTools MCP is a leap forward for agent-assisted web development.

It turns your coding agent from a code editor that can't see the browser into a full-fledged debugging partner that can inspect performance, analyze memory, run audits, and automate interactions — all through standard MCP.

If you build for the web, add this to your MCP configuration today. The 45-tool surface is comprehensive and setup takes seconds. The capabilities — heap snapshots, Lighthouse, Performance Insights — are unique in the MCP ecosystem. It's not a replacement for Playwright MCP in cross-browser scenarios, and Puppeteer still wins for custom automation scripts. But for everyday frontend debugging and performance work, there's nothing else at this level.

Start with the universal config above, add --slim if tokens are tight, and let your agent see what it's been missing.

Chrome DevTools MCP v1.0.1 tested with Claude Code 4.5, Codex CLI 0.3, and OpenCode. Server requires Node.js ^20.19.0 || ^22.12.0 || >=23 (LTS versions). Chromium 144+ recommended for auto-connect mode.

Further Reading

• Chrome DevTools MCP on GitHub — Official repository with full tool listing, setup guides, and release notes for the project
• Playwright MCP on GitHub — Microsoft's cross-browser MCP server, the primary alternative for multi-engine testing workflows
• Chrome DevTools Documentation — Google's complete reference for every DevTools panel, feature, and workflow
• Model Context Protocol Specification — The open standard powering MCP servers, including architecture, concepts, and client/server guides
• Puppeteer Documentation — Official docs for the browser automation library that powers Chrome DevTools MCP