Give your AI eyes: Introducing Chrome DevTools MCP

September 2, 2025

Chrome DevTools MCP is a newly announced tool from our team in that allows AI coding assistants to see and interact with a live Chrome browser. In simple terms, it gives your AI “eyes” in the browser so it’s no longer coding with a blindfold on. This public preview connects AI agents (like Cursor, Claude Code and Gemini CLI) to Chrome’s powerful DevTools automation and debugging capabilities. The result? Your AI helper can not only write code, but actually run it in a real browser, inspect what’s happening, and even fix issues based on real feedback from the page.

My introduction to Chrome DevTools MCP on YouTube.

What is MCP (Model Context Protocol)?

MCP stands for Model Context Protocol, an open standard introduced by Anthropic in late 2024 for connecting large language models (LLMs) to external tools and data sources. Think of MCP as a universal adapter plug for AI - it defines a consistent way for AI assistants to communicate with a wide range of apps, services, and databases. Instead of custom integrations for each tool, developers can build or use MCP servers that expose functionality (e.g. a database, a code repository, or a web browser) in a standard format. Likewise, AI clients (like coding assistants or IDE plugins) implement the MCP client side to connect to any of these servers. This decoupling means an AI agent can plug into many different tools interchangeably via the MCP interface.

Anthropic open-sourced the MCP spec and even provided example servers (e.g. connectors for Google Drive, Slack, GitHub, Puppeteer, databases, etc). Early adopters like Replit, Sourcegraph, and others started integrating MCP to enhance their AI coding features. The overarching goal is to move beyond isolated “blind” AI models towards context-aware AI that can actively retrieve information and interact with real systems. Chrome DevTools MCP is Google’s contribution to this ecosystem - a specialized MCP server that connects AI agents to the Chrome browser’s DevTools.

Introducing Chrome DevTools MCP

Chrome DevTools MCP is essentially an MCP server that exposes Chrome’s debugging and automation surface to AI assistants. It acts as a bridge between an AI model (through any MCP-compatible client) and a real Chrome browser instance. Using this bridge, an AI can do things like open pages, click buttons, read the DOM/CSS, capture performance metrics, read console logs, and much more - all autonomously, as if a human developer were using Chrome DevTools.

This directly targets the long-standing limitation of AI coding tools: they couldn’t observe or run the code they wrote. “Coding agents…are effectively programming with a blindfold on” because they can’t see the page’s rendered output, console output, layout, or network activity. Chrome DevTools MCP removes that blindfold. By wiring AI agents into Chrome’s DevTools via MCP, Google is “turning static suggestion engines into loop-closed debuggers” that gather real browser data before proposing fixes. In other words, your AI can now test and debug its code in a live browser and base its recommendations on actual measurements rather than guesswork.

How it works under the hood

Under the hood, Chrome DevTools MCP leverages familiar technologies in a new way:

  • Chrome DevTools Protocol (CDP): This is Chrome’s native debugger interface. The MCP server uses CDP to control the browser - the same low-level commands that DevTools or automation frameworks use. It can inspect DOM elements, intercept network requests, execute JavaScript in the page, etc.

  • Puppeteer for reliability: Rather than issuing raw CDP commands directly, the server uses Puppeteer (the Node.js automation library) to handle browser automation tasks reliably. Puppeteer is battle-tested for controlling Chrome, so it handles details like waiting for page loads or DOM readiness automatically. This means the AI agent’s instructions (e.g. “navigate to page and click a button”) are executed with the same robustness as Puppeteer scripts, including automatic waits for network idle, element present, etc. We programmatically handle clicks, form fills, dialogs, and page navigation with ease.

  • MCP protocol layer: The server wraps these browser abilities behind the MCP interface. An AI agent doesn’t call Puppeteer functions directly; instead it calls high-level MCP tools. Each tool corresponds to a specific action or query (like navigate_page or list_console_messages). The MCP server translates that into CDP actions via Puppeteer, runs it in Chrome, and returns results (often as JSON data the AI can parse).

  • Local server invocation: Chrome DevTools MCP runs locally on your machine (or wherever you start it) as a process. It’s distributed as an npm package for convenience. You don’t manually start Chrome or the server usually - the MCP client (AI agent) will spawn it via the config. When an AI needs to use a tool, the server will launch a Chrome browser (unless one is already running) and perform the required actions. It can run Chrome in headless mode or visible, and even attach to an existing Chrome instance if configured (via a --browserUrl option) via our flags.

  • Security & isolation: By default, it uses a separate user data directory for Chrome so that the AI’s browsing is isolated from your own browser profile. There’s also an --isolated flag to run with a temporary profile that cleans up after each session. This ensures the AI’s automation doesn’t mess with your personal data (or vice versa), and it provides some sandboxing. (It’s still wise not to have the AI visit sensitive logged-in sites, of course, since the AI will “see” whatever that browser instance sees.)

Key capabilities and tools

Chrome DevTools MCP exposes a broad set of DevTools capabilities to the AI. According to the official docs and repository, it provides tools across multiple categories.

  • Performance analysis: One of the headline features is the ability to run a performance trace just like you would in Chrome’s Performance panel. The tools performance_start_trace and performance_stop_trace allow the agent to record a trace of the webpage in action. Even better, there’s performance_analyze_insight which can automatically extract performance metrics and insights (e.g. calculate Largest Contentful Paint, total blocking time, etc. from the trace). Essentially, the AI can perform a Lighthouse-style audit on demand. “Get performance insights: Uses Chrome DevTools to record traces and extract actionable performance insights.”

  • Page Navigation & lifecycle: Open new pages or tabs, navigate to URLs, go back/forward in history, list open pages, wait for specific events (new_page, navigate_page, wait_for, etc.) - for more details, check our docs. Essentially, the AI can control where the browser goes and manage multiple pages.

  • User Interaction simulation: Click elements, fill inputs or entire forms, hover, drag-and-drop, handle JavaScript dialogs (alerts/prompts), and even upload files programmatically (click, fill, fill_form, hover, drag, handle_dialog, upload_file) - the docs cover this. This means the AI can reproduce complex user flows - from logging in, to filling out a checkout form, to pressing UI buttons - to test how the app responds.

  • DOM Inspection & scripting: Evaluate custom JavaScript on the page (evaluate_script), read all console log messages (list_console_messages), and even take a DOM snapshot or screenshot of the page (take_snapshot, take_screenshot). The snapshot feature can capture the DOM state for the AI to analyze layout or content; screenshots let the AI “see” the rendered page as an image if needed.

  • Network inspection: The AI can list network requests the page made and get details of specific requests/responses (list_network_requests, get_network_request). This is crucial for diagnosing issues like missing resources, slow API calls, or CORS errors - things that were previously invisible to code assistants.

  • Emulation: The server lets the AI toggle conditions like CPU throttling, network speed, or viewport size (emulate_cpu, emulate_network, resize_page). This means an AI agent could test how a page behaves on a slow 3G connection or under device-like constraints, then adjust its recommendations accordingly (e.g. flag that an image is too heavy for mobile).

All these tools combined give AI agents a full toolbox for web debugging. As our official blog puts it, this brings “the power of Chrome DevTools to AI coding assistants” - the same features a human developer uses (Elements panel, Network panel, Console, Performance profiler) are now available programmatically to an AI.

Importantly, the Chrome DevTools MCP server is designed for reliability and depth. Because it’s built on Chrome’s own protocol and Puppeteer, it can handle dynamic web apps that require waiting for rendering, it can manage multi-step interactions, and it won’t skip over things like a naive script might. This addresses the brittleness that simpler approaches had.

What you can use it for (use cases)

So, what can an AI developer assistant actually do now that it has “eyes” in the browser? Early users have demonstrated several compelling scenarios where Chrome DevTools MCP elevates an AI’s capabilities:

1. Verify code changes in real time

When your AI suggests a code fix, you can have it immediately test that fix in the browser to verify it works. For example, after generating a solution, the agent can spin up Chrome and check that the updated page behaves as expected. This closes the loop from “write code” to “run and confirm”. A sample prompt might be:

Verify in the browser that your change works as expected.

Using Chrome DevTools MCP, the AI will launch the app in Chrome, exercise the relevant functionality, and report whether the issue is resolved. This helps catch cases where an AI’s code “looks right” but fails in practice - now the assistant can catch its own mistakes by seeing the actual outcome.

2. Diagnose network and console errors

Sometimes the code is running, but something’s off - maybe images aren’t loading or a button click isn’t doing anything. Previously, an AI could only guess why (“maybe a CORS issue?”, “maybe a JS error?”). Now it can look at the console and network log to find the real cause. For instance, an AI agent can use MCP tools to scan for console errors or failed network requests.

A few images on localhost:8080 are not loading. What’s happening?

The agent could navigate to the page, call list_network_requests to see if those image URLs returned 404s or 500s, and check list_console_messages for any CORS errors. It might discover a CORS policy blocking the images or a wrong file path - and it can then suggest a fix based on real evidence (e.g. “Images failing to load due to CORS; consider enabling appropriate headers”). This is a game-changer for troubleshooting runtime issues.

Early users have already seen the benefit. For example, one developer tried asking their AI (via Cursor) to do a performance check, and “DevTools was automatically operated and a useful report was output” just from that simple request.

3. Simulate user behavior for testing

Complex bugs often only appear when a specific sequence of user actions is performed. With Chrome DevTools MCP, you can instruct the AI to reproduce user flows to hunt down bugs. The agent can navigate through pages, fill forms, click buttons - whatever steps are needed - while monitoring the app’s behavior.

Why does submitting the form fail after entering an email address?

The AI will open the page, enter an email into the form fields (using fill or fill_form), click the submit button (click), and observe what happens. Perhaps it catches a JavaScript error on submission by reading the console, or it notices no network request was sent. It can then deduce things like “the form validation script crashed due to an uncaught exception” or “the submit button is not wired to any event handler” and advise accordingly. Essentially, it can QA test interactive flows autonomously.

4. Debug live styling and layout issues

Front-end developers often spend time inspecting the DOM and CSS in DevTools to figure out why an element is misaligned or why a page “looks weird.” Now an AI agent can do that too. You can ask it to inspect a live page’s layout and styles to pinpoint UI issues.

The page on localhost:8080 looks strange and elements are overflowing. Fix?

The AI could use take_snapshot to get the DOM structure and current CSS styles of the page, or even take_screenshot for a visual. By analyzing that, it might find that a container div has a fixed height causing overflow, or a CSS file failed to load. It can then suggest specific CSS fixes (like “add overflow: auto to .container” or ensure the missing CSS is included).

This capability turns the AI into a virtual front-end debugger, examining the actual rendered state rather than relying on static code analysis. If an element is computed to be 5000px wide due to a flexbox issue, the AI can see that and recommend a fix, much like a human dev would after using the Inspect Element tool.

5. Automate performance audits and optimizations

Web performance is critical, and now your AI can proactively measure and improve performance metrics. Chrome DevTools MCP lets the agent run a full performance trace and analyze it. That means the AI can profile page load times, rendering stats, JavaScript execution, etc., then suggest optimizations based on real data.

localhost:8080 is loading slowly. Make it load faster.

In response, the agent could start a performance trace when loading the page, then use performance_analyze_insight to get metrics like Largest Contentful Paint (LCP). It might find LCP is, say, 4 seconds and identify the main culprit (e.g. a large image or slow API call). It can then propose targeted improvements such as optimizing that image or adding preload hints.

This is transformative - the AI isn’t guessing that “maybe your images are large”; it’s actually measuring and confirming what slows down the page, then recommending fixes with evidence. It turns AI into a performance coach that uses real RUM (Real User Monitoring) style data.

Here’s an example tweet from a developer who tried this out with Warp:

6. Creative web automation recipes (beyond debugging)

Because Chrome DevTools MCP essentially gives an AI full control of a browser, people are already imagining creative uses beyond just debugging their own app.

For example, AI researcher Delip Rao showed how it can act as a “Swiss-Army knife MCP”. In one experiment, he had an AI (using Google’s Gemini CLI as the client) open Google Scholar, search for a term, and download the top 5 PDF results - all via automated browser actions. This demonstrates that any task you could script with a browser, you can now just ask the AI to do in natural language, leveraging Chrome behind the scenes.

Another developer, Guntram Bechtold, used it to apply wild CSS transformations to Hacker News via an AI prompt:

The range of possibilities here is broad: from automated UI testing, web scraping data for analysis, verifying SEO tags on a site, to even having the AI generate and validate entire user journey tests. Essentially, Chrome DevTools MCP opens up automation-assisted web development - the AI can be your hands and eyes in the browser, under your high-level guidance.

Getting started with Chrome DevTools MCP

Setting up Chrome DevTools MCP is straightforward, especially if you’re using one of the supported AI development tools:

  • Requirements: You’ll need Node.js 22 or above, and a Chrome browser (stable channel or newer) installed on your system. The MCP server is distributed via npm.

  • Installation: There is no separate program to download; you configure your AI tool (the MCP client) to launch the Chrome DevTools MCP server via npx. For example, in a configuration file you’d add:

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

This one-liner tells the client how to start the server. Using the @latest tag ensures you always get the newest version on each run. This is useful as the project is in active development and will be updated frequently.

Chrome DevTools MCP already works with many popular AI coding assistants including Cursor, Claude Code, Gemini CLI, Cline and several others.

If you run into issues, make sure your Node version is new enough (for example, trying on Node 20 will fail with a message that Node 22+ is required) You might also try restarting your tool of choice if it doesn’t pick up the MCP server config change immediately.

Looking ahead and getting involved

Chrome DevTools MCP is currently in public preview, which means it’s an early release for the community to try and provide feedback. We are building it “incrementally” - so not every DevTools feature is available yet, but they plan to add more tools and capabilities based on what developers need most. For example, future updates might include more DOM inspection commands, deeper CSS profiling, or new performance metrics as those become relevant.

Your feedback is invaluable if you try it out. Our team invites developers (both those using AI assistants and those building them) to suggest new features and report issues on the project’s GitHub. If there’s a DevTools feature you’d love to see exposed via MCP, you can file it and influence the roadmap. Being an open-source project, you can also contribute code or extensions if you’re adventurous.

For web developers, embracing tools like Chrome DevTools MCP means your AI assistant becomes much more than an autocomplete - it becomes a true co-pilot that can interact with your app the way you do. As one commentator put it, it’s like the AI is now an intern who can run and test the code, not just write it. The result is higher confidence in AI-generated solutions and a new paradigm where AI is not just coding, but actively debugging and optimizing alongside you.