Chrome DevTools MCP: Debug Your Browser with AI Agents

If you have been using Claude, Copilot, or any MCP-compatible AI tool for debugging frontend code, the usual workflow is tedious: copy an error from DevTools, paste it into your chat, describe what you were doing, wait for a suggestion, try it, repeat. Chrome DevTools MCP cuts most of that out.

The server connects your AI agent directly to a running Chrome session through the Chrome DevTools Protocol. The agent can inspect what DevTools can see — without you having to manually relay any of it.

What it can do

• Performance analysis — agents can run traces and evaluate page performance directly from the Timeline/Performance panel data
• Network inspection — agents can see HTTP requests, response headers, and payloads from the Network panel
• Element inspection — agents can analyze selected DOM elements from the Elements panel
• Live session reuse — connects to your existing Chrome session, so agents inherit your login state, cookies, and local data

The live session reuse is the practically important part. Debugging an authenticated page usually means either giving your agent credentials or manually extracting the relevant state. With DevTools MCP, the agent just connects to the session you already have open.

Setup

The server is distributed as an npm package. Add it to your MCP client config:

For Claude Desktop

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

For gemini-cli or other MCP clients

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

The --autoConnect flag tells the server to find and connect to a running Chrome instance automatically. Without it, you need to configure a remote debug port manually.

Manual connection (if autoConnect doesn't work)

Launch Chrome with remote debugging enabled:

# macOS
/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome \
  --remote-debugging-port=9222

# Linux
google-chrome --remote-debugging-port=9222

# Windows
chrome.exe --remote-debugging-port=9222

Then configure the MCP server with the port:

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

Security model

When an agent requests access to your browser session, Chrome shows a permission dialog. You have to explicitly grant it. The browser also displays a persistent banner: "Chrome is being controlled by automated test software" — so you always know when an agent has access.

The server only exposes what DevTools can see. It cannot access your filesystem, execute arbitrary JavaScript (in the current version), or do anything beyond what the DevTools Protocol allows.

Practical use cases

Debugging a slow page

Instead of: record a performance trace, export it, paste it into your AI chat and describe what you're seeing...

You say: "The checkout page is slow, especially on mobile. Look at the performance trace for the current tab and tell me what's taking the longest."

The agent connects, reads the trace data, and gives you a direct answer about what is actually happening.

Network debugging on an authenticated endpoint

You're logged in, an API call is failing, and you need to understand why. The agent can see the request, the response headers, and the response body from the Network panel — including the auth headers your session already has.

Inspecting a tricky DOM state

A component looks wrong in a specific state that's hard to reproduce. You get it to that state manually, then ask the agent to look at the selected element and explain what's off.

Limitations (as of March 2026)

• Read-only — the agent can inspect but not modify the page (no clicking, no form filling in the current release)
• Panel coverage is still expanding — Performance, Network, and Elements are the primary focus; Console and Sources access is limited
• Requires Chrome (not Chromium, Edge, or other Blink browsers — though Edge support may come)
• npx installs a fresh copy each time; pin a version in production use (chrome-devtools-mcp@0.x.x)

How it fits into the MCP ecosystem

Chrome DevTools MCP is not the first browser automation MCP. Playwright MCP and Puppeteer MCP both let AI agents control browsers — but they launch new browser instances with fresh profiles. DevTools MCP is different in that it connects to your existing session.

The practical difference: if your use case is scripting browser actions (fill a form, click a button, scrape a page), Playwright MCP is the right tool. If your use case is debugging something in a session you already have open, DevTools MCP is a much better fit.

Tool	Browser state	Best for
Chrome DevTools MCP	Your existing session	Debugging live pages
Playwright MCP	Fresh isolated instance	Scripting / automation
Puppeteer MCP	Fresh isolated instance	Scripting / scraping

Where to find it

• Official Chrome DevTools blog post
• npm: chrome-devtools-mcp
• Also listed on webmcplist.com — a directory of Web MCP servers