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
    constructor
    paused physicsDraw physicsDrawOptions selected visible
    destroy fire hasEvent off on once select step
    EVENT_VISIBLE

    • 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 });
    • 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: InspectorPhysicsDrawOptions): 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

      Returns void

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

      The node selected in the hierarchy, or null.

      Returns GraphNode | null

    • set visible(value: boolean): void

      Whether the panel is shown. Toggled by the toggle key.

      Parameters

      • value: boolean

      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

    • 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

    • 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

    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'}`);
    });

    Settings
    Member Visibility

    On This Page
    Constructors
    Accessors
    Methods
    Events