Chrome DevTools MCP: Let Your AI Agent Debug Your Browser

Chrome just shipped something that makes AI-assisted debugging way more powerful. The Chrome DevTools MCP server can now connect directly to your active browser session—so your coding agent can see what you see and debug alongside you.

What Changed?

Previously, when you used an AI coding agent with Chrome DevTools MCP, it would spin up its own isolated Chrome instance. That's fine for many tasks, but it meant starting fresh every time: no logged-in sessions, no existing state, no access to what you were already working on.

The new auto-connect feature changes this. Now your AI agent can:

• Re-use your existing browser session — Log into your app once, then hand debugging off to your AI
• Access active debugging sessions — Select an element in the Elements panel or a request in the Network panel, and ask your AI to investigate
• Seamlessly switch between manual and AI-assisted debugging — You debug some, AI debugs some, back and forth

How It Works

Chrome M144 (in Beta) added a remote debugging request feature. Here's the quick setup:

Step 1: Enable Remote Debugging

Navigate to chrome://inspect/#remote-debugging in Chrome and enable the feature.

Step 2: Configure Your MCP Server

Add the --autoConnect flag to your chrome-devtools-mcp configuration:

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

Step 3: Test It Out

Open your AI coding agent (like gemini-cli), and prompt it to check performance on a URL. Chrome will show a permission dialog—click Allow—and your AI gets access to the running session.

Why This Is a Big Deal for Builders

If you're building web apps, you know the drill:

• Something breaks in production
• You open DevTools, check network requests, inspect elements
• You narrow it down but then spend 20 minutes trying to reproduce

Now you can do that narrowing in your own browser, then hand it to your AI agent with context: "Hey, check the network request at #47—it's returning a 500." Your AI sees exactly what you see.

For indie hackers shipping fast, this means:

• Less context switching — No need to explain what you're looking at
• Faster debugging — AI works with real state, not a fresh browser
• Better collaboration — You + AI debugging together, not just AI doing isolated work

The Bigger Picture

This is part of a bigger shift: AI coding agents moving from "write code in isolation" to "work alongside you in your actual environment."

MCP (Model Context Protocol) is becoming the standard for this. Chrome's MCP server is one of the most practical implementations yet—because it connects to something every web developer already uses: the browser.

If you're not using MCP yet with your AI tools, now's a good time to start. The debug workflow is one of the clearest wins.