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. The selected target's attachment can be previewed live in a corner of the viewport.
• Textures: every texture on the device, largest GPU footprint first, with the same live preview. Texture values elsewhere, such as the maps of a material, link here.
• 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; // show again with the backquote key
Copy

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.