Vibe Eyes Client

Vibe Eyes Client是一个轻量级客户端库，用于将浏览器游戏与Vibe Eyes MCP调试服务器集成，实现实时调试、可视化和分析功能。

开发者工具游戏与游戏化 #游戏调试 #实时可视化 #错误监控 #SVG展示 .JavaScript

评分 : 2.5分

下载量 : 8.5K

更新时间 : 2025-04-28

打开站点

简介

Vibe Eyes MCP 调试服务器是一个专为浏览器游戏设计的工具，旨在帮助开发者实时监控和分析游戏运行状态。通过捕获 canvas 内容、网络请求数据以及日志信息，该服务器能够提供丰富的调试功能，从而提升开发效率。

主要特点

支持多平台部署（Web 和移动）、低资源消耗、插件扩展机制以及详细的调试信息记录。

应用场景

适用于浏览器游戏的开发测试、性能优化、错误排查等场景，尤其适合需要实时监控的游戏项目。

Canvas 捕获功能

支持实时捕获 canvas 内容，并通过网络传输到调试服务器进行可视化展示。

网络请求跟踪

监控游戏中的所有网络请求，包括 HTTP 和 WebSocket 通信，帮助分析性能瓶颈。

日志分析功能

收集和展示游戏运行过程中的日志信息，支持过滤、搜索和高级分析。

基本集成

配置调试窗口

基础集成示例

展示如何在项目中进行基本的 Vibe Eyes 集成。

自定义调试窗口示例

配置调试窗口显示在游戏界面的左侧，并设置宽度。

Vibe Eyes 是否支持所有浏览器游戏？

如果调试服务器未运行会怎样处理？

如何管理资源消耗以优化性能？

🚀 Vibe Eyes 客户端

Vibe Eyes 客户端是一个轻量级的客户端库，可将浏览器游戏与 Vibe Eyes 调试服务器进行集成，实现实时调试、可视化和分析功能。借助该库，AI 能够实时“看到”它正在处理的游戏！

🚀 快速开始

Vibe Eyes 客户端可助力开发者将浏览器游戏与调试服务器集成，实现实时调试、可视化和分析。以下是快速集成的示例代码：

// 使用默认设置初始化（自动连接到服务器）
// （null = auto-detect）
// （创建弹出窗口，如果 container 为 null）

VibeEyes.init({
  // 配置选项
});

// 监听事件
VibeEyes.on('message', (msg) => {
  console.log('收到消息:', msg);
});

✨ 主要特性

自动画布截图捕获和流传输
控制台日志和错误收集，带时间戳
全局错误和未处理的承诺拒绝处理
在专用调试窗口中显示 SVG 可视化
完整的调试统计信息，包括 SVG 大小测量
对游戏性能影响最小
健壮的错误处理和优雅的连接恢复
多种构建格式（UMD、ESM、IIFE）

✨ 1.1.0 版本新特性

断开连接时的 SVG 显示：调试窗口现在即使在未连接到服务器时也能工作
实时连接状态可视化：实时显示连接状态并提供视觉反馈
智能窗口定位：将调试窗口相对于游戏窗口定位（右、左、上、下）
响应式默认值：调试窗口大小默认为游戏窗口尺寸的 75%
改进的错误处理：更好地处理窗口关闭和重新连接场景

📦 安装指南

你可以通过以下两种方式安装 Vibe Eyes 客户端：

使用 npm 安装

npm install vibe-eyes-client

直接在 HTML 中引入

<script src="https://unpkg.com/vibe-eyes-client/dist/vibe-eyes.min.js"></script>

💻 使用示例

基础用法

// 使用默认设置初始化（自动连接到服务器）
// （null = auto-detect）
// （创建弹出窗口，如果 container 为 null）

VibeEyes.init({
  // 配置选项
});

// 监听事件
VibeEyes.on('message', (msg) => {
  console.log('收到消息:', msg);
});

高级用法

VibeEyes.init({
  serverUrl: 'http://localhost:3000', // 自定义服务器 URL
  debugMode: true, // 启用调试模式
  container: '#debug-container' // 使用自定义容器元素
});

📚 详细文档

通用配置选项

属性	详情
serverUrl	服务器的 URL 地址（默认：`http://localhost:3000`）
debugMode	是否启用调试模式（默认：`false`）
container	自定义容器的选择器或元素（默认：`null`，自动创建弹出窗口）

网络配置选项

属性	详情
reconnectInterval	断开后重新连接的间隔时间（以毫秒为单位，默认：`3000`）
maxRetries	最大重试次数（默认：`5`）

可视化配置选项

属性	详情
theme	SVG 的主题颜色（默认：`light`，可选：`dark`）
fontFamily	文本的字体家族（默认：`Arial`）
fontSize	文本的大小（以像素为单位，默认：`14`）

示例代码

<!DOCTYPE html>
<html>
<head>
  <script src="vibe-eyes.min.js"></script>
</head>
<body>
  <div id="debug-container"></div>
  <script>
    VibeEyes.init({
      serverUrl: 'http://localhost:3000',
      debugMode: true,
      container: '#debug-container'
    });
  </script>
</body>
</html>