Engine API Reference - v2.23.0-beta.7
    Preparing search index...

    Class Inspector

    An in-page inspector for a running application. It docks a panel over the canvas with four tabs above a live property view of whatever is selected:

    • Hierarchy: the entity tree. The property view shows the node's transform, every component it carries and every script instance with its attributes. The selected node is outlined in the viewport.
    • Frame graph: the render passes of the last frame in execution order, as the render pass trace prints them, with the layer steps of forward passes, the light of shadow passes and optional GPU timings. Render target cells link to the next tab.
    • Render targets: every render target on the device including the backbuffer, with its attachments and the passes that rendered into it this frame, linking back to the frame graph.
    • Physics: the rigid bodies and joints of the scene, with the physics world drawn over the scene through the engine's debug drawer when Ammo is loaded.

    The app can be paused and stepped a frame at a time, and the panel can be popped out into its own window to leave the canvas unobscured.

    The view is read-only, with one exception: the checkbox on each hierarchy row flips the node's enabled flag.

    const inspector = new Inspector(app, { dock: 'left' });
    inspector.visible = false; // toggle with the backquote key

    Default keys: backquote toggles the panel, F9 pauses and resumes, F10 steps one frame while paused. Pausing sets AppBase#timeScale to zero and suspends the sound manager, so rendering continues while every time-driven system stands still. Scripts that read the wall clock rather than the frame delta keep moving.

    The property view is generic: it reflects on the public getters of each component and script, so components it has never heard of show up with all of their state.

    Hierarchy (View Summary)

    Index
    • Creates the inspector and shows its panel. The panel is appended to the document body and follows the app until destroy is called, or the app is destroyed.

      Parameters

      Returns Inspector

      const inspector = new Inspector(app, { dock: 'left', width: 480 });
      
    app: AppBase

    The app being inspected.

    hierarchyInterval: number = 0.5

    Seconds between refreshes of the active list while the app runs. Structure changes show up within this interval. Refreshes are cheap, but not free on very large scenes.

    highlight: boolean = true

    Outline the selected node in the viewport: the bounds of its mesh instances, the frustum of its camera, the shape of its light, or its axes when it has none of those. On the Physics tab, the collision shape or joint of the selected entity.

    highlightColor: Color = ...

    The color of the viewport outline.

    lockedNode: GraphNode | null = null

    A node whose enabled checkbox, and those of its ancestors, are withheld from the hierarchy.

    pauseKey: string = 'F9'

    The key that pauses and resumes the app. Empty disables the key.

    propertyInterval: number = 0.1

    Seconds between property refreshes of the selected item while the app runs.

    stepKey: string = 'F10'

    The key that advances one frame while paused. Empty disables the key.

    toggleKey: string = 'Backquote'

    The KeyboardEvent.code or key that shows and hides the panel. Empty disables the key.

    • set dock(value: string): void

      The side of the viewport the panel docks to.

      Parameters

      • value: string

      Returns void

    • set paused(value: boolean): void

      Whether the app is paused. Pausing sets AppBase#timeScale to zero and suspends the sound manager; resuming restores the time scale that was in effect.

      Parameters

      • value: boolean

      Returns void

    • set physicsDraw(value: boolean): void

      Whether the physics world is drawn over the scene while the panel is shown. The same as the Draw checkbox of the Physics tab. Hiding the panel suspends the drawing; showing it again resumes it.

      Parameters

      • value: boolean

      Returns void

    • set physicsDrawOptions(value: { depthTest: boolean; range: number }): void

      Which parts of the physics world are drawn, mirroring the checkboxes of the Physics tab. Assigning a partial object changes only the options it names.

      Parameters

      • value: { depthTest: boolean; range: number }

      Returns void

      inspector.physicsDrawOptions = { constraints: true, limits: true };
      
    • get selected(): GraphNode | null

      The node selected in the hierarchy, or null.

      Returns GraphNode | null

    • set top(value: number): void

      A gap left above the docked panel in CSS pixels, to keep it clear of other overlays.

      Parameters

      • value: number

      Returns void

    • set visible(value: boolean): void

      Whether the panel is shown. Toggled by toggleKey.

      Parameters

      • value: boolean

      Returns void

    • set width(value: number): void

      The width of the docked panel in CSS pixels. Also adjustable by dragging its inner edge.

      Parameters

      • value: number

      Returns void

    • Removes the panel, releases every hook into the app and restores anything the inspector changed: the time scale while paused, the GPU profiler, the physics debug drawer.

      Returns void

    • Brings a popped-out panel back into the page and closes its window.

      Returns void

    • Fire an event, all additional arguments are passed on to the event listener.

      Parameters

      • name: string

        Name of event to fire.

      • Optionalarg1: any

        First argument that is passed to the event handler.

      • Optionalarg2: any

        Second argument that is passed to the event handler.

      • Optionalarg3: any

        Third argument that is passed to the event handler.

      • Optionalarg4: any

        Fourth argument that is passed to the event handler.

      • Optionalarg5: any

        Fifth argument that is passed to the event handler.

      • Optionalarg6: any

        Sixth argument that is passed to the event handler.

      • Optionalarg7: any

        Seventh argument that is passed to the event handler.

      • Optionalarg8: any

        Eighth argument that is passed to the event handler.

      Returns EventHandler

      Self for chaining.

      obj.fire('test', 'This is the message');
      
    • Test if there are any handlers bound to an event name.

      Parameters

      • name: string

        The name of the event to test.

      Returns boolean

      True if the object has handlers bound to the specified event name.

      obj.on('test', () => {}); // bind an event to 'test'
      obj.hasEvent('test'); // returns true
      obj.hasEvent('hello'); // returns false
    • Detach an event handler from an event. If callback is not provided then all callbacks are unbound from the event, if scope is not provided then all events with the callback will be unbound.

      Use this form to remove all listeners matching a name (and optionally callback/scope). To remove a single known subscription, prefer retaining the EventHandle returned by EventHandler#on / EventHandler#once and calling its EventHandle#off: it removes exactly that subscription and is faster (no scan of the callback list).

      Parameters

      • Optionalname: string

        Name of the event to unbind.

      • Optionalcallback: HandleEventCallback

        Function to be unbound.

      • Optionalscope: any

        Scope that was used as the this when the event is fired.

      Returns EventHandler

      Self for chaining.

      const handler = () => {};
      obj.on('test', handler);

      obj.off(); // Removes all events
      obj.off('test'); // Removes all events called 'test'
      obj.off('test', handler); // Removes all handler functions, called 'test'
      obj.off('test', handler, this); // Removes all handler functions, called 'test' with scope this
    • Attach an event handler to an event.

      Parameters

      • name: string

        Name of the event to bind the callback to.

      • callback: HandleEventCallback

        Function that is called when event is fired. Note the callback is limited to 8 arguments.

      • Optionalscope: any = ...

        Object to use as 'this' when the event is fired, defaults to current this.

      Returns EventHandle

      An event handle. For later removal, prefer retaining this handle and calling its EventHandle#off over EventHandler#off with a name/callback: it removes exactly this subscription and is faster (no scan of the callback list).

      obj.on('test', (a, b) => {
      console.log(a + b);
      });
      obj.fire('test', 1, 2); // prints 3 to the console
      // preferred removal: retain the handle and call off() on it
      const evt = obj.on('test', (a, b) => {
      console.log(a + b);
      });
      // some time later
      evt.off();
    • Attach an event handler to an event. This handler will be removed after being fired once.

      Parameters

      • name: string

        Name of the event to bind the callback to.

      • callback: HandleEventCallback

        Function that is called when event is fired. Note the callback is limited to 8 arguments.

      • Optionalscope: any = ...

        Object to use as 'this' when the event is fired, defaults to current this.

      Returns EventHandle

      An event handle. For removal before it fires, prefer retaining this handle and calling its EventHandle#off over EventHandler#off with a name/callback: it removes exactly this subscription and is faster (no scan of the callback list).

      obj.once('test', (a, b) => {
      console.log(a + b);
      });
      obj.fire('test', 1, 2); // prints 3 to the console
      obj.fire('test', 1, 2); // not going to get handled
    • Moves the panel into its own browser window, leaving the canvas unobscured. Must be called from a user gesture, or the browser blocks the window.

      Returns void

    • Refreshes the active list and the property view immediately.

      Returns void

    • Selects a node, revealing it in the hierarchy and showing its properties.

      Parameters

      • node: GraphNode | null

        The node, or null to clear the selection.

      Returns void

    • Advances the app by one frame. Only meaningful while paused.

      Returns void

    • Parameters

      • key: string

        A KeyboardEvent.code or key.

      Returns string

      The key in brackets for a button label, or an empty string when unset.

    • Parameters

      • key: string

        A KeyboardEvent.code or key.

      Returns string

      The key as shown on a button, or an empty string when unset.

    EVENT_VISIBLE: string = 'visible'

    Fired when the panel is shown or hidden, whether through visible, the toggle key or the panel's own close button. The handler is passed the new visibility.

    inspector.on('visible', (visible) => {
    console.log(`inspector ${visible ? 'shown' : 'hidden'}`);
    });