Before babylon.js version 3.0, the debug layer was a very simple HTML interface helping the developer to retrieve some basic data about his project : mesh list, mesh names, logs, stats...
From version 3.0, this debug layer has been replaced by an complete inspector, that can be used to browser a lot of data:
Features are available from either the Tool Bar or the Tab Bar at the top of the Inspector
Several tools are available, from left to right :
If the Inspector window is widened then some tab bar menu items are shown. Alternatively by using the scroll bar the tab bar icon >> will appear, from which you can obtain the full tab bar menu.
|Name||Description||Top Panel||Bottom panel|
|Tools||Display General Tools||Utilities such as generate videos, generate gif, do a screen capture, etc..|
|Audio||Display all sounds||The list of sounds, sorted by their names.||The selected sound properties|
|Camera||Display camera data||The list of camera, sorted by their names.||The selected camera properties|
|Physics||Display physics data||List of physics objects sorted by name||The selected physics object properties|
|GUI||Display GUI information||The list of BABYLON.GUI, sorted by their name||The selected BABYLON.GUI primitive properties|
|GTLF||Display GTLF Utilities||The tools to help you work with glTF: validators, logs, etc..|
|Material||Display material data||The list of material, sorted by their names.||The selected material properties|
|Light||Display light data||The list of light, sorted by their names.||The selected light properties|
|Mesh||Display mesh data||The list of mesh, sorted by their names.||The selected mesh properties|
|Textures||Display all textures||The list of textures available in the scene (images, render target textures, map textures, font textures and dynamic textures)||The texture image. You can right-click - open in a new tab to have perfect dimensions|
|Stats||Display statistics data||Display stats|
|Console||Display console messages||Hook all console.log messages||Display all logs related to babylon.js (called with BABYLON.Tools.Log)|
|Scene||Display some information about the current scene||Toggle render modes||Display scene properties|
In some tabs, a search bar is available to look for a specific object.
The displayed list of properties for the scene can updated manually by clicking on it, updating the new value and press 'Enter'.
As for a scene the displayed list of properties for a mesh can be updated manually.
As for a scene the displayed list of properties for a material can be updated manually.
As for a scene the displayed list of properties for a camera can be updated manually.
As for a scene the displayed list of properties for a sound can be updated manually.