BrowserTools MCP
让你的AI工具对浏览器的交互意识和能力提升10倍
这款应用程序是一款强大的浏览器监控与交互工具，它通过Anthropic的模型上下文协议（MCP），使AI驱动的应用能够通过Chrome扩展程序捕获并分析浏览器数据。
阅读我们的 文档 关于完整安装、快速入门和贡献指南。
路线图
请在此查看我们的项目路线图：
更新
v1.2.0 版本已发布！以下是更新的快速概览：
- 现在，您可以在开发者工具（DevTools）面板中启用“允许自动粘贴到Cursor”功能。截图将自动粘贴到Cursor中（只需确保焦点/点击到Cursor中的Agent输入框，否则功能将无法正常工作！）
- 通过Lighthouse集成了SEO、性能、无障碍性和最佳实践分析工具套件
- 为NextJS应用实现了一个特定的NextJS提示，以优化其SEO（搜索引擎优化）
- 添加了调试器模式作为一种工具，该工具按特定顺序执行所有调试工具，并附带提示以增强推理能力
- 添加了审计模式，作为一种工具，用于按特定顺序执行所有审计工具
- 解决了Windows连接问题
- 改进了BrowserTools服务器、扩展程序和MCP服务器之间的网络连接，实现了主机/端口自动发现、自动重连和优雅关闭机制
- 增加了通过 Ctrl+C 更轻松地退出浏览器工具服务器的功能
请确保在您的集成开发环境（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开发者工具，日志就应该会发送到你的服务器上🦾
如果您有任何问题或遇到任何困难，请随时提交一个问题工单！如果您有任何改进的想法，也请随时联系我或提交一个带有增强功能标签的问题工单，或者直接联系我： @tedx_ai 在x上
完整更新说明：
像Cursor这样的编码工具可以无缝地对当前页面执行这些审核。通过利用Puppeteer和Lighthouse npm库，BrowserTools MCP现在能够：
- 评估网页是否符合WCAG标准
- 识别性能瓶颈
- 页面内SEO问题标志
- 检查是否遵循了网页开发的最佳实践
- 审查NextJS在SEO方面的特定问题
……这一切都不需要离开你的集成开发环境（IDE）🎉
______________________________________________________________________
🔑 关键补充
| 审计类型 | 描述 | |
|---|---|---|
| 无障碍性 符合WCAG标准的检查，包括颜色对比度、缺失的替代文本、键盘导航陷阱、ARIA属性等更多方面。 | ||
| 演出 | 以灯塔指标为驱动，分析阻塞渲染的资源、过大的DOM尺寸、未优化的图片以及其他影响页面速度的因素。 | |
| SEO（搜索引擎优化） 评估页面内的SEO因素（如元数据、标题和链接结构），并提出改进建议以提升搜索可见度。 | ||
| 最佳实践 | 检查网页开发中的通用最佳实践。 （此行无实际内容，若需翻译前文，则前文内容为：“ | ”在中文中可翻译为“竖线”或“管道符号”，但在此上下文中单独存在时，通常不直接翻译，而是保持原样或根据具体语境处理。） |
| NextJS 审计 | 注入一个用于执行NextJS审计的提示。 | |
| 审计模式 按顺序运行所有审计工具。 | ||
| 调试模式 按顺序运行所有调试工具。 |
______________________________________________________________________
🛠️ 使用审计工具
✅ 在你开始之前
确保你已准备好：
- 一 活动标签页 在您的浏览器中
- 这个（或“该”） 已启用BrowserTools扩展
▶️ 进行审计
无头浏览器自动化:\ Puppeteer 自动化控制无头 Chrome 实例来加载页面并收集审核数据，即使对于单页应用（SPA）或通过 JavaScript 加载的内容，也能确保结果的准确性。
无头浏览器实例保持活动状态的时间为 60秒 在最后一次审计调用后，以高效处理连续的审计请求。
结构化结果：\ 每次审核都会以结构化的JSON格式返回结果，包括总分和详细的问题列表。这使得MCP兼容客户端能够轻松地解读审核结果，并提供可操作的见解。
MCP服务器提供了工具来对当前页面进行审核。以下是一些示例查询，您可以使用它们来触发审核：
无障碍性审计runAccessibilityAudit)
确保页面符合如WCAG等无障碍标准。
示例查询： - “这个页面存在任何无障碍性问题吗？” - “进行无障碍性审计。” - “检查此页面是否符合WCAG标准。”
绩效审计runPerformanceAudit)
识别性能瓶颈和加载问题。
示例查询： - “为什么这个页面加载这么慢？” - “检查这个页面的性能。” - “进行一次绩效审计。”
SEO审核runSEOAudit）
评估页面对搜索引擎的优化程度。
示例查询： - “我如何提高这个页面的SEO（搜索引擎优化）？” - “进行一次SEO审计。” - “检查此页面的SEO情况。”
最佳实践审计（Best Practices Audit）runBestPracticesAudit)
检查网页开发中的通用最佳实践。
示例查询： - “进行最佳实践审计。” - “在此页面上查看最佳实践。” - “这个页面上有没有最佳实践方面的问题？”
审计模式（runAuditMode）
按照特定顺序运行所有审核。如果检测到框架为NextJS，则将运行NextJS审核。
示例查询： - “运行审核模式。” - “进入审计模式。”
NextJS 审核（runNextJSAudit)
检查NextJS应用程序的最佳实践及SEO优化改进。
示例查询： - “运行一个NextJS审核。” - “运行一个NextJS审计，我正在使用app路由器。” - “运行一个NextJS审核，我正在使用页面路由器。”
调试模式 (runDebuggerMode）
按特定顺序运行所有调试工具。
示例查询： - “进入调试模式。”
建筑
有三个核心组件，都用于捕获和分析浏览器数据：
- Chrome扩展程序一个浏览器扩展，用于捕获屏幕截图、控制台日志、网络活动和DOM元素。
- 节点服务器一个中间服务器，用于促进Chrome扩展程序与任何MCP服务器实例之间的通信。
- MCP 服务器一个模型上下文协议服务器，为人工智能客户端提供与浏览器交互的标准化工具。
┌─────────────┐ ┌──────────────┐ ┌───────────────┐ ┌─────────────┐
│ MCP Client │ ──► │ MCP Server │ ──► │ Node Server │ ──► │ Chrome │
│ (e.g. │ ◄── │ (Protocol │ ◄── │ (Middleware) │ ◄── │ Extension │
│ Cursor) │ │ Handler) │ │ │ │ │
└─────────────┘ └──────────────┘ └───────────────┘ └─────────────┘模型上下文协议（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服务器以捕获/发送屏幕截图
- 允许用户配置令牌/截断限制 + 截图文件夹路径
节点服务器
- 作为Chrome扩展与MCP服务器之间的中间件
- 接收来自Chrome扩展的日志和当前选定的元素
- 处理来自MCP服务器的请求以捕获日志、截图或当前元素
- 向Chrome扩展程序发送Websocket命令以捕获屏幕截图
- 智能截断日志中的字符串和重复对象数量，以避免令牌限制
- 在MCP客户端中移除cookie和敏感头部信息，以避免发送给大型语言模型（LLMs）
MCP服务器
- 实现了模型上下文协议
- 为AI客户提供标准化工具
- 兼容多种MCP客户端（Cursor、Cline、Zed、Claude Desktop等）
安装
安装步骤可在我们的文档中找到：
使用方法
安装并配置完成后，该系统允许任何兼容的MCP客户端执行以下操作：
- 监控浏览器控制台输出
- 捕获网络流量
- 截取屏幕截图
- 分析选定元素
- 清除存储在我们MCP服务器上的日志
- 进行可访问性、性能、搜索引擎优化（SEO）及最佳实践审核
兼容性
- 与任何MCP兼容的客户端均可配合使用
- 主要设计用于与Cursor IDE集成
- 支持其他AI编辑器和MCP客户端