debug

@junctionjs/debug

In-page debug panel for Junction. Real-time visibility into event flow, consent state, and destination status.

Zero dependencies. Vanilla DOM in a shadow root. Toggles with a keyboard shortcut.

Features

• Events tab — real-time event stream with syntax-highlighted payload expansion, text filtering, color-coded badges
• Consent tab — visual consent state per category with click-to-toggle for testing
• Destinations tab — registered destinations with traffic-light status and per-destination send/error counts
• Context tab — live snapshot of page info, device, UTM params, session, and user identity
• Status bar with aggregate counters (valid, invalid, sent)
• Ring buffer retains the last 500 events (configurable)
• Dark theme, shadow DOM isolated, collapses to a small fab button

Install

npm install @junctionjs/debug

Usage

import { createDebugPanel } from "@junctionjs/debug";

// Attach to your collector (e.g., window.jct)
const panel = createDebugPanel(window.jct, {
  shortcut: "ctrl+shift+j", // keyboard toggle
  position: "bottom-right",
  startOpen: false,
  maxEvents: 500,
});

// Programmatic control
panel.open();
panel.close();
panel.toggle();
panel.destroy();

// Access the event store directly
const entries = panel.store.getEntries();
const counters = panel.store.getCounters();

License

MIT