簡介

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>