@gyral/devtools

Gyral devtools: an in-page timeline of messages, state, commands and stores (development builds).

npm install @gyral/devtools

Writing code? Start from working code, not from this page. Devtools. Adapt the closest example and check it, then look a name up here when you are about to call it.

Generated from the package's type declarations. Entry points: @gyral/devtools.

@gyral/devtools

Functions

mountDevtools

function mountDevtools(options?: DevtoolsOptions): MountedDevtools;

Mounts the panel and starts listening. Events arrive in batches (one per microtask), so a burst of messages renders once. Returns a handle to remove everything again.

Types and interfaces

You rarely write most of these yourself: TypeScript infers them from the functions above. Look one up when an example or a compiler error names it.

DevtoolsOptions

interface DevtoolsOptions {
    /** Start with the panel open. Default false. */
    readonly open?: boolean;
    /** Where to append the panel. Default document.body. */
    readonly parent?: Element;
    /** Toggle shortcut: a KeyboardEvent.code with Alt+Shift. Default 'KeyD' (Alt+Shift+D). */
    readonly shortcutCode?: string;
}

MountedDevtools

interface MountedDevtools {
    readonly panel: InstanceType<typeof DevtoolsPanel>;
    /** Removes the panel, the hook and the shortcut. */
    readonly unmount: () => void;
}