browser-tools-mcp这个工具提供了多个功能:
- 获取控制台日志(Console log)
- 网络请求监控(Network monitoring)
- 截图功能(Screenshot capture)
- 元素选择(Element selection)
- 浏览器状态分析(Browser state analysis)
- 可访问性和性能审计(Accessibility and performance audits)sho
首先打开谷歌浏览器拓展管理
点击加载已解压的扩展程序,选择chrome-extension
就是这个
然后重启一下谷歌浏览器
检查环境
node -v
npm -v
在终端安装
npx @agentdeskai/browser-tools-mcp@1.2.0
npx @agentdeskai/browser-tools-server@1.2.0
需要按照正确的顺序启动两个服务:
首先启动 Browser Tools Server:
npx @agentdeskai/browser-tools-server
然后在另一个终端启动 MCP server:
npx @agentdeskai/browser-tools-mcp
在cursor里面设置
名字填写browser-tools-mcp,其中window 环境下 Command 配置是
cmd /c npx -y @agentdeskai/browser-tools-mcp@1.2.0
效果如下:
注意:
浏览器显示调试信息才算成功
还有
如果安装报错,大概是防火墙的问题,比如
Attempting initial server discovery on startup...
Starting server discovery process
Will try hosts: 127.0.0.1, 127.0.0.1, localhost
Will try ports: 3025, 3026, 3027, 3028, 3029, 3030, 3031, 3032, 3033, 3034, 3035
Checking 127.0.0.1:3025...
Error checking 127.0.0.1:3025: fetch failed
Checking 127.0.0.1:3026...
Error checking 127.0.0.1:3026: fetch failed
Checking 127.0.0.1:3027...
Error checking 127.0.0.1:3027: fetch failed
Checking 127.0.0.1:3028...
Error checking 127.0.0.1:3028: fetch failed
Checking 127.0.0.1:3029...
将3025到3030的端口允许本机连接即可