Google AI Introduces the Public Preview of Chrome DevTools MCP

Google has announced a public preview of “Chrome DevTools MCP,” a Model Context Protocol (MCP) server that enables AI coding agents to control and inspect a real Chrome browser instance. This capability allows agents to record performance traces, inspect the DOM and CSS, execute JavaScript, read console output, and automate user flows. The launch addresses a significant limitation of code-generating agents, which typically cannot observe the runtime behavior of the pages they create or modify. By connecting agents to Chrome’s DevTools via MCP, Google transforms static suggestion engines into closed-loop debuggers capable of running measurements in the browser before recommending fixes.

What is Chrome DevTools MCP?

MCP is an open protocol designed to connect large language models (LLMs) to tools and data. Google’s DevTools MCP serves as a specialized server that exposes Chrome’s debugging surface to MCP-compatible clients. According to Google’s developer blog, this initiative aims to «bring the power of Chrome DevTools to AI coding assistants,» facilitating specific workflows such as initiating a performance trace against a target URL and having the agent analyze the resulting trace to suggest optimizations, like diagnosing high Largest Contentful Paint.

Capabilities and Tool Surface

The official GitHub repository outlines a comprehensive toolset. Beyond performance tracing, agents can:

Run navigation primitives: navigate_page, new_page, wait_for
Simulate user input: click, fill, drag, hover
Interrogate runtime state: list_console_messages, evaluate_script, list_network_requests, get_network_request
Utilize screenshot and snapshot utilities for visual and DOM-state capture to support diffs and regressions

The server relies on Puppeteer for reliable automation and waiting semantics, communicating with Chrome via the Chrome DevTools Protocol (CDP).

Installation

Setting up MCP clients is designed to be straightforward. Google recommends adding a single configuration stanza that executes a command through npx to ensure the latest server build is always in use:

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

This server integrates with multiple agent front ends, including Gemini CLI, Claude Code, Cursor, and GitHub Copilot’s MCP support. The installation process for popular environments is documented in the repository.

Example Agent Workflows

Google’s announcement presents practical prompts that illustrate end-to-end loops, such as:

Verifying a proposed fix in a live browser
Analyzing network failures, including CORS or blocked image requests
Simulating user behaviors, like form submissions to reproduce bugs
Inspecting layout issues by reading DOM/CSS in context
Running automated performance audits to improve LCP and other Core Web Vitals

These operations enable agents to validate outcomes based on actual measurements rather than heuristics.

Summary

The public preview of Chrome DevTools MCP marks a significant development in agent-based frontend tooling. It grounds AI assistants in real browser telemetry—performance traces, DOM/CSS state, and network and console data—ensuring that recommendations are based on actual measurements rather than assumptions. The first-party server, developed by the Chrome DevTools team, is installable via npx and targets MCP-capable clients, with Chrome/CDP functioning in the background. Expect quicker diagnosis and resolution of regressions and unstable UI flows, along with tighter validation of performance enhancements.

For further technical details, visit the official blog and explore the GitHub Page for tutorials, code, and notebooks. Follow us on Twitter for updates.

Google AI Introduces the Public Preview of Chrome DevTools MCP: Making Your Coding Agent Control and Inspect a Live Chrome Browser