铬检查器MCP
这给了代理人 DOM元素, CSS规则,以及 计算样式,工具 chrome-devtools-mcp 不提供。
对DevTools MCP的重新设计旨在使代理能够接管DevTools进行复杂的调试。欢迎提出任何建议。目前的方向包括:
- Agent人机工程学:直接建立在 Chrome DevTools协议(CDP),为代理需求而非库约束进行设计
- 可扩展性:让用户(和代理?)更容易破解和定制自己的工具集
演示
https://github.com/user-attachments/assets/c880a415-f35a-4fc4-93c4-001030116b90
安装
- 从安装扩展 发布
- 将以下配置添加到MCP客户端:
{
"mcpServers": {
"chrome-inspector": {
"command": "npx",
"args": ["-y", "chrome-inspector-mcp@latest"]
}
}
}工具
TODO
- 控制台js和消息
- 设备仿真
指南
- 泛化:更喜欢采用程序化表达。让模型编码。
- 过滤:当原始输出可能很大时,提供内置的过滤逻辑。
运作原理
Chrome启动时,扩展程序的后台工作程序每隔几秒钟轮询一个特定端口。当MCP服务器从它们连接的地址启动时。通过manifest v3,一个后台工作程序提供一个配置文件,因此MCP服务器可以访问其所有选项卡(TODO:过滤)。
目前,该扩展处理所有DevTools逻辑,MCP服务器只是一个中继。然而Chrome扩展程序有很多限制,所以我计划转发 chrome API并保持MCP的Nodejs运行时中的内容 剧作家麦克的设计.
