Skip to content

Chrome DevTools MCP

Chrome DevTools MCP exposes the browser's debugging interface to agents. Performance profiling, network inspection, console access, JavaScript evaluation. The same tools developers use in the DevTools panel, available through MCP.

Inspection vs Automation

DevTools MCP answers questions about what's happening in the browser. A form submits but nothing happens. The network tab shows a 403. That's the kind of question DevTools answers.

The server connects via Chrome DevTools Protocol (CDP), the same interface that powers the DevTools panel. It can launch a new browser or attach to an existing one.

┌─────────────┐       ┌──────────────────┐       ┌─────────────┐
│    Agent    │──────▶│ chrome-devtools  │──CDP─▶│   Chrome    │
│             │◀──────│      MCP         │◀──────│  (port 9222)│
└─────────────┘       └──────────────────┘       └─────────────┘

Playwright clicks buttons. DevTools reads the network log to see what those clicks triggered.

What Agents Can Observe

Network traffic includes headers, status codes, response bodies, and timing. When an API call fails, the agent sees the 401 response and the missing auth header.

Console output captures logs, warnings, errors, and stack traces from JavaScript execution.

Performance metrics show First Contentful Paint, Time to Interactive, and resource loading waterfalls.

DOM state gives current page content for analysis, though without the element references that Playwright provides.

Debugging Workflow

An agent investigating a slow page load might observe:

  • First Contentful Paint at 3.2s (target: <1s)
  • A 2.1s API call blocking render
  • An unoptimized 2.4MB image
  • A blocked analytics script throwing console errors

Each finding comes with specific data. The agent reports what the numbers show, not guesses from reading source code.

For silent failures (forms that don't submit, features that break), network inspection reveals the underlying cause. A 403 response with "CSRF token missing" tells the agent exactly what to fix.

Combining with Playwright

The two servers complement each other. Playwright automates navigation and interaction. DevTools analyzes what happened as a result.

A verification workflow might use Playwright to fill and submit a form, then DevTools to confirm the resulting API call succeeded with the expected payload.

Limitations

DevTools connects to one page at a time, and returns raw data rather than actionable element references. Use it for inspection, not interaction.

This server targets Chrome/Chromium only. Firefox uses a different debugging protocol.

External Resources