@undertone/debug

A dev-overlay debug panel for @undertone/core. One fixed-position panel with live param values and scrubbable sparklines, per-layer gain meters, sfx flashes, and asset residency with decoded-memory totals.

npm i -D @undertone/debug

@undertone/core is a peer dependency — the panel attaches to a soundscape you already created.

Use

attachDebug(sound, options) mounts the overlay and returns a detach function. Load it behind a flag and a dynamic import so it never reaches visitors:

import { sound } from './audio'

if (new URLSearchParams(location.search).has('debug')) {
  void import('@undertone/debug').then(({ attachDebug }) => attachDebug(sound, { corner: 'br' }))
}

const detach = attachDebug(sound, { corner: 'br' })
detach() // removes the panel and stops polling

Options

| Option | Default | What it does | | --- | --- | --- | | corner | 'bl' | Panel position: 'bl', 'br', 'tl', 'tr'. |

The panel reads through core's debug port, so it observes the graph without changing it — no extra nodes are inserted into the audio path.

License

MIT. See LICENSE.