BrowserTools MCP

BrowserTools MCP

让你的 AI 工具提升 10 倍的感知能力和浏览器交互能力

这个应用是一个强大的浏览器监控和交互工具，通过 Chrome 扩展程序使 AI 驱动的应用程序能够通过 Anthropic 的 Model Context Protocol (MCP) 捕获和分析浏览器数据。

查看我们的文档了解完整的安装、快速入门和贡献指南。

路线图

在这里查看我们的项目路线图：Github 路线图 / 项目看板

更新

v1.2.0 已发布！以下是本次更新的快速概览：

• 现在你可以在 DevTools 面板中启用"允许自动粘贴到 Cursor"。截图将自动粘贴到 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（MCP 服务，你将其安装到 IDE 中，用于与扩展和 browser-tools-server 通信）

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

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

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

• 退出/关闭你的浏览器。不仅仅是窗口，而是整个 Chrome。
• 重启本地 node 服务（browser-tools-server）
• 确保只有一个 Chrome 开发者工具面板实例打开

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

如果你有任何问题或遇到问题，请随时提交一个 issue！如果你有任何想法来改进这个，请随时联系我或使用增强标签提交一个 issue，或在 X 上联系我 @tedx_ai

完整更新说明：

编码 Agent（如 Cursor）可以针对当前页面无缝运行这些审计。通过利用 Puppeteer 和 Lighthouse npm 库，BrowserTools MCP 现在可以：

• 评估页面的 WCAG 合规性
• 识别性能瓶颈
• 标记页面上的 SEO 问题
• 检查 Web 开发最佳实践的遵守情况
• 审查 NextJS 特定的 SEO 问题

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

---

🔑 主要功能

审计类型	描述
无障碍访问	WCAG 合规检查，包括色彩对比度、缺失的替代文本、键盘导航陷阱、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 审计，我在使用 Pages Router。"

调试器模式（runDebuggerMode）

按序运行所有调试工具

示例查询：

• "进入调试器模式。"

架构

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

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

┌─────────────┐     ┌──────────────┐     ┌───────────────┐     ┌─────────────┐
│  MCP Client │ ──► │  MCP Server  │ ──► │  Node Server  │ ──► │   Chrome    │
│  (e.g.      │ ◄── │  (Protocol   │ ◄── │ (Middleware)  │ ◄── │  Extension  │
│   Cursor)   │     │   Handler)   │     │               │     │             │
└─────────────┘     └──────────────┘     └───────────────┘     └─────────────┘

模型上下文协议 (MCP) 是 Anthropic AI 模型支持的一种能力， 允许你为任何兼容的客户端创建自定义工具。MCP 客户端（如 Claude 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 服务器的请求以捕获日志、截图或当前元素
• 向 Chrome 扩展程序发送 Websocket 命令以捕获截图
• 智能地截断字符串和日志中重复对象的数量，以避免令牌限制
• 移除 Cookie 和敏感头，避免发送给 MCP 客户端中的大模型

MCP 服务器

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

安装

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

• BrowserTools MCP 文档

使用

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

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

兼容性

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