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

综合介绍

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

功能列表

• 实时捕获浏览器控制台日志，定位代码问题。
• 监控网络请求，查看请求状态和错误。
• 截取当前网页屏幕，保存或粘贴到编辑器。
• 分析网页 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，未来可能扩展。