Browser Tools

🚀 浏览器工具（BrowserTools）

BrowserTools 是一款强大的浏览器工具，可实时监控 XHR 请求与响应、控制台日志，还具备网络流量分析、DOM 元素截取等功能，能无缝集成到开发流程，提升工作效率。

🚀 快速开始

安装并配置完成后，兼容的 MCP 客户端就能使用 BrowserTools 进行浏览器行为分析，如监控控制台输出、捕获网络流量等。具体安装步骤请参考官方文档。

✨ 主要特性

• 浏览器扩展：实时监控 XHR 请求/响应和控制台日志。
• 网络流量分析：深入洞察网络交互。
• DOM 元素截取：轻松获取页面元素信息。
• 截图功能：随时捕获网页界面。
• 日志清理：便捷清除存储的日志数据。

📦 安装指南

请参考我们的官方文档：

• 浏览器工具 MCP 文档

🔧 技术细节

系统由三个核心组件构成：

1. Chrome 扩展：
   • 实时捕获并传输截图、日志和 DOM 元素到 Node 服务器。
   • 连接 WebSocket 通道以实现截图功能。
   • 支持用户自定义 token 截断限制和截图存储路径。
2. Node 服务器：
   • 作为 Chrome 扩展与 MCP 服务之间的中间件。
   • 智能处理日志截断和重复对象数量，避免 token 超限。
   • 响应 MCP 客户端的请求，执行截图、日志采集等操作。
3. MCP 服务器：
   • 实现模型上下文协议（Model Context Protocol）。
   • 提供统一接口支持多种 AI 编辑器和工具客户端。
   • 兼容 Cursor、Cline、Zed 等主流 MCP 客户端。

💻 使用示例

基础用法

以下是一些示例查询，展示了如何使用 BrowserTools 解决不同场景下的问题：

// 诊断页面加载问题
"为什么这个页面加载得这么慢？"

// 开发模式下的网络分析
"帮我分析一下这张图片的加载情况。"

// DOM 元素信息获取
"告诉我当前选中元素的所有属性。"

// 快速截图验证
"给我看看当前页面的状态。"

📚 详细文档

使用说明

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

• 监控浏览器控制台输出
• 捕获网络流量数据
• 截取网页界面快照
• 分析选定 DOM 元素
• 清理存储的日志记录
• 执行无障碍性、性能、SEO 和最佳实践审计

兼容性

• 支持所有主流 MCP 兼容客户端。
• 专门针对 Cursor IDE 进行优化设计。
• 提供对其他 AI 编辑器和工具的广泛支持。

通过 BrowserTools，您可以无缝集成浏览器行为分析功能到各类开发流程中，极大提升工作效率。