Un debugger, qualsiasi sorgente.

BeeLadybug è un overlay di telemetria e ispezione visiva open source. Riceve pacchetti grezzi da giochi Canvas 2D, pagine DOM, bot headless, processi Python e pipeline AI, e li mostra in un’unica console scura.

Il Core non sa cosa sta monitorando. Riceve solo dati grezzi.

Installazione

bash

npm i bee-ladybug

L’overlay vive in uno Shadow DOM, non sul Canvas: funziona sopra un gioco, sopra una pagina o da solo in una sandbox, senza toccare i tuoi stili.

Quick start

1. Avvia un server statico

I moduli ES non partono da file://.

bash

python -m http.server 8080

2. Importa il Core

app.js

import { BeeLadybugCore } from 'bee-ladybug';

const bee = new BeeLadybugCore();
bee.sendData('log', { message: 'boot', source: 'app' });

3. Invia pacchetti

Tutto passa da sendData(type, payload). Ogni pacchetto riceve wallTime, simTime e frame.

bee.sendData('fps',    { value: 61 });
bee.sendData('metric', { name: 'heap', value: 42, unit: 'MB' });
bee.sendData('warn',   { message: 'slow frame' });
bee.sendData('error',  { source: 'ai', message: 'timeout' });

fpsmetriclogwarnerror Tabella completa dei tipi in Concetti → Contratto sendData.

4. Modalità headless

Per bot, test o Node senza DOM: nessuna UI, solo buffer e clock.

const bee = new BeeLadybugCore({ ui: false, mount: false, autoAttach: false });
bee.sendData('metric', { name: 'loss', value: 0.12 });

Tasti rapidi

Tasto	Azione
`F2`	Mostra / nascondi overlay (e hitbox canvas)
`F3`	Slow-motion del tempo fittizio (`0.25x` / `1x`)
`F4`	Freeze / run del tempo fittizio
`F6`	CSS hunt, se `CSSAdapter` è attaccato
`P`	Blocca il pannello CSS sull’elemento corrente (hunt attiva)
`S`	Scansione CSS (hunt attiva)

Niente F12 né tilde: sui layout italiani la tilde non è un tasto unico.

Scegli un adapter

Gli adapter traducono un mondo specifico in sendData(). Il Core resta cieco.

▣CanvasAdapterHitbox, collisioni, FPS e coordinate per giochi Canvas 2D. ⌗WebDOMAdapterBox model, nodo sotto il puntatore, mutazioni del DOM. ◎CSS hunt!important, overflow, stacking context e click intercettati. ⋰AntAdapterMutationObserver sul DOM: avvisa quando un nodo supera la soglia di mutazioni al secondo. ✶SpiderAdapterPerformanceObserver: segnala long task oltre 50 ms e risorse lente. ⟩_PythonBridgeInvia metriche da un processo Python all’overlay.

▶ Prova in console

Apri la pagina col server attivo, premi F2 e incolla nella console del browser:

console

bee.sendData('log', { source: 'human', message: 'hello core' })
bee.sendData('fps', { value: 61 })
bee.sendData('error', { source: 'ai', message: 'timeout' })

Poi premi F4: il clock fittizio si ferma, l’overlay no.