BrowserTools 安装与配置总结

1. 安装步骤

1.1 环境准备

• 确保您的计算机上已安装 Node.js。
• 使用 Google Chrome 或基于 Chromium 的浏览器。
• 安装 MCP 客户端应用程序（如 Cursor、Windsurf、RooCode 等）。

1.2 下载 Chrome 扩展

• 访问 BrowserTools MCP GitHub 下载扩展。
• 或者直接从 Chrome 扩展市场下载（目前待批准）。

1.3 安装 Chrome 扩展

1. 打开 Chrome 浏览器，进入“管理扩展”窗口。
2. 启用“开发者模式”。
3. 点击“加载已解压的扩展”，选择下载的扩展文件夹。

1.4 配置 BrowserTools MCP 服务器

1. 打开 Cursor 设置。

2. 在“功能”中，找到“MCP 服务器”，点击“添加新 MCP 服务器”。
   

3. 输入json

   • 注意：在 Windows 上，您可以使用全路径cmd命令来确保正确执行：

{
  "mcpServers": {
    "browser-tools": {
      "command": "C:\\Windows\\System32\\cmd.exe",
      "args": [
        "/c",
        "npx",
        "-y",
        "@agentdeskai/browser-tools-mcp@1.2.0"
      ],
      "enabled": true
    }
  }
}

观察下图部分是否有绿色亮点，有的话则部署成功。

1.5 运行 BrowserTools 服务器

• 在终端中运行以下命令以启动 BrowserTools 服务器：

  npx @agentdeskai/browser-tools-server@1.2.0
  

  • 注意：确保没有其他进程占用端口 3025。

1.6 打开 Chrome 开发者控制台

• 右键单击任何网页，选择“检查”以打开 Chrome 开发者工具。
• 在 BrowserTools 面板中，您可以手动捕获屏幕截图、定义保存路径、清除日志等。

1.7 测试

直接询问cursor 你能获取控制台内容吗 ？将自动调用mcp工具。