Chrome Inspector MCP

This gives agents DOM Elements, CSS Rules, and Computed Style, the tools that chrome-devtools-mcp doesn't provide.

This redesign of DevTools MCP aims to enable agents to take over DevTools for complex debugging. Any suggestions are welcomed. Current directions includes:

Agent Ergonomics: Building directly on Chrome DevTools Protocol (CDP), designing for agent needs, not library constraints
Extensibility: Making it easy for users (and agents?) to hack and customize their own toolsets

Demo

https://github.com/user-attachments/assets/c880a415-f35a-4fc4-93c4-001030116b90

Installation

Install the extension from Releases
Add the following config to your MCP client:

{
  "mcpServers": {
    "chrome-inspector": {
      "command": "npx",
      "args": ["-y", "chrome-inspector-mcp@latest"]
    }
  }
}

Tools

TODO

console js & message
device emulation

Guidelines

Generalization: Prefer taking programmatic expression. Let models code.
Filtering: When raw output could be large, provide built-in filtering logic.

How it works

When Chrome starts, the extension's background worker polls a specific port every few seconds. When the MCP server starts at the address they connect. By manifest v3, one background worker serves one profile, so the MCP server can access all its tabs (TODO: filtering).

Currently, the extension handles all DevTools logic and the MCP server is just a relay. Yet Chrome extension has many restrictions, so I planed to forward chrome API and keep things in MCP's Nodejs runtime following playwright-mcp's design.

The inspection logic is implemented in chrome-inspector, a programming interface wrapping CDP to DOM methods.

chrome-inspector-mcp

Quick Install