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

1. Install the extension from Releases

2. Add the following config to your MCP client:

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

Tools

• getTabs
• selectTab
• getNodes
• getMatchedStyles
• getComputedStyle
• getOuterHTML

TODO

• console js & message
• device emulation

Guidelines

1. Generalization: Prefer taking programmatic expression. Let models code.

2. 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.