Customize The Debug Layer

The debug layer is part of the Babylon.js repository and can be customized in the same way as Babylon.js can.

Before following any of the steps below knowing how to customizing Babylon.js in general is required.

This can be gained by reading

How to Start Contributing to Babylon.js

In addition for those using Visual Studio as an IDE you can read

Setup Visual Studio to contribute to Babylon.js

Setting the project

As all the code of the debug layer lies in Babylon.js repository, you have first to follow this tutorial to setting up your IDE.

Compile the library

In a terminal, type :

cd Tools/Gulp
gulp typescript

Run the test task

Once this is done, run the test task (CTRL + SHIFT + P) and type test then press enter.

Open the url : http://localhost:1338/inspector/index.html You should be able to see the test file (see next) for the inspector.

Updating the test file

The test file is: /inspector/test/index.js (here in Github) You can update the test file, and press F5 in your browser to check the changes.

Adding a new TS file in the project

If you want your file to be taken into account during the compilation process, you have to add it in the file config.json located in /Tools/Gulp in the inspector rule.

Create a new color theme

You can update all variables defined in the file /inspector/sass/defines.scss

Creating a new tab

All tabs are in the folder inspector/src/tabs. By default, you can have two kind of tabs:

• A tab with nothing (see StatsTab, TextureTab...) : your class should extend Tab
• A tab with a tree list and a detail panel (see MeshTab, MaterialTab...) : your class should extend PropertyTab

Create a new tab that extends one of these class. Your tab should be then added to the Tab Bar (class TabBar)

Creating split panel

You can create a resize bar with the following code:

Split([element1, element2], {
    blockDrag: this._inspector.popupMode,
    direction: direction
});

Where element1 and element2 are two HTML div, and direction is either 'vertical' or 'horizontal' (vertical = element1 is above element2)

Further Reading

The Debug Layer Facilities The Debug Layer in Projects