什么是 BrowserTools MCP？
BrowserTools MCP 是一个连接您的浏览器和 AI 驱动的应用程序或编辑器的系统。通过利用 Chrome 扩展、本地 NodeJS 服务器和 MCP 服务器，它为语言模型和编码代理提供访问浏览器日志、DOM 细节、屏幕截图、网络请求的能力，并进行无障碍性、性能、SEO 和最佳实践的自动化审计。它完全在您的机器上运行，以保护隐私。
如何配置
- 安装 Chrome 扩展: 从 发布页面 下载并添加 BrowserTools MCP Chrome 扩展到您的浏览器。
- 设置 MCP 服务器: 在您的 IDE 或 MCP 兼容客户端中运行:
npx @agentdeskai/browser-tools-mcp@latest - 运行本地 Node 服务器: 打开一个独立的终端并执行:
npx @agentdeskai/browser-tools-server@latest - 启用扩展面板: 打开 Chrome DevTools，导航到 BrowserToolsMCP 面板，确保它处于活动状态。
- 检查连接性: 确保只打开一个 DevTools 面板，如果有必要，重新启动浏览器和服务器以排除故障。
- 配置选项: 使用扩展的选项设置屏幕截图文件夹、令牌/截断限制以及隐私偏好。
如何使用
- 配置完成且所有组件正在运行时，使用您的 MCP 兼容编辑器或代理（如 Cursor）来触发审计、捕获日志、屏幕截图或与页面元素交互。
- 常见用途包括请求 AI 代理进行无障碍性审计、性能分析、SEO 审查或调试代码——直接针对您浏览器中当前打开的网页。
- 结果将在您的 IDE 或代理环境中显示，实时来源于您的浏览器会话，并可以使用自然语言或函数调用来提示。
主要特点
- 对浏览器日志、网络活动和屏幕截图的无缝实时访问，适用于 AI 工具。
- 使用 Lighthouse 集成进行无障碍（WCAG）、性能、SEO、最佳实践和 NextJS 特定内容的自动化审计。
- 本地优先: 所有浏览器数据在您自己的机器上处理和存储——无信息发送给第三方。
- 调试器和审计模式，能通过一个命令协调一系列深入检查。
- 适合代理工作流程的结构化 JSON 结果。
- 灵活的配置和强大的跨平台连接性。
- 通过扩展面板一键管理日志和屏幕截图。
使用案例
- 自动化无障碍性验证: 确保您团队构建的每个页面都符合无障碍性标准，通过编程在开发过程中运行审计。
- 性能调优: 在发布代码之前检测瓶颈和未优化资源，并在您的 IDE 中提供可行的建议。
- SEO 和最佳实践分析: 即时审查页面 SEO 和代码最佳实践，以最大化搜索可见性和网络健康。
- 浏览器调试: 在测试用例或错误再现期间捕获日志、网络跟踪和屏幕截图，并分享丰富的上下文报告。
- 持续代码质量: 通过在 MCP 兼容工具中编写自动检查，将审计整合到 CI/CD 过程中。
常见问题
问：BrowserTools MCP 会将任何浏览器数据发送到外部服务器吗？
不会。所有日志、屏幕截图和诊断数据都存储在本地，绝不会传输到第三方服务。隐私和安全得到了严格维护。
问：我可以与 BrowserTools MCP 一起使用哪些 AI 编辑器或代理？
任何支持模型上下文协议 (MCP) 的编辑器或工具，例如 Cursor、Claude Desktop、Zed 或 Cline，都可以利用 BrowserTools MCP 的能力。
问：我遇到了连接问题——我应该检查什么？
首先，确保 NodeJS 服务器和 MCP 服务器都在运行，并且只有一个 Chrome DevTools 面板处于活动状态。如果问题仍然存在，请彻底关闭并重启 Chrome 和两个服务器，然后重新打开 DevTools。