AI个人学习
和实操指南
讯飞绘镜

BrowserTools MCP:实时监控浏览器活动的MCP服务

综合介绍

BrowserTools MCP 是一个开源项目,由 AgentDeskAI 团队开发。它通过 Chrome 扩展和 Node.js 服务,让 AI 能实时监控浏览器活动,包括日志、网络请求和屏幕截图,还能分析网页性能、SEO 和无障碍访问。项目基于 Anthropic 的 MCP 协议,适合与 Cursor 等支持 MCP 的编辑器配合使用。最新版本 1.2.0 于 2025 年 2 月发布,GitHub 上已有 2400+ 星标。它简单实用,特别适合开发者调试网页或优化网站,所有数据仅本地存储,不涉及第三方服务。

BrowserTools MCP:实时监控浏览器活动的MCP服务-1


 

功能列表

  • 实时捕获浏览器控制台日志,定位代码问题。
  • 监控网络请求,查看请求状态和错误。
  • 截取当前网页屏幕,保存或粘贴到编辑器。
  • 分析网页 DOM 元素,提取具体数据。
  • 执行性能审计,发现加载慢的原因。
  • 检查 SEO 优化,提供改进建议。
  • 运行无障碍访问审计,符合 WCAG 标准。
  • 支持 NextJS 项目审计,优化框架问题。
  • 提供调试模式,按顺序运行所有调试工具。
  • 提供审计模式,按顺序运行所有审计工具。

 

使用帮助

BrowserTools MCP 需要三部分配合运行:Chrome 扩展、Node 服务端和 MCP 服务端。以下是详细安装和使用指南,确保你能快速上手。

安装流程

  1. 安装 Chrome 扩展
    • 从 https://github.com/AgentDeskAI/browser-tools-mcp/releases/download/v1.2.0/BrowserTools-1.2.0-extension.zip 下载扩展。
    • 解压 ZIP 文件到本地文件夹。
    • 打开 Chrome,进入 chrome://extensions/
    • 开启“开发者模式”,点击“加载已解压的扩展”。
    • 选择解压后的文件夹,确认扩展出现在列表中。
  2. 运行 Node 服务端
    • 确保电脑安装 Node.js(建议 18+)。
    • 打开终端,运行:
      npx @agentdeskai/browser-tools-server@latest
      
    • 看到“Server running on port 3025”表示启动成功。
    • 如端口冲突,可关闭占用进程后重试。
  3. 配置 MCP 服务端(以 Cursor 为例)
    • 打开 Cursor,进入“设置 > MCP”。
    • 点击“添加新的全局 MCP 服务”。
    • 编辑 ~/.cursor/mcp.json,添加:
      {
      "mcpServers": {
      "browser-tools-mcp": {
      "command": "npx",
      "args": ["@agentdeskai/browser-tools-mcp@latest"]
      }
      }
      }
      
    • 保存后刷新设置,绿色圆点表示连接成功。

操作主要功能

  1. 监控控制台日志
    • 打开目标网页,按 F12 进入开发者工具。
    • 在“BrowserToolsMCP”面板点击“Connect”。
    • 日志实时显示,可点击“Save Logs”保存到本地。
  2. 捕获网络请求
    • 在“Network”选项卡查看请求详情。
    • 在 Cursor 输入 mcp_getNetworkLogs 获取所有请求,或 mcp_getNetworkErrors 查看错误请求。
  3. 截取屏幕
    • 在扩展面板设置保存路径(默认 /mcp-screenshots)。
    • 点击“Take Screenshot”保存截图。
    • 启用“Allow Auto-Paste into Cursor”后,聚焦 Cursor 输入框,截图自动粘贴。
  4. 运行审计工具
    • 确保扩展启用且有活跃网页。
    • 在 Cursor 输入以下命令:
      • runAccessibilityAudit:检查无障碍访问(WCAG)。
      • runPerformanceAudit:分析性能瓶颈。
      • runSEOAudit:优化 SEO。
      • runBestPracticesAudit:检查最佳实践。
      • runNextJSAudit:审计 NextJS 项目。
      • runAuditMode:顺序运行所有审计。
      • runDebuggerMode:顺序运行所有调试工具。
    • 结果以 JSON 格式返回,包含分数和问题详情。
  5. 调试模式与审计模式
    • 输入 runDebuggerMode,按顺序运行调试工具,帮助定位问题。
    • 输入 runAuditMode,按顺序运行审计工具,检测所有优化点。
    • NextJS 项目会自动识别并额外运行相关审计。

注意事项

  • 只开一个开发者工具窗口,多开可能导致数据混乱。
  • 重启服务或刷新页面会清空日志,建议提前保存。
  • 遇到问题可联系 @tedx_ai(X 平台)或查看 https://browsertools.agentdesk.ai/ 文档。

这些步骤能让你充分利用 BrowserTools MCP 的强大功能,提升网页开发效率。

 

应用场景

  1. 网页调试
    开发者用它监控日志和网络,快速找到代码错误。
  2. 网站优化
    借助审计工具,分析性能和 SEO,改进用户体验。
  3. AI 开发支持
    AI 开发者结合 Cursor,利用实时数据优化智能应用。

 

QA

  1. 为什么日志不显示?
    确认扩展和服务端已连接,检查是否多开了开发者工具窗口。
  2. 审计结果在哪里查看?
    在 Cursor 等 MCP 客户端中运行命令后,结果以 JSON 格式返回。
  3. 支持其他浏览器吗?
    目前仅支持 Chrome,未来可能扩展。
未经允许不得转载:首席AI分享圈 » BrowserTools MCP:实时监控浏览器活动的MCP服务
zh_CN简体中文