Chrome DevTools MCP: Let AI Coding Agents Hijack Your Live Browser Session 🚀🤖

chrome-devtools-mcpcoding-agentsdevtools-protocollink-noteremote-debugging

Yo, my guy, before we dive in—WHY does this even exist? 🔥
Coding agents (like Gemini CLI or Cursor) were stuck in a bubble. They'd spin up fresh Chrome profiles, forcing you to re-login everywhere 💀. Or you'd debug manually in DevTools, spot a busted network request, and think "damn, wish my AI could just see this." Pain city. This ships in Chrome M144 (beta now) so agents reuse your live session—logged-in sites, selected elements, active traces. Seamless handoff from human to AI debugging. Ohhhhh moment unlocked ✅.

Big Picture: Where It Fits 👇

OLD FLOW ❌                  NEW FLOW ✅
═══════════                  ═════════
Agent ─────► New Profile    Agent ─────► YOUR Live Chrome
             (Re-login hell)              (Reuse session + DevTools)
DevTools ───┼── Manual only              DevTools ───┼── AI takeover
             │                            │
             ▼                            ▼
     Stuck switching!                   Hybrid power! 🚀
  • Chrome DevTools MCP: Server bridges AI agents to DevTools protocols.
  • New trick: --autoConnect hooks into running Chrome (not just fresh ones).
  • Fits with existing: Remote ports, temp profiles—now + live sessions.

How It Works: Step-by-Step Mechanics ⚙️

1️⃣ Enable remote debugging (Chrome >=144):

  • Hit chrome://inspect#remote-debugging.
  • Flip the switch in the dialog. (One-time setup.)
┌─────────────────────────────┐
│ chrome://inspect            │
│ #remote-debugging           │
│  │ Enable remote debugging? │  ← Click YES
│  └──────────────────────────┘
└─────────────────────────────┘

2️⃣ Fire up MCP server with autoConnect:

  • Example for gemini-cli config: 
    {
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": ["chrome-devtools-mcp@latest", "--autoConnect", "--channel=beta"]
    }
  }
}
  • --channel=beta till stable drops.

3️⃣ Permission dance:

  • Agent asks → Chrome pops dialog: "Allow remote debug?"
  • Click Allow → "Chrome is being controlled..." banner shows.
  • Boom, agent accesses your session.

4️⃣ AI in action:

  • Prompt: "Check performance of developers.chrome.com"
  • Agent opens site, runs trace—in your logged-in Chrome.
  • Or: Select element/network in DevTools → Tell agent "Fix this crap."
Your DevTools ──► Select Node/Request ──► Agent Investigates
     │
     └─ MCP Server ──► Remote Debug Port ──► Live Session ✅

Details + Gotchas (Don't Skip These) 😏

  • Security: Dialog every time, plus banner. No sneaky malware vibes.
  • Multi-instance? Still works—isolates via profiles if needed.
  • Beta only: --channel=beta required now. Stable soon™.
  • Full docs: GitHub README.
  • Future drip: More DevTools panels (Console? Sources?) coming. Stay tuned 👀.

TL;DR / BURN THIS IN 🎯

  • Why: Ditch re-logins, blend manual + AI debugging.
  • Do: Enable chrome://inspect#remote-debugging → --autoConnect → Allow → Profit.
    You tracking, fam? This flips workflows—test it, your brain will explode 🤯.

Original article

← All notes