全站最全!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

    bash 复制代码
    git clone https://github.com/AgentDeskAI/browser-tools-mcp.git
  • 扩展文件位于 chrome-extension 目录下。

  1. 安装 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

      css 复制代码
      npx @agentdeskai/browser-tools-mcp@1.2.0
    • Windows 用户可运行 which npx 查找 NPX 路径。

  • 3d. 确认连接

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

  1. 运行 BrowserTools 服务器

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

bash

css 复制代码
npx @agentdeskai/browser-tools-server@1.2.0
  • 注意:服务器默认使用端口 3025,请确保该端口未被占用。
  1. 打开 Chrome 开发者工具

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

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

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

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

故障排查

如果遇到问题,别担心!以下是一些常见问题及解决方法:

  • 确认 MCP 服务器在 Cursor 中正确安装
  • 在新终端中运行 npx @agentdeskai/browser-tools-server@1.2.0

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

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

    bash

    javascript 复制代码
    tail -n 20 -F ~/Library/Application\ Support/Cursor/**/*MCP.log
  • 截图日志、服务器日志及 Chrome 扩展错误(如有),联系

    @tedx_ai

    (通过 X)或在 GitHub 提交 issue。


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

相关推荐
量子位9 小时前
拆箱开源版Coze:Agent核心三件套大公开,48小时揽下9K Star
agent·ai编程·coze
字节跳动终端技术9 小时前
豆包编程邀你来玩|一起来听「北大同学的 AI 玩学指南」
人工智能·ai编程·vibecoding
极客密码10 小时前
Cursor再见,隔壁Augment赠送的免费一个月650额度会员我用上了!
aigc·ai编程·cursor
老周聊大模型10 小时前
LangChain已死?不,是时候重新思考AI工程范式了
人工智能·langchain·mcp
量子位12 小时前
AI幻觉成WAIC首个关键词,Hinton敲响警钟,讯飞星火X1升级展示治理新突破
ai编程
中等生15 小时前
ReAct: 减少 LLM 幻觉,提升准确度
llm·openai·ai编程
Java陈序员15 小时前
轻松处理证件照!又一款 AI 证件照制作工具!
openai·ai编程·aiops
人生都在赌15 小时前
MCP生态全景:2025年最值得关注的AI工具集成现状深度调研
人工智能·ai编程·mcp
青梅主码15 小时前
Artificial Analysis《2025年上半年人工智能应用报告》Google、xAI、DeepSeek崛起,大模型洗牌
aigc·ai编程·deepseek
唯之为之16 小时前
如何快速无缝的从 vscode 转向AI编辑器 cursor、kiro、trae 等
vscode·ai编程