扫码联系在线客服README
🚀 BrowserTools MCP
BrowserTools MCP 是一款强大的浏览器监控与交互工具，它借助 Anthropic 的模型上下文协议（MCP），让基于人工智能的应用程序能够通过 Chrome 扩展捕获和分析浏览器数据，使你的 AI 工具在浏览器交互方面的能力提升 10 倍。
🚀 快速开始
阅读我们的文档，获取完整的安装、快速入门和贡献指南。
🗺️ 路线图
查看我们的项目路线图：Github 路线图 / 项目看板
🌟 更新内容
v1.2.0 版本已发布！以下是本次更新的简要介绍：
- 现在可以在开发者工具面板中启用“允许自动粘贴到 Cursor”功能。截图将自动粘贴到 Cursor 中（请确保在 Cursor 中聚焦/点击代理输入字段，否则该功能将无法使用！）
- 通过 Lighthouse 集成了一套 SEO、性能、可访问性和最佳实践分析工具。
- 实现了一个用于改进 NextJS 应用程序 SEO 的特定提示。
- 添加了调试器模式，该工具按特定顺序执行所有调试工具，并附带一个用于改进推理的提示。
- 添加了审计模式，该工具按特定顺序执行所有审计工具。
- 解决了 Windows 连接问题。
- 通过主机/端口自动发现、自动重新连接和优雅关闭机制，改进了 BrowserTools 服务器、扩展程序和 MCP 服务器之间的网络连接。
- 增加了使用 Ctrl + C 更轻松退出 Browser Tools 服务器的功能。
请在你的 IDE / MCP 客户端中按以下方式更新版本：
npx @agentdeskai/browser-tools-mcp@1.2.0
同时，请在此处下载最新版本的 Chrome 扩展程序： v1.2.0 BrowserToolsMCP Chrome 扩展程序
之后，你可以按以下方式运行本地节点服务器：
npx @agentdeskai/browser-tools-server@1.2.0
请务必指定版本 1.2.0，因为 NPX 缓存可能会阻止你获取最新版本！每次更新时，你只需执行一次此操作。执行一次后，你将使用最新版本。
打开 Chrome 开发者工具后，日志将发送到你的服务器 🦾
如果你有任何问题或疑问，请随时创建问题工单！如果你有任何改进建议，也可以随时联系我们，或者创建带有增强标签的问题工单，也可以在 X 上的 @tedx_ai 联系我。
完整更新说明
像 Cursor 这样的编码代理可以无缝地对当前页面运行这些审计。借助 Puppeteer 和 Lighthouse npm 库，BrowserTools MCP 现在可以：
- 评估页面是否符合 WCAG 标准
- 识别性能瓶颈
- 标记页面上的 SEO 问题
- 检查是否遵循网页开发最佳实践
- 审查 NextJS 特定的 SEO 问题
...所有这些操作都无需离开你的 IDE 🎉
🔑 关键新增功能
| 属性 | 详情 | |------|------| | 可访问性 | 进行符合 WCAG 标准的检查，包括颜色对比度、缺失的替代文本、键盘导航陷阱、ARIA 属性等。 | | 性能 | 通过 Lighthouse 分析渲染阻塞资源、过大的 DOM 大小、未优化的图像以及其他影响页面速度的因素。 | | SEO | 评估页面上的 SEO 因素（如元数据、标题和链接结构），并提出改进建议以提高搜索可见性。 | | 最佳实践 | 检查网页开发中的一般最佳实践。 | | NextJS 审计 | 注入用于执行 NextJS 审计的提示。 | | 审计模式 | 按顺序运行所有审计工具。 | | 调试器模式 | 按顺序运行所有调试工具。 |
🛠️ 使用审计工具
✅ 开始前准备
确保你具备以下条件：
- 浏览器中有一个活动标签页
- 启用了 BrowserTools 扩展程序
▶️ 运行审计
无头浏览器自动化： Puppeteer 自动化无头 Chrome 实例以加载页面并收集审计数据，即使对于单页应用程序或通过 JavaScript 加载的内容，也能确保获得准确的结果。
无头浏览器实例在最后一次审计调用后保持活动状态 60 秒，以便高效处理连续的审计请求。
结构化结果： 每次审计都以结构化的 JSON 格式返回结果，包括总体得分和详细的问题列表。这使得与 MCP 兼容的客户端能够轻松解释结果并提供可操作的见解。
MCP 服务器提供了在当前页面上运行审计的工具。以下是可以用于触发审计的示例查询：
可访问性审计 (runAccessibilityAudit)
确保页面符合 WCAG 等可访问性标准。
⚠️ 重要提示
示例查询如下：
- “此页面是否存在可访问性问题？”
- “运行可访问性审计。”
- “检查此页面是否符合 WCAG 标准。”
性能审计 (runPerformanceAudit)
识别性能瓶颈和加载问题。
⚠️ 重要提示
示例查询如下：
- “为什么此页面加载如此缓慢？”
- “检查此页面的性能。”
- “运行性能审计。”
SEO 审计 (runSEOAudit)
评估页面针对搜索引擎的优化程度。
⚠️ 重要提示
示例查询如下：
- “如何改进此页面的 SEO？”
- “运行 SEO 审计。”
- “检查此页面的 SEO。”
最佳实践审计 (runBestPracticesAudit)
检查网页开发中的一般最佳实践。
⚠️ 重要提示
示例查询如下：
- “运行最佳实践审计。”
- “检查此页面的最佳实践。”
- “此页面是否存在最佳实践问题？”
审计模式 (runAuditMode)
按特定顺序运行所有审计工具。如果检测到框架，将运行 NextJS 审计。
⚠️ 重要提示
示例查询如下：
- “运行审计模式。”
- “进入审计模式。”
NextJS 审计 (runNextJSAudit)
检查 NextJS 应用程序的最佳实践和 SEO 改进情况。
⚠️ 重要提示
示例查询如下：
- “运行 NextJS 审计。”
- “运行 NextJS 审计，我正在使用应用路由器。”
- “运行 NextJS 审计，我正在使用页面路由器。”
调试器模式 (runDebuggerMode)
按特定顺序运行所有调试工具。
⚠️ 重要提示
示例查询如下：
- “进入调试器模式。”
🔧 技术细节
架构
有三个核心组件用于捕获和分析浏览器数据：
- Chrome 扩展程序：一个浏览器扩展程序，用于捕获屏幕截图、控制台日志、网络活动和 DOM 元素。
- Node 服务器：一个中间服务器，用于促进 Chrome 扩展程序与任何 MCP 服务器实例之间的通信。
- MCP 服务器：一个模型上下文协议服务器，为 AI 客户端提供与浏览器交互的标准化工具。
┌─────────────┐ ┌──────────────┐ ┌───────────────┐ ┌─────────────┐
│ MCP Client │ ──► │ MCP Server │ ──► │ Node Server │ ──► │ Chrome │
│ (e.g. │ ◄── │ (Protocol │ ◄── │ (Middleware) │ ◄── │ Extension │
│ Cursor) │ │ Handler) │ │ │ │ │
└─────────────┘ └──────────────┘ └───────────────┘ └─────────────┘
模型上下文协议（MCP）是 Anthropic AI 模型支持的一项功能，它允许你为任何兼容的客户端创建自定义工具。像 Claude Desktop、Cursor、Cline 或 Zed 这样的 MCP 客户端可以运行一个 MCP 服务器，该服务器可以“教会”这些客户端使用新的工具。
这些工具可以调用外部 API，但在我们的案例中，所有日志都存储在本地，绝不会发送到任何第三方服务或 API。BrowserTools MCP 运行一个本地的 NodeJS API 服务器，该服务器与 BrowserTools Chrome 扩展程序进行通信。
所有使用 BrowserTools MCP 服务器的用户都通过相同的 NodeJS API 和 Chrome 扩展程序进行交互。
Chrome 扩展程序
- 监控 XHR 请求/响应和控制台日志
- 跟踪选定的 DOM 元素
- 将所有日志和当前元素发送到 BrowserTools 连接器
- 连接到 WebSocket 服务器以捕获/发送屏幕截图
- 允许用户配置令牌/截断限制以及屏幕截图文件夹路径
Node 服务器
- 作为 Chrome 扩展程序和 MCP 服务器之间的中间件
- 从 Chrome 扩展程序接收日志和当前选定的元素
- 处理 MCP 服务器的请求，以捕获日志、屏幕截图或当前元素
- 向 Chrome 扩展程序发送 WebSocket 命令以捕获屏幕截图
- 智能截断日志中的字符串和重复对象数量，以避免达到令牌限制
- 移除 cookie 和敏感头部，以避免发送到 MCP 客户端的大语言模型
MCP 服务器
- 实现模型上下文协议
- 为 AI 客户端提供标准化工具
- 与各种 MCP 客户端（Cursor、Cline、Zed、Claude Desktop 等）兼容
📦 安装指南
安装步骤请参考我们的文档：
💻 使用示例
安装并配置完成后，该系统允许任何兼容的 MCP 客户端：
- 监控浏览器控制台输出
- 捕获网络流量
- 拍摄屏幕截图
- 分析选定的元素
- 清除存储在 MCP 服务器中的日志
- 运行可访问性、性能、SEO 和最佳实践审计
🌟 兼容性
- 可与任何 MCP 兼容的客户端配合使用
- 主要设计用于与 Cursor IDE 集成
- 支持其他 AI 编辑器和 MCP 客户端