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 debug layer
Several tools are available, from left to right :
Each feature is represented on a tab:
|Name||Description||Top Panel||Bottom panel|
|Scene||Display some information about the current scene||Toggle render modes||Display scene properties|
|Console||Display console messages||Hook all console.log messages||Display all logs related to babylon.js (callled with BABYLON.Tools.Log)|
|Stats||Display statistics data||Display stats|
|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|
|Mesh||Display mesh data||The list of mesh, sorted by their names.||The selected mesh properties|
|Shader||Display vertex and fragment shader||A combo list with all custom shaders||The vertex and fragment shaders|
|Light||Display light data||The list of light, sorted by their names.||The selected light properties|
|Material||Display material data||The list of material, sorted by their names.||The selected material properties|
|GUI||Display GUI information. Only displayed if BABYLON.GUI is included in the project||The list of BABYLON.GUI, sorted by their name||The selected BABYLON.GUI primitive properties|
|Physics||Display physics data||List of physics objects sorted by name||The selected physics object properties|
|Camera||Display camera data||The list of camera, sorted by their names.||The selected camera properties|
| Audio | Display all sounds | The list of sounds, sorted by their names. | The selected sound 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.