How to Use Chrome DevTools MCP with AI Coding Agents — A Step-by-Step Tutorial | CoddyKit Blog

Q: What Is MCP?

The Model Context Protocol (MCP) is an open standard that lets AI models interact with external tools through a unified interface. Think of it as USB-C for AI: one port, many devices. Chrome DevTools MCP exposes browser debugging capabilities through this protocol, so any MCP-compatible AI agent can "drive" Chrome DevTools programmatically. The key insight: instead of writing Selenium or Puppeteer scripts, you tell your AI agent what you want — "check if the login button is visible" or "find the failing API call" — and the agent uses DevTools to figure it out.

A step-by-step tutorial on connecting Chrome DevTools to AI coding agents via the Model Context Protocol (MCP), enabling natural-language browser debugging, network inspection, and automated testing.

What Is Chrome DevTools MCP and Why Should You Care?

If you have been watching the AI coding-agent space lately, one repository has been quietly climbing to the top: ChromeDevTools/chrome-devtools-mcp. With over 40,000 stars on GitHub, it is one of the fastest-growing developer tools of 2026. But what exactly is it, and how can you put it to work today?

In this tutorial, you will learn how to connect Chrome DevTools to popular AI coding agents (Claude Code, Cursor, OpenClaw, and others) through the Model Context Protocol (MCP), giving your AI assistant the ability to inspect pages, run JavaScript, analyze network requests, and debug — all through natural language.

What Is MCP?

The Model Context Protocol (MCP) is an open standard that lets AI models interact with external tools through a unified interface. Think of it as USB-C for AI: one port, many devices. Chrome DevTools MCP exposes browser debugging capabilities through this protocol, so any MCP-compatible AI agent can "drive" Chrome DevTools programmatically.

The key insight: instead of writing Selenium or Puppeteer scripts, you tell your AI agent what you want — "check if the login button is visible" or "find the failing API call" — and the agent uses DevTools to figure it out.

Prerequisites

Node.js 18+ installed
Google Chrome or Chromium installed
An MCP-compatible AI coding agent (Claude Code, Cursor, Cline, or similar)
Basic familiarity with browser DevTools

Step 1: Install the Chrome DevTools MCP Server

The MCP server is distributed via npm. Install it globally or use npx for a one-shot run:

# Using npx (recommended — no global install needed)
npx @chrome/devtools-mcp

# Or install globally
npm install -g @chrome/devtools-mcp

The server starts a WebSocket connection to Chrome's DevTools Protocol (CDP) and exposes capabilities through the MCP standard interface.

Step 2: Launch Chrome with Remote Debugging Enabled

Chrome must be started with remote debugging turned on so the MCP server can connect:

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

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

# Windows
"C:\Program Files\Google\Chrome\Application\chrome.exe" --remote-debugging-port=9222

Verify the connection by opening http://localhost:9222/json in your browser — you should see a JSON list of open tabs.

Step 3: Configure Your AI Agent

Add the MCP server to your AI agent's configuration. Here is how it looks for different tools:

Claude Code (claude-code.json)

{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": ["@chrome/devtools-mcp"],
      "env": {
        "CHROME_DEBUG_PORT": "9222"
      }
    }
  }
}

Cursor (Settings → MCP Servers)

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

OpenClaw / Custom MCP Config

mcp:
  servers:
    chrome-devtools:
      cmd: npx
      args: ["@chrome/devtools-mcp"]
      env:
        CHROME_DEBUG_PORT: "9222"

Step 4: Verify the Connection

Once configured, restart your AI agent. It should auto-discover the Chrome DevTools MCP server. Test it with a simple query:

"Open https://example.com and tell me what the page title is."

If everything is wired up correctly, the agent will:

Connect to Chrome via CDP on port 9222
Navigate to the URL
Read the page title from the DOM
Report it back to you

Step 5: Practical Use Cases

Now the fun part — here are real things you can do:

Debug Network Failures

"Check the network tab for any failed requests on the current page.
Show me the status code and response for each failure."

Inspect Page Elements

"Find all buttons on the page that have the class 'btn-primary'.
Tell me their text content and whether they are visible."

Run JavaScript in Context

"Execute this in the console: document.querySelectorAll('a').length
and tell me how many links are on the page."

Performance Audit

"Run a performance audit on this page and summarize the Lighthouse
score, especially Core Web Vitals."

Automate Repetitive Checks

"Go through each page in my sitemap and check if the meta description
is under 160 characters. List any that are too long."

Available Capabilities

Capability	Description
`navigate`	Open a URL in a new or existing tab
`screenshot`	Capture a full-page or viewport screenshot
`evaluate`	Run JavaScript in the page context
`network`	Inspect network requests and responses
`dom`	Query and inspect DOM elements
`console`	Read browser console logs
`performance`	Run audits and measure metrics
`storage`	Inspect cookies, localStorage, sessionStorage

Tips and Best Practices

Use a dedicated Chrome profile for debugging to avoid mixing personal browsing with agent sessions: --user-data-dir=/tmp/chrome-debug-profile
Close unused tabs — the MCP server connects to all open tabs, and too many can slow things down.
Combine with other MCP servers — pair Chrome DevTools MCP with filesystem or database MCP servers for end-to-end debugging workflows.
Be specific in prompts — instead of "check the page", say "check if the form submits without errors and show me the response".
Screenshot first — when debugging visual issues, ask for a screenshot before diving into DOM inspection. It gives the AI agent visual context.

Security Considerations

Remember: enabling remote debugging gives any process on your machine access to Chrome via port 9222. Best practices:

Only bind to localhost (default behavior)
Do not expose port 9222 to your network or the internet
Use a separate Chrome profile for sensitive work
Close the debugging Chrome instance when done

Wrapping Up

Chrome DevTools MCP represents a shift in how developers interact with browsers. Instead of writing automation scripts from scratch, you describe what you want in natural language and let an AI agent figure out the DevTools calls. Whether you are debugging a production issue, testing a UI change, or auditing performance, this setup saves time and reduces boilerplate.

The repository at github.com/ChromeDevTools/chrome-devtools-mcp is actively maintained by the Chrome team, so expect new capabilities to land regularly. Give it a try on your next debugging session — your future self will thank you.