BrowserTools MCP

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

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

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

路线图

查看我们的项目路线图：Github Roadmap / Project Board

更新

v1.2.0已发布！以下是更新内容的简要概述：

• 您现在可以在DevTools面板中启用“允许自动粘贴到光标”。屏幕截图将自动粘贴到光标（请确保点击或聚焦到Cursor中的代理输入字段，否则不起作用！）
• 集成了一套SEO、性能、可访问性和最佳实践分析工具，通过Lighthouse实现
• 实现了一个特定于NextJS的提示，用于改善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 Extension

之后，您可以像这样运行本地Node服务器：
npx @agentdeskai/browser-tools-server@1.2.0

请务必指定版本1.2.0，因为NPX缓存可能会阻止您获取最新版本！每次更新时只需执行一次。一旦执行过一次，您就应该处于最新版本。

打开Chrome开发者工具后，日志应该会被发送到您的服务器 🦾

如果您有任何问题或遇到任何问题，请随时创建一个问题工单！如果您有任何改进的想法，也欢迎联系我们或创建带有增强标签的问题工单，或者通过@tedx_ai on x联系我。

完整更新说明：

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

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

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

🔑 关键新增功能

🛠️ 使用审计工具

✅ 开始前

请确保：

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

▶️ 运行审计

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

无头浏览器实例在最后一次审计调用后保持活跃60秒，以高效处理连续的审计请求。

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

MCP 服务器提供了对当前页面进行审计的工具。以下是一些可以用来触发它们的示例查询：

可访问性审计 (runAccessibilityAudit)

确保页面符合 WCAG 等无障碍标准。

示例查询：

• "这个页面有无障碍问题吗？"
• "运行无障碍审计。"
• "检查此页面是否符合 WCAG 标准。"

性能审计 (runPerformanceAudit)

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

示例查询：

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

SEO 审计 (runSEOAudit)

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

示例查询：

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

最佳实践审计 (runBestPracticesAudit)

检查网页开发中的通用最佳实践。

示例查询：

• "运行最佳实践审计。"
• "检查此页面的最佳实践。"
• "这个页面有没有最佳实践方面的问题？"

审计模式 (runAuditMode)

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

示例查询：

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

NextJS 审计 (runNextJSAudit)

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

示例查询：

• "运行 NextJS 审计。"
• "运行 NextJS 审计，我使用的是 app 路由。"
• "运行 NextJS 审计，我使用的是 page 路由。"

调试模式 (runDebuggerMode)

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

示例查询：

• "进入调试模式。"

架构

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

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

┌─────────────┐ ┌──────────────┐ ┌───────────────┐ ┌─────────────┐
│ MCP 客户端 │ ──► │ MCP 服务器 │ ──► │ Node 服务器 │ ──► │ Chrome │
│ (例如 │ ◄── │ (协议处理) │ ◄── │ (中间件) │ ◄── │ 扩展 │
│ Cursor) │ │ │ │ │ │ │
└─────────────┘ └──────────────┘ └───────────────┘ └─────────────┘Model Context Protocol (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 Connector
• 连接到 Websocket 服务器以捕获/发送屏幕截图
• 允许用户配置 token 截断限制和屏幕截图文件夹路径

Node 服务器

• 作为 Chrome 扩展程序和 MCP 服务器之间的中间件
• 从 Chrome 扩展程序接收日志和当前选中的元素
• 处理来自 MCP 服务器的请求以捕获日志、屏幕截图或当前元素
• 向 Chrome 扩展程序发送 Websocket 命令以捕获屏幕截图
• 智能截断字符串和重复对象的数量，以避免超出 token 限制
• 移除 cookies 和敏感头部信息，以避免将其发送到 MCP 客户端中的 LLMs

MCP 服务器

• 实现 Model Context Protocol
• 为 AI 客户端提供标准化工具
• 与各种 MCP 客户端（如 Cursor、Cline、Zed、Claude Desktop 等）兼容

安装

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

• BrowserTools MCP 文档

使用

一旦安装并配置好，系统将允许任何兼容的 MCP 客户端执行以下操作：

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

兼容性

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