🚀 浏览器工具（BrowserTools）
BrowserTools 是一款强大的浏览器工具，可实时监控 XHR 请求与响应、控制台日志，还具备网络流量分析、DOM 元素截取等功能，能无缝集成到开发流程，提升工作效率。
🚀 快速开始
安装并配置完成后，兼容的 MCP 客户端就能使用 BrowserTools 进行浏览器行为分析，如监控控制台输出、捕获网络流量等。具体安装步骤请参考官方文档。
✨ 主要特性
- 浏览器扩展：实时监控 XHR 请求/响应和控制台日志。
- 网络流量分析：深入洞察网络交互。
- DOM 元素截取：轻松获取页面元素信息。
- 截图功能：随时捕获网页界面。
- 日志清理：便捷清除存储的日志数据。
📦 安装指南
请参考我们的官方文档：
🔧 技术细节
系统由三个核心组件构成：
- Chrome 扩展：
- 实时捕获并传输截图、日志和 DOM 元素到 Node 服务器。
- 连接 WebSocket 通道以实现截图功能。
- 支持用户自定义 token 截断限制和截图存储路径。
- Node 服务器：
- 作为 Chrome 扩展与 MCP 服务之间的中间件。
- 智能处理日志截断和重复对象数量，避免 token 超限。
- 响应 MCP 客户端的请求，执行截图、日志采集等操作。
- MCP 服务器：
- 实现模型上下文协议（Model Context Protocol）。
- 提供统一接口支持多种 AI 编辑器和工具客户端。
- 兼容 Cursor、Cline、Zed 等主流 MCP 客户端。
💻 使用示例
基础用法
以下是一些示例查询，展示了如何使用 BrowserTools 解决不同场景下的问题：
// 诊断页面加载问题
"为什么这个页面加载得这么慢？"
// 开发模式下的网络分析
"帮我分析一下这张图片的加载情况。"
// DOM 元素信息获取
"告诉我当前选中元素的所有属性。"
// 快速截图验证
"给我看看当前页面的状态。"
📚 详细文档
使用说明
一旦安装并配置完成，系统将允许任意兼容的 MCP 客户端执行以下操作：
- 监控浏览器控制台输出
- 捕获网络流量数据
- 截取网页界面快照
- 分析选定 DOM 元素
- 清理存储的日志记录
- 执行无障碍性、性能、SEO 和最佳实践审计
兼容性
- 支持所有主流 MCP 兼容客户端。
- 专门针对 Cursor IDE 进行优化设计。
- 提供对其他 AI 编辑器和工具的广泛支持。
通过 BrowserTools，您可以无缝集成浏览器行为分析功能到各类开发流程中，极大提升工作效率。