📡 DevLogCenter — Development Log Center

A unified, cross-platform development log collector with bidirectional RPC debugging.
Collect logs from Web / Python / Java / C# / Android / iOS apps, inspect them in real-time, and execute remote commands.

---

✨ Features

• Multi-platform — One protocol for Web (JS), Python, Java, C#, Android, iOS
• Ring buffer — 10,000 entries in-memory, FIFO auto-overwrite, no disk I/O overhead
• Bidirectional RPC — Not just log collection: send commands & get results back
• Filter & Query — By project, module, level, time range
• MCP Ready — Built-in Model Context Protocol server for AI agent integration
• Zero config — Drop in debug.js or devlog_client.py, start collecting

---

🏗 Architecture

┌─────────────────────────────────────────────────────┐
│                 DevLogCenter Server                   │
│                                                       │
│  ┌──────────────────────┐  ┌──────────────────────┐  │
│  │   WebSocket Server    │  │   MCP Server          │  │
│  │   (asyncio)           │  │   (modelcontextprotocol)│  │
│  │                       │  │                       │  │
│  │  ★ Log ingestion      │  │  tools: query_logs   │  │
│  │  ★ RPC relay          │  │         exec_js      │  │
│  │  ★ Client registry    │  │         capture_canvas│  │
│  └──────────┬───────────┘  │         run_test      │  │
│             │              │  resources: log://     │  │
│  ┌──────────▼───────────┐  └──────────────────────┘  │
│  │   RingBuffer          │                            │
│  │   (10,000 FIFO)       │                            │
│  └──────────────────────┘                            │
└─────────────────────────────────────────────────────┘
            │                        ▲
     WebSocket                   MCP Protocol
            │                        │
            ▼                        │
┌──────────────────┐      ┌──────────────────────┐
│   Your App        │      │   AI Agent            │
│                   │      │   (OpenClaw / Claude) │
│  debug.js (Web)   │◄────►│                      │
│  devlog_client.py │      │   Query logs          │
│  (Python)         │      │   Execute RPC         │
└──────────────────┘      │   Take screenshots    │
                          │   Run tests            │
                          └──────────────────────┘

---

🚀 Quick Start

1. Start the server

cd server
pip install -r requirements.txt
python main.py --port 8765

Optional: Start with MCP server for AI agent integration:

python main.py --port 8765 --mcp-port 9000

2. Connect your app

Web (JavaScript)

<script src="debug.js" data-ws="ws://localhost:8765" data-project="my-app"></script>

Python

from devlog_client import DevLogClient

client = DevLogClient("ws://localhost:8765")
client.connect(project="my-service")

client.info("Service started", module="bootstrap")
client.warn("Memory usage high", module="monitor")
client.error("Connection lost: timeout", module="network")

Java / C# / Android / iOS

Protocol documentation at docs/protocol.md.

3. Verify

# Check server health
curl http://localhost:8765/health

# Connect with a test client
python -c "
from devlog_client import DevLogClient
c = DevLogClient('ws://localhost:8765')
c.connect(project='test')
c.info('Hello from CLI')
input('Press Enter to exit...')
"

---

📦 Project Structure

DevLogCenter/
├── server/                      # Server (Python)
│   ├── main.py                  # Entry point
│   ├── ws_server.py             # WebSocket handler + RingBuffer
│   ├── requirements.txt
│   └── devlog_output.log        # Runtime log
│
├── client-web/                  # Web client
│   ├── debug.js                 # JS SDK (log + RPC + auto-report)
│   └── plugins/                 # Extensions
│       ├── fp-helper.js         # Honeywell FP preview helpers
│       └── screenshot.js        # Canvas screenshot
│
├── client-python/               # Python client
│   └── devlog_client.py         # Python SDK (log + RPC callback)
│
├── client-java/                 # Java SDK (WIP)
├── client-csharp/               # C# SDK (WIP)
├── client-android/              # Android SDK (WIP)
├── client-ios/                  # iOS SDK (WIP)
│
├── skills/                      # OpenClaw Skill
│   └── SKILL.md
│
└── docs/
    ├── protocol.md              # WebSocket protocol spec
    └── architecture.md          # Architecture deep-dive

---

📋 WebSocket Protocol

Protocol Overview

Client → Server:  Log reports, RPC results
Server → Client:  RPC commands, connection acknowledgments
Server ↔ AI:      MCP protocol (optional)

Message Types

hello — Client registration

{
  "type": "hello",
  "payload": { "project": "my-app", "version": "1.0.0" }
}

log — Log report

{
  "type": "log",
  "payload": {
    "project": "my-app",
    "module": "auth",
    "level": "error",
    "message": "Token expired",
    "stack": "Error: ...",
    "timestamp": 1703275200000,
    "extra": { "userId": 123 }
  }
}

rpc — Command from server to client

{
  "type": "rpc",
  "id": "rpc_001",
  "method": "execJS",
  "params": { "code": "document.title" }
}

rpc_result — Response from client

{
  "type": "rpc_result",
  "payload": { "id": "rpc_001", "result": "My App Title" }
}

---

🛠 Built-in RPC Methods

Method	Description	Returns
ping	Connection health check	"pong"
getState	App state (version, modules...)	{ version, modules, ... }
getLogs	Console history	[{ level, message, time }, ...]
execJS	Execute JavaScript	Any JSON
captureCanvas	Screenshot a canvas element	base64 PNG
getDOM	Query DOM element properties	{ tag, id, text, rect, ... }
runTest	Run registered test cases	{ passed, failed, results }

---

🤖 MCP Integration (AI Agent)

When MCP is enabled, AI agents (OpenClaw, Claude, etc.) can:

┌─────────────────────────────────────────────────┐
│  MCP Tools                                        │
│                                                   │
│  query_logs(project, level, since)               │
│  ├─ Filter logs, get insights                     │
│                                                   │
│  exec_js(project, code)                          │
│  ├─ Run JavaScript in connected browser           │
│                                                   │
│  capture_canvas(project, selector)               │
│  ├─ Take a screenshot of a canvas element         │
│                                                   │
│  run_test(project, test_name)                    │
│  ├─ Execute registered test cases                 │
│                                                   │
│  get_state()                                     │
│  ├─ List connected clients and their info         │
│                                                   │
│  MCP Resources                                    │
│  log://{project} — Stream recent logs             │
└─────────────────────────────────────────────────┘

Example: Debug with AI

You:  "哈皮，看看页面为什么报错"
DevLogCenter: 
  → query_logs(project="my-app", level="error")
  → "看到 barcode-layer 报坐标未定义"
  → capture_canvas(project="my-app", selector="#canvas")
  → "条码位置在画面外，BARMAG 值太大了"
You: "改成 5"
DevLogCenter:
  → exec_js(project="my-app", code="document.querySelector('#input').value = '5'")
  → capture_canvas(project="my-app", selector="#canvas")
  → "现在显示正确了 ✅"

---

📊 Demo: ScannerOCRService

DevLogCenter was built alongside ScannerOCRService, a Honeywell scanner OCR service. The integration:

Scanner Hardware
  → Serial / HID
  → ScannerOCRService (Python)
    → devlog_client.py (logs + RPC)
      → DevLogCenter Server
        → MCP → OpenClaw AI

Result: AI can connect to a physical scanner, trigger image capture, run OCR, and return results — all through DevLogCenter's logging and RPC pipeline.

---

📄 License

MIT

---

👥 Credits

Built by 光哥 & Harvey (AI)

"Your AI can see what your app is doing."