Chrome Inspector MCP

此功能提供给代理DOM元素、CSS规则和计算样式，这些是chrome-devtools-mcp未提供的工具。

此次对DevTools MCP的重新设计旨在使代理能够接管DevTools进行复杂调试。欢迎提出任何建议。当前的方向包括：

• 代理人体工程学：直接基于Chrome DevTools协议(CDP)构建，设计时考虑的是代理的需求，而不是库的限制。
• 可扩展性：让用户（和代理？）轻松地修改和定制自己的工具集。

演示

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

安装

1. 从发布页面安装扩展程序。

2. 在您的MCP客户端中添加以下配置：

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

工具

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

待办事项

• 控制台JS及消息
• 设备模拟

指南

1. 泛化：优先采用程序表达方式。让模型编写代码。
2. 过滤：当原始输出可能很大时，提供内置的过滤逻辑。

工作原理

当Chrome启动时，扩展程序的后台工作者每隔几秒轮询一个特定端口。当MCP服务器在它们连接的地址启动时。根据manifest v3，一个后台工作者服务于一个配置文件，因此MCP服务器可以访问其所有标签页（待办事项：过滤）。

目前，扩展程序处理所有的DevTools逻辑，而MCP服务器只是一个中继器。然而，Chrome扩展有很多限制，所以计划转发chromeAPI，并按照playwright-mcp的设计，将所有内容保留在MCP的Node.js运行时中。

检查逻辑实现在chrome-inspector，这是一个封装了CDP到DOM方法的编程接口。