全站最全!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 服务,提升你的开发效率!快来体验吧!

相关推荐
用户3521802454758 小时前
MCP极简入门:node+idea运行简单的MCP服务和MCP客户端
node.js·ai编程
每天开心10 小时前
一文教你掌握事件机制
前端·javascript·ai编程
每天开心11 小时前
深入理解 CSS 选择器:从基础到高级
css·html·ai编程
俞乾12 小时前
Context Engineering(上下文工程)是 AI Agent 成功的关键吗?
openai·ai编程
kingchen13 小时前
稳定的Claude Code渠道,白嫖100刀
ai编程
量子位13 小时前
“英伟达显卡就是一坨 ”!博主 6000 字檄文怒批:烧接口、缺单元、驱动变砖还威胁媒体
ai编程
运器12313 小时前
【一起来学AI大模型】算法核心:数组/哈希表/树/排序/动态规划(LeetCode精练)
开发语言·人工智能·python·算法·ai·散列表·ai编程
量子位13 小时前
谁是余家辉?“年薪 1 亿美元”AI 研究员,中科大少年班天才,吴永辉的嫡系弟子
aigc·ai编程
五更琉璃016 小时前
十分钟完全理解MCP
mcp
qiyue7717 小时前
AI编程专栏(一)- 评估AI编程工具对编程语言支持情况
前端·ai编程