BrowserTools MCP

让你的 AI 工具更了解你的浏览器，并能与之互动，能力提升 10 倍

此应用程序是一个强大的浏览器监控和交互工具，它通过 Chrome 扩展程序，使支持 Anthropic 的模型上下文协议 (MCP) 的 AI 驱动应用程序能够捕获和分析浏览器数据。

请阅读我们的文档，获取完整的安装、快速入门和贡献指南。

路线图

请在此处查看我们的项目路线图：Github 路线图 / 项目看板

更新

v1.2.0 已发布！以下是更新的简要说明：

• 现在可以在 DevTools 面板中启用“允许自动粘贴到光标位置”。屏幕截图将自动粘贴到 Cursor 中（只需确保聚焦/点击 Cursor 中的 Agent 输入字段，否则将无法工作！）
• 通过 Lighthouse 集成了一套 SEO、性能、可访问性和最佳实践分析工具
• 实施了一个 NextJS 专用提示，用于改进 NextJS 应用程序的 SEO
• 添加了调试器模式作为一种工具，它以特定顺序执行所有调试工具，并提供一个提示来改进推理
• 添加了审计模式作为一种工具，以特定顺序执行所有审计工具
• 解决了 Windows 连接问题
• 改进了 BrowserTools 服务器、扩展程序和 MCP 服务器之间的网络连接，具有主机/端口自动发现、自动重新连接和优雅关闭机制
• 增加了使用 Ctrl+C 更容易退出 Browser Tools 服务器的功能

快速入门指南

运行此 MCP 工具需要三个组件：

1. 从此处安装我们的 Chrome 扩展程序：v1.2.0 BrowserToolsMCP Chrome 扩展程序
2. 在您的 IDE 中使用此命令安装 MCP 服务器：npx @agentdeskai/browser-tools-mcp@latest
3. 打开一个新的终端并运行此命令：npx @agentdeskai/browser-tools-server@latest

• 不同的 IDE 有不同的配置，但此命令通常是一个好的起点；请参考您的 IDE 文档以获取正确的配置设置

重要提示 - 您需要安装两个服务器。有...

• browser-tools-server（本地 nodejs 服务器，是收集日志的中间件） 和
• browser-tools-mcp（您安装到 IDE 中的 MCP 服务器，它与扩展程序 + browser-tools-server 通信）

npx @agentdeskai/browser-tools-mcp@latest 是您放入 IDE 中的内容 npx @agentdeskai/browser-tools-server@latest 是您在新终端窗口中运行的内容

完成这三个步骤后，打开您的 Chrome 开发者工具，然后打开 BrowserToolsMCP 面板。

如果您仍然遇到问题，请尝试以下步骤：

• 退出/关闭您的浏览器。不仅仅是窗口，而是整个 Chrome 本身。
• 重新启动本地节点服务器 (browser-tools-server)
• 确保您只打开了一个 Chrome 开发者工具面板实例

之后，它应该可以工作了，但如果仍然不行，请告诉我，我可以分享更多步骤来收集有关该问题的日志/信息！

如果您有任何问题或疑问，请随时打开 issue 工单！如果您有任何改进的想法，请随时联系或打开带有增强标签的 issue 工单，或通过 @tedx_ai on x 与我联系。

完整更新说明：

像 Cursor 这样的编码代理可以无缝地针对当前页面运行这些审计。通过利用 Puppeteer 和 Lighthouse npm 库，BrowserTools MCP 现在可以：

• 评估页面是否符合 WCAG 标准
• 识别性能瓶颈
• 标记页面上的 SEO 问题
• 检查是否符合 Web 开发最佳实践
• 审查 NextJS 特有的 SEO 问题

...所有这些都无需离开您的 IDE 🎉

---

🔑 主要新增功能

审计类型	描述
可访问性	符合 WCAG 标准的颜色对比度检查、缺少 alt 文本、键盘导航陷阱、ARIA 属性等。
性能	Lighthouse 驱动的渲染阻塞资源、过度 DOM 大小、未优化图像以及影响页面速度的其他因素的分析。
SEO	评估页面上的 SEO 因素（如元数据、标题和链接结构），并提出改进建议，以提高搜索可见性。
最佳实践	检查 Web 开发中的一般最佳实践。
NextJS 审计	注入用于执行 NextJS 审计的提示。
审计模式	以特定顺序运行所有审计工具。
调试器模式	以特定顺序运行所有调试工具。

---

🛠️ 使用审计工具

✅ 开始之前

确保您已具备：

• 浏览器中有一个活动标签页
• BrowserTools 扩展程序已启用

▶️ 运行审计

无头浏览器自动化： Puppeteer 自动化一个无头 Chrome 实例来加载页面并收集审计数据，即使对于 SPA 或通过 JavaScript 加载的内容，也能确保准确的结果。

无头浏览器实例在上次审计调用后保持活动 60 秒，以有效地处理连续的审计请求。

结构化结果： 每个审计都以结构化的 JSON 格式返回结果，包括总体得分和详细的问题列表。这使得与 MCP 兼容的客户端可以轻松地解释结果并呈现可操作的见解。

MCP 服务器提供用于在当前页面上运行审计的工具。以下是您可以用来触发它们的示例查询：

可访问性审计 (runAccessibilityAudit)

确保页面符合 WCAG 等可访问性标准。

示例查询：

• "此页面上是否存在任何可访问性问题？"
• "运行可访问性审计。"
• "检查此页面是否符合 WCAG 标准。"

性能审计 (runPerformanceAudit)

识别性能瓶颈和加载问题。

示例查询：

• "为什么此页面加载如此缓慢？"
• "检查此页面的性能。"
• "运行性能审计。"

SEO 审计 (runSEOAudit)

评估页面针对搜索引擎的优化程度。

示例查询：

• "如何改进此页面的 SEO？"
• "运行 SEO 审计。"
• "检查此页面上的 SEO。"

最佳实践审计 (runBestPracticesAudit)

检查 Web 开发中的一般最佳实践。

示例查询：

• "运行最佳实践审计。"
• "检查此页面上的最佳实践。"
• "此页面上是否存在任何最佳实践问题？"

审计模式 (runAuditMode)

以特定顺序运行所有审计。如果检测到框架，将运行 NextJS 审计。

示例查询：

• "运行审计模式。"
• "进入审计模式。"

NextJS 审计 (runNextJSAudit)

检查 NextJS 应用程序的最佳实践和 SEO 改进

示例查询：

• "运行 NextJS 审计。"
• "运行 NextJS 审计，我正在使用 app router。"
• "运行 NextJS 审计，我正在使用 page router。"

调试器模式 (runDebuggerMode)

以特定顺序运行所有调试工具

示例查询：

• "进入调试器模式。"

架构

有三个核心组件都用于捕获和分析浏览器数据：

1. Chrome 扩展程序：一个浏览器扩展程序，用于捕获屏幕截图、控制台日志、网络活动和 DOM 元素。
2. Node 服务器：一个中间服务器，用于促进 Chrome 扩展程序和 MCP 服务器的任何实例之间的通信。
3. MCP 服务器：一个模型上下文协议服务器，它为 AI 客户端提供与浏览器交互的标准化工具。

┌─────────────┐     ┌──────────────┐     ┌───────────────┐     ┌─────────────┐
│  MCP 客户端 │ ──► │  MCP 服务器  │ ──► │  Node 服务器  │ ──► │   Chrome    │
│  (例如      │ ◄── │  (协议   │ ◄── │ (中间件)  │ ◄── │  扩展程序  │
│   Cursor)   │     │   处理程序)   │     │               │     │             │
└─────────────┘     └──────────────┘     └───────────────┘     └─────────────┘

模型上下文协议 (MCP) 是 Anthropic AI 模型支持的一项功能，它 允许您为任何兼容的客户端创建自定义工具。像 Claude 这样的 MCP 客户端 Desktop、Cursor、Cline 或 Zed 可以运行一个 MCP 服务器，该服务器“教导”这些客户端 关于他们可以使用的新工具。

这些工具可以调用外部 API，但在我们的例子中，所有日志都存储在本地 在您的机器上，并且永远不会发送到任何第三方服务或 API。BrowserTools MCP 运行 NodeJS API 服务器的本地实例，该服务器与 BrowserTools Chrome 扩展程序通信。

BrowserTools MCP 服务器的所有使用者都与同一个 NodeJS API 和 Chrome 扩展程序交互。

Chrome 扩展程序

• 监控 XHR 请求/响应和控制台日志
• 跟踪选定的 DOM 元素
• 将所有日志和当前元素发送到 BrowserTools 连接器
• 连接到 Websocket 服务器以捕获/发送屏幕截图
• 允许用户配置令牌/截断限制 + 屏幕截图文件夹路径

Node 服务器

• 充当 Chrome 扩展程序和 MCP 服务器之间的中间件
• 接收来自 Chrome 扩展程序的日志和当前选定的元素
• 处理来自 MCP 服务器的请求以捕获日志、屏幕截图或当前元素
• 将 Websocket 命令发送到 Chrome 扩展程序以捕获屏幕截图
• 智能地截断字符串和日志中重复对象的数量，以避免令牌限制
• 删除 cookie 和敏感标头，以避免发送到 MCP 客户端中的 LLM

MCP 服务器

• 实施模型上下文协议
• 为 AI 客户端提供标准化工具
• 与各种 MCP 客户端兼容（Cursor、Cline、Zed、Claude Desktop 等）

安装

安装步骤可以在我们的文档中找到：

• BrowserTools MCP 文档

用法

安装和配置完成后，系统允许任何兼容的 MCP 客户端：

• 监控浏览器控制台输出
• 捕获网络流量
• 拍摄屏幕截图
• 分析选定的元素
• 清除存储在我们的 MCP 服务器中的日志
• 运行可访问性、性能、SEO 和最佳实践审计

兼容性

• 适用于任何与 MCP 兼容的客户端
• 主要为 Cursor IDE 集成而设计
• 支持其他 AI 编辑器和 MCP 客户端