Vibe Eyes Client
2025.03.24
1
JavaScript游戏调试可视化工具浏览器自动化开发效率
Vibe Eyes Client 是一个轻量级的客户端库，用于将浏览器游戏与 Vibe Eyes MCP 调试服务器集成，实现实时调试、可视化和分析功能。该库允许 AI 实时查看游戏运行情况，提供画布截图捕获、控制台日志收集、错误处理以及 SVG 可视化显示等功能。
View on GitHub
Overview
基本能力
产品定位
Vibe Eyes Client 是一个用于浏览器游戏调试和可视化的轻量级客户端库，旨在帮助开发者实时监控和分析游戏运行状态。
核心功能
- 自动画布截图捕获和流式传输
- 带时间戳的控制台日志和错误收集
- 全局错误和未处理的 Promise 拒绝处理
- 在专用调试窗口中显示 SVG 可视化
- 完整的调试统计信息，包括 SVG 大小测量
- 对游戏性能影响最小
- 强大的错误处理和优雅的连接恢复
- 多种构建格式（UMD、ESM、IIFE）
适用场景
- 浏览器游戏的实时调试和监控
- AI 训练和测试过程中的可视化反馈
- 游戏性能分析和优化
- 错误日志收集和分析
工具列表
initializeVibeEyes: 初始化客户端并连接到调试服务器enableSvgDisplay: 启用 SVG 可视化显示toggleSvgDisplay: 切换 SVG 显示状态disableSvgDisplay: 禁用 SVG 显示stopCaptureLoop: 停止捕获循环startCaptureLoop: 启动捕获循环
常见问题解答
- 如何自定义调试服务器地址？ 在初始化时通过
serverUrl参数指定。 - 如何调整截图捕获频率？ 通过
captureDelay参数设置捕获间隔（毫秒）。 - 如何指定特定的画布进行捕获？ 通过
canvasId参数指定画布 ID。
使用教程
使用依赖
确保已安装 Node.js 和 npm。
安装教程
通过 npm 安装：
npm install vibe-eyes-client
或直接在 HTML 中引入：
<script src="https://unpkg.com/vibe-eyes-client/dist/vibe-eyes.min.js"></script>
调试方式
基本调试命令：
// 初始化客户端
initializeVibeEyes();
// 启用 SVG 显示
const client = initializeVibeEyes();
client.enableSvgDisplay();
// 停止捕获循环
client.stopCaptureLoop();
// 启动捕获循环
client.startCaptureLoop();