全站最全!BrowserTools MCP 服务快速入门与安装指南

BrowserTools MCP 服务快速入门与安装指南

juejin.cn/aicoding AI编程板块了解更多AI编程干货

BrowserTools 是一个创新工具，它将 AI 代码编辑器和代理直接嵌入到你的网页浏览器中，为开发者带来更高效的调试体验和无缝的工作流程。以下是如何安装和配置 BrowserTools 的完整指南。

快速入门

由@tedx_ai开发，BrowserTools 通过 MCP（Model Context Protocol）服务器工具，让 AI 代码编辑器和代理能够监控并与你的网页浏览器互动，提供安全、高效的开发支持。它赋予了以下功能：

• 查看控制台日志和错误
• 监控 XHR 网络请求与响应
• 截图功能（可选自动粘贴到 Cursor）
• 获取当前选中的 DOM 元素
• 通过 Lighthouse 运行 SEO、性能和代码质量扫描
• 执行 NextJS 专属 SEO 审计
• 进入"调试模式"，利用多种工具和提示修复 bug
• 进入"审计模式"，对 Web 应用进行全面检查

有了这些功能，你可以直接对支持 MCP 的 AI 代码编辑器（如 Cursor）说：

• "这个功能坏了，快进入调试模式！"
• "帮我把当前选中的元素改成 X、Y、Z！"
• "我要优化 SEO 和性能，进入审计模式！"
• "检查控制台和网络日志，看看哪里出错了！"
• "界面看起来不对，帮我截个图看看？"

前置要求

在安装之前，请确保满足以下条件：

• 机器上已安装 NodeJS
• 使用 Google Chrome 或基于 Chromium 的浏览器
• 安装支持 MCP 的客户端应用（如 Cursor、Windsurf、RooCode、Cline、Continue、Zed、Claude Desktop）
• 注意：MCP 协议专为 Anthropic 模型设计。如果使用 Cursor，请确保启用 Composer 代理并选择 Claude 3.5 Sonnet 模型。

安装步骤

1. 下载 Chrome 扩展

目前，官方 Chrome 扩展正在等待 Google 扩展商店的审批。在此之前，你可以手动下载扩展：

• 选项 1：从 GitHub 获取

  bash

  git clone https://github.com/AgentDeskAI/browser-tools-mcp.git

• 扩展文件位于 chrome-extension 目录下。

2. 安装 Chrome 扩展

按照以下步骤加载扩展：

• 2a. 打开"管理扩展" 打开 Chrome 的"管理扩展"页面**
• 2b. 启用"开发者模式"并点击"加载未打包的扩展"

• 2c. 选择之前下载的 chrome-extension 文件夹（确保已解压），点击"选择"
  完成后，你将在扩展列表中看到 BrowserToolsMCP。

3. 设置 BrowserTools MCP 工具

在你喜欢的 MCP 客户端中设置 BrowserTools MCP 服务器。以 Cursor 为例：

• 3a. 打开"Cursor 设置"

• 3b. 进入"功能"页面，找到"MCP 服务器"，点击"添加新 MCP 服务器"

• 3c. 配置服务器：

  • 名称：browser-tools

  • 类型：command

  • 命令（MacOS 示例）：

    bash

    npx @agentdeskai/[email protected]

  • Windows 用户可运行 which npx 查找 NPX 路径。

• 3d. 确认连接

  等待几秒或刷新几次，确保工具列表显示绿色圆点表示连接成功。如失败，检查命令是否正确。

4. 运行 BrowserTools 服务器

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

bash

npx @agentdeskai/[email protected]

• 注意：服务器默认使用端口 3025，请确保该端口未被占用。

5. 打开 Chrome 开发者工具

在任意网页右键点击"检查"，打开开发者工具。日志将通过 MCP 客户端获取。你还可以在 BrowserTools 面板中：

• 手动截图
• 设置截图保存路径（默认：Downloads/mcp-screenshots）
• 清除日志
• 调整日志大小限制

恭喜！你已成功安装并配置 BrowserTools！

查看快速入门指南 (#)以了解如何使用你的新 MCP 工具！

故障排查

如果遇到问题，别担心！以下是一些常见问题及解决方法：

• 确认 MCP 服务器在 Cursor 中正确安装

• 在新终端中运行 npx @agentdeskai/[email protected]

• 确保已安装 Chrome 扩展并在目标标签页打开开发者工具

• 如果仍无法解决，运行以下命令查看 Cursor MCP 日志：

  bash

  tail -n 20 -F ~/Library/Application\ Support/Cursor/**/*MCP.log

• 截图日志、服务器日志及 Chrome 扩展错误（如有），联系

  @tedx_ai

  （通过 X）或在 GitHub 提交 issue。

---

通过以上步骤，你将拥有一个强大的 BrowserTools MCP 服务，提升你的开发效率！快来体验吧！