BrowserTools MCP-浏览器调试与交互

1- BrowserTools MCP 本地调试与交互全流程指南

本文将手把手教你如何在本地环境下高效安装、配置和使用 BrowserTools MCP，助力 AI 代码编辑器与浏览器的深度联动。适合开发者、AI 工具用户。

1.1- 功能简介

BrowserTools 为 AI 代码编辑器和代理提供了监控和与浏览器交互的能力，主要包括：

  • 自动获取控制台日志和错误
  • 访问网页发起的 API 网络请求/响应
  • 截图功能（可自动粘贴到 Cursor）
  • 获取当前页面选中 UI 元素

1.2- 环境准备

1.2.1- 系统要求

  • Node.js（建议 20.x 及以上）
  • Google Chrome 或 Chromium 内核浏览器
  • MCP 客户端（如 Cursor、Windsurf、RooCode、Cline、Continue、Zed、Claude Desktop）

本文以 Cursor 为例

1.2.2- 依赖安装

1.3- 插件获取与安装

1.3.1- 下载插件

  1. 点击此处下载 Chrome 扩展程序（请确保下载后解压）

1.3.2- 安装插件

  1. 打开 Chrome，进入 " 扩展程序管理 " 页面
  2. 启用 " 开发者模式 "
  3. 点击 " 加载已解压的扩展程序 "，选择解压后的插件文件夹
  4. 成功后，扩展列表中应出现 BrowserToolsMCP

如遇无法加载，检查是否完整解压，或浏览器版本是否过低

1.4- MCP 服务器配置

1.4.1- 在 Cursor 中添加 MCP 服务器

  1. 打开 Cursor 设置
  2. 进入 " 功能 " 页，找到 MCP 服务器，点击 " 添加新的 MCP 服务器 "
  3. 填写如下配置（以 Mac 为例，Windows 仅端口和路径可能不同）：
{
  "mcpServers": {
    "browser-tools": {
      "command": "npx",
      "args": [
        "@agentdeskai/browser-tools-mcp@latest"
      ],
      "env": {
        "BROWSER_TOOLS_HOST": "127.0.0.1",
        "BROWSER_TOOLS_PORT": "3025"
      }
    }
  }
}
  1. 保存后，MCP 页面会显示该服务，初始为灰色（未启动）

1.5- 启动服务

务必按顺序操作，且两个终端均需保持运行

1.5.1- 启动 BrowserTools 服务器

在 Cursor 新建终端，依次执行：

npx @agentdeskai/browser-tools-server

另开一个终端，执行：

npx @agentdeskai/browser-tools-mcp

每次重启 Cursor 后需重复上述操作

1.6- 启用插件与联动

1.6.1- 打开 Chrome 开发者工具

  • 右键网页 → 检查，打开开发者工具
  • 此时日志、网络等信息将可被 MCP 客户端访问

1.6.2- 检查连接状态

  • Cursor MCP 页面应显示绿色小圆点，表示连接正常
  • 若为灰色，检查服务是否均已启动，端口是否被占用

1.7- 常见问题与排查

1.7.1- 端口冲突

  • 默认端口为 3025，如被占用可在配置中修改

1.7.2- 插件未生效

  • 检查 Chrome 是否启用插件，或尝试重启浏览器

1.7.3- MCP 服务未连接

  • 确认两个终端均在运行，且无报错
  • 检查防火墙或安全软件是否拦截

1.7.4- 日志/网络信息未同步

  • 确认已打开 Chrome 开发者工具
  • 检查 MCP 客户端设置

1.8- 高级用法与建议

  • 可将启动命令写入脚本，一键启动所有服务
  • 推荐将端口、路径等参数写入环境变量，便于多端适配
  • 结合 Cursor 的自动化能力，实现更高效的调试与开发

1.9- 视频教程

如需更深入原理解析，参考 MCP从入门到精通 付费文档

恭喜，至此你已完成 BrowserTools MCP 的本地部署与联动配置！

如有疑问，欢迎在评论区留言交流。