终极指南：如何通过BrowserTools MCP实现浏览器监控与自动化测试
终极指南：如何通过BrowserTools MCP实现浏览器监控与自动化测试
项目地址: https://gitcode.com/gh_mirrors/br/browser-tools-mcp BrowserTools MCP是一款强大的浏览器监控和交互工具，它通过Chrome扩展使基于Anthropic模型上下文协议（MCP）的AI应用能够捕获和分析浏览器数据，让你的AI工具在与浏览器交互时的感知能力和功能提升10倍。
🌟 为什么选择BrowserTools MCP？
BrowserTools MCP解决了开发者在浏览器调试和网页分析中的核心痛点，通过将浏览器数据无缝集成到你的IDE中，让AI助手能够直接获取实时浏览器信息，无需切换窗口或复制粘贴。这意味着你可以在Cursor等MCP兼容IDE中直接监控浏览器日志、分析性能问题、检查可访问性问题，以及进行自动化测试。
🚀 快速上手指南
要运行这个MCP工具，需要三个组件：
1. 安装Chrome扩展
从最新版本发布页面下载Chrome扩展，然后在Chrome中通过"开发者模式"加载解压后的扩展文件夹。
2. 安装MCP服务器
在你的IDE中运行以下命令安装MCP服务器：
npx @agentdeskai/browser-tools-mcp@latest
3. 启动浏览器工具服务器
打开新终端，运行以下命令启动中间件服务器：
npx @agentdeskai/browser-tools-server@latest
⚠️ 重要提示：你需要安装两个不同的服务器：
- browser-tools-server：本地Node.js服务器，作为收集日志的中间件
- browser-tools-mcp：安装到IDE中的MCP服务器，用于与扩展和browser-tools-server通信
完成这三个步骤后，打开Chrome开发者工具，你应该能看到BrowserToolsMCP面板。
🔍 核心功能与审计工具
v1.2.0版本带来了强大的审计功能，让编码代理如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。"
🏗️ 架构概览
BrowserTools MCP由三个核心组件组成，用于捕获和分析浏览器数据：
- Chrome扩展：捕获截图、控制台日志、网络活动和DOM元素的浏览器扩展。
- Node服务器：促进Chrome扩展和任何MCP服务器实例之间通信的中间服务器。
- MCP服务器：提供标准化工具让AI客户端与浏览器交互的模型上下文协议服务器。
┌─────────────┐ ┌──────────────┐ ┌───────────────┐ ┌─────────────┐
│ MCP客户端 │ ──► │ MCP服务器 │ ──► │ Node服务器 │ ──► │ Chrome │
│ (例如 │ ◄── │ (协议处理 │ ◄── │ (中间件) │ ◄── │ 扩展 │
│ Cursor) │ │ 程序) │ │ │ │ │
└─────────────┘ └──────────────┘ └───────────────┘ └─────────────┘
模型上下文协议（MCP）是Anthropic AI模型支持的一项功能，允许你为任何兼容客户端创建自定义工具。像Claude Desktop、Cursor、Cline或Zed这样的MCP客户端可以运行MCP服务器，"教会"这些客户端使用新工具。
这些工具可以调用外部API，但在我们的案例中，所有日志都存储在你的本地机器上，绝不会发送到任何第三方服务或API。BrowserTools MCP运行本地实例的NodeJS API服务器，与BrowserTools Chrome扩展通信。
各组件详细说明
Chrome扩展
- 监控XHR请求/响应和控制台日志
- 跟踪选定的DOM元素
- 将所有日志和当前元素发送到BrowserTools连接器
- 连接到Websocket服务器以捕获/发送截图
- 允许用户配置令牌/截断限制+截图文件夹路径
Node服务器
- 充当Chrome扩展和MCP服务器之间的中间件
- 从Chrome扩展接收日志和当前选定的元素
- 处理来自MCP服务器的请求以捕获日志、截图或当前元素
- 向Chrome扩展发送Websocket命令以捕获截图
- 智能截断日志中的字符串和重复对象数量，以避免令牌限制
- 删除cookie和敏感头，避免发送到MCP客户端中的LLM
MCP服务器
- 实现模型上下文协议
- 为AI客户端提供标准化工具
- 与各种MCP客户端兼容（Cursor、Cline、Zed、Claude Desktop等）
💻 安装与配置
完整的安装步骤可在我们的文档中找到：BrowserTools MCP文档
🛠️ 使用方法
安装和配置完成后，系统允许任何兼容的MCP客户端：
- 监控浏览器控制台输出
- 捕获网络流量
- 截取屏幕截图
- 分析选定元素
- 清除存储在MCP服务器中的日志
- 运行可访问性、性能、SEO和最佳实践审计
🔄 故障排除
如果遇到问题，请尝试以下步骤：
- 退出/关闭浏览器。不只是窗口，而是整个Chrome。
- 重启本地节点服务器（browser-tools-server）
- 确保只打开一个Chrome开发者工具面板实例
如果问题仍然存在，请随时提交issue！
🆕 最新更新 (v1.2.0)
v1.2.0版本带来了多项重要更新：
- 现在可以在DevTools面板中启用"允许自动粘贴到Cursor"。截图将自动粘贴到Cursor中（只需确保在Cursor中聚焦/点击Agent输入字段，否则将无法工作！）
- 通过Lighthouse集成了一套SEO、性能、可访问性和最佳实践分析工具
- 实现了NextJS特定提示，用于改进NextJS应用的SEO
- 添加了调试器模式作为工具，按特定顺序执行所有调试工具，以及改进推理的提示
- 添加了审计模式作为工具，按特定顺序执行所有审计工具
- 解决了Windows连接问题
- 通过主机/端口自动发现、自动重连和优雅关闭机制改进了BrowserTools服务器、扩展和MCP服务器之间的网络
- 增加了通过Ctrl+C更轻松退出浏览器工具服务器的能力
🤝 贡献与支持
如果你有任何问题或遇到问题，请随时提交issue！如果你有任何改进想法，欢迎提出或使用增强标签提交issue，或通过@tedx_ai on x联系我。
BrowserTools MCP让你的开发流程更加顺畅，将浏览器数据直接集成到你的IDE中，使AI助手能够提供更准确、更相关的帮助。无论你是在调试复杂的前端问题，还是优化网站性能和SEO，BrowserTools MCP都是你不可或缺的开发伙伴！
欢迎加入 MCP 技术社区！与志同道合者携手前行，一同解锁 MCP 技术的无限可能！
更多推荐
3
0- 0
已为社区贡献2条内容
所有评论(0)