pixi-console - v5.1.1
    Preparing search index...

    Class PixiConsole

    An in-canvas developer console for PixiJS v8.

    Captures console.* calls and uncaught errors and renders them on top of your scene, which is invaluable on devices without devtools. Rendering is virtualized: only the visible lines exist as display objects, so tens of thousands of logs cost the same to draw as a screenful.

    The console is a render group of its own, so its text changing with every log doesn't make pixi rebuild the rest of the stage. Don't cache it, or an ancestor, with cacheAsTexture: it would stop updating.

    const app = new Application();
    await app.init({ resizeTo: window });

    const devConsole = new PixiConsole({ autoResize: { renderer: app.renderer } });
    app.stage.addChild(devConsole);

    console.log("Hello from the canvas!");

    Hierarchy

    Index
    constructor
    consoleWidth consoleHeight entries counts filter maxEntries collapseRepeats timestamps captureConsole captureErrors showOnError toolbar toggleKey autoResize prompt promptElement evaluator commands lastResult history scrollY isFollowing
    log info debug warn error print clear show hide toggle addCommand removeCommand execute focusPrompt blurPrompt scrollTo scrollBy scrollUp scrollDown scrollToTop scrollToBottom resize update destroy
    • get consoleWidth(): number

      Width of the console in pixels. Use resize to change it.

      Returns number

    • get consoleHeight(): number

      Height of the console in pixels. Use resize to change it.

      Returns number

    • get entries(): readonly ConsoleEntry[]

      Retained entries, oldest first, including those hidden by the filter. A live view: it changes as entries are added, collapsed into or dropped. Copy it ([...devConsole.entries]) to keep a snapshot.

      Returns readonly ConsoleEntry[]

    • get counts(): Readonly<Record<LogLevel, number>>

      Calls per level that the retained entries stand for, collapsed repeats included. Entries dropped by maxEntries are subtracted, and entries with a kind (command-line input and results) are not counted.

      Returns Readonly<Record<LogLevel, number>>

    • get filter(): ("log" | "info" | "debug" | "warn" | "error")[]

      Levels that are currently displayed.

      Returns ("log" | "info" | "debug" | "warn" | "error")[]

    • set filter(
          levels: readonly ("log" | "info" | "debug" | "warn" | "error")[],
      ): void

      Parameters

      • levels: readonly ("log" | "info" | "debug" | "warn" | "error")[]

      Returns void

    • get captureConsole(): ("log" | "info" | "debug" | "warn" | "error")[]

      console levels currently captured. Assign true, false or a list of levels to change it.

      Returns ("log" | "info" | "debug" | "warn" | "error")[]

    • set captureConsole(
          value:
              | boolean
              | readonly ("log" | "info" | "debug" | "warn" | "error")[],
      ): void

      Parameters

      • value: boolean | readonly ("log" | "info" | "debug" | "warn" | "error")[]

      Returns void

    • get captureErrors(): boolean

      Whether uncaught errors and unhandled promise rejections are captured.

      Returns boolean

    • set captureErrors(value: boolean): void

      Parameters

      • value: boolean

      Returns void

    • get showOnError(): boolean

      Show the console automatically when an error is logged or thrown.

      Returns boolean

    • set showOnError(value: boolean): void

      Parameters

      • value: boolean

      Returns void

    • get toggleKey(): string | null

      Keyboard key (KeyboardEvent.code or .key) toggling the console, or null.

      Returns string | null

    • set toggleKey(key: string | null): void

      Parameters

      • key: string | null

      Returns void

    • get promptElement(): HTMLInputElement | null

      The command line's <input>, created the first time prompt is enabled and kept until destroy; null before that. Use it for placeholder, maxLength, extra listeners or styling. It is only in the document while the console is displayed.

      Returns HTMLInputElement | null

    • get lastResult(): unknown

      What the last line produced: every evaluator result, and command results other than undefined.

      Returns unknown

    • get history(): readonly string[]

      Lines entered at the prompt, oldest first, at most 100. Assign it to restore a saved history, e.g. from localStorage.

      Returns readonly string[]

    • set history(lines: readonly string[]): void

      Parameters

      • lines: readonly string[]

      Returns void

    • get scrollY(): number

      Scroll offset in pixels from the top of the history.

      Returns number

    • get isFollowing(): boolean

      Whether the view sticks to the newest entry.

      Returns boolean

    • Adds a log entry without writing to the browser console. Accepts the same arguments as console.log.

      Parameters

      • ...args: unknown[]

      Returns this

    • Adds an info entry without writing to the browser console.

      Parameters

      • ...args: unknown[]

      Returns this

    • Adds a debug entry without writing to the browser console.

      Parameters

      • ...args: unknown[]

      Returns this

    • Adds a warn entry without writing to the browser console.

      Parameters

      • ...args: unknown[]

      Returns this

    • Adds an error entry without writing to the browser console.

      Parameters

      • ...args: unknown[]

      Returns this

    • Prints a message as-is, optionally in a custom colour.

      Parameters

      Returns this

    • Registers or replaces a command. Names are case-insensitive.

      Parameters

      Returns this

      TypeError when name is not one word matching /^[a-z][\w:-]*$/i.

      devConsole.addCommand("fps", () => app.ticker.FPS.toFixed(1));

    • Unregisters a command, built-ins included. Unknown names are ignored.

      Parameters

      • name: string

      Returns this

    • Runs a line as if it was entered at the prompt: echoes it as > line, runs the matching command or the evaluator, and prints the result. Works whether or not prompt is on. Synchronous results are printed before this returns. Not added to history.

      Parameters

      • line: string

      Returns Promise<unknown>

      The result, awaited when it is a promise; undefined when the line was blank or failed. Failures are printed, never thrown or rejected.

    • Shows the console and focuses the command line. Does nothing when prompt is off. If the input can't be placed yet (renderer not known), it is focused after the next render. On touch devices the on-screen keyboard only opens when this runs inside a user gesture.

      Returns this

    • Removes focus from the command line, closing the on-screen keyboard and returning keys to the page.

      Returns this

    • Parameters

      • y: number

      Returns this

    • Parameters

      • deltaY: number

      Returns this

    • Scrolls up by a number of lines.

      Parameters

      • lines: number = 1

      Returns this

    • Scrolls down by a number of lines.

      Parameters

      • lines: number = 1

      Returns this

    • Scrolls to the newest entry and keeps following new ones.

      Returns this

    • Changes the console size. Text is re-wrapped to the new width.

      Parameters

      • width: number
      • height: number

      Returns this

    • Applies pending changes immediately. This happens automatically every frame the console is rendered, call it only when you need up-to-date layout without rendering (e.g. in tests).

      Returns this

    Settings
    Member Visibility

    On This Page
    Constructors
    Accessors
    Methods