How To

Display and Use the Debug Layer

How to Display and Use The Debug Layer


You can display the debug layer by calling:;


Provided your project is running on a server the debug layer is automatically loaded from the BabylonJS server when it is called as above.

By default, this url is :

You can update this URL by setting the variable:

BABYLON.DebugLayer.InspectorURL = 'http://myurl/babylon.inspector.bundle.js';

To use the debug layer when your project is stored and run locally with an internet connection then you need to load the debug layer directly

<script src=></script>

To use the debug layer locally with no internet connection you will need to obtain a copy of the file from


A config object can be given to the show method in order to control the following parameters of the debug layer :

  • popup : boolean - Should the debug layer open by default in popup mode ? False by default
  • initialTab : number - The first tab displayed by default - 0 by default (corresponding to the Scene tab)
  • parentElement : HTMLElement - The HTML element where the debug layer should be created - nul by default (will be created along the canvas)
  • newColors : An object containing new CSS colors for the inspector. This object should contain the property backgroundColor, backgroundColorLighter,backgroundColorLighter2,backgroundColorLighter3, color,colorBot,colorTop, where color is the text color, color top and bottom are two colors used to display data (properties, mouse hover, tooltip...)

    initialTab : 2, 
    newColors: {
        backgroundColor: '#eee',
        backgroundColorLighter: '#fff',
        backgroundColorLighter2: '#fff',
        backgroundColorLighter3: '#fff',
        color: '#333',


It is possible to attach Observer to an Observable called when a property is modified in the debug layer. You can call it like this :

scene.debugLayer.onPropertyChangedObservable.add((result) => {});

The result object contains :

  • object : BABYLON.Node - The object modified. It can be a scene, a mesh, a light or any other element that can be modified in the debug layer
  • property : string - The modified property name.
  • value : any - The new value.
  • initialValue : any - The old value, before the modification.

Further Reading

The Debug Layer Features
How To Customize the Debug Layer