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的端口允许本机连接即可

    Logo

    欢迎加入 MCP 技术社区!与志同道合者携手前行,一同解锁 MCP 技术的无限可能!

    更多推荐