
## What Is It?

Babylon.js inspector is a visual debugging tool created to help pinpoint issues you may have with a scene.

For a video overview of the inspector, check out [Introduction to the inspector - video series](/toolsAndResources/tools/inspector/inspectorVideoOverview).

The inspector offers multiple tools like:
- A hierarchical view of your scene
- Multiple property grids to let you dynamically change object properties
- Specific helpers like the skeleton viewer, etc.

Its interface uses two panes:
- The scene explorer pane
- The inspector pane



![debug layer overview](/img/features/debuglayer/debuglayer.jpg)

The two panes can also be opened in an embedded mode:

![embed mode](/img/features/debuglayer/embedmode.jpg)

## Scene explorer pane

![scene explorer](/img/features/debuglayer/sceneExplorer.jpg)

The scene explorer displays a hierarchical view of your scene. You can filter by name in the filter bar if you want to find a specific entry.

By clicking on a line you will select it and the inspector will automatically update to reflect the properties of the selected item.

Some entities offer shortcuts to contextual actions.

## Scene actions

![scene actions](/img/features/debuglayer/sceneactions.jpg)

The scene shortcuts are the following:
- The first 3 actions will turn on a specific gizmo mode (translation, rotation, scaling). When you click on one of them you can then click on a node in the Scene explorer or directly in your scene and it will be controllable with a gizmo:

![gizmo](/img/features/debuglayer/gizmo.jpg)

- The fourth action is a picker. Just pick a mesh in your scene and it will be selected in your scene explorer
- The last one will force the scene explorer to update. For performance reasons, the scene explorer is not listening to all changes that can happen on the scene so you may end up needing to refresh it manually.

## Mesh actions
![mesh actions](/img/features/debuglayer/meshactions.jpg)

The mesh shortcuts are the following:
- The first action will enable the bounding box gizmo:

![bounding box gizmo](/img/features/debuglayer/boundingboxgizmo.jpg)

- The second action will show/hide the mesh.

## Light actions

![light actions](/img/features/debuglayer/lightactions.jpg)

You can use the light action to turn a light on and off.

## Camera actions

![camera actions](/img/features/debuglayer/cameraactions.jpg)

You can use the camera action to switch the active camera (when they are multiple cameras in a scene).

## GUI control actions

![gui control actions](/img/features/debuglayer/controlactions.jpg)

You can use the GUI control actions to:
- Display outline of a control
- Show / hide a specific control

## Rendering pipeline actions

![Rendering pipeline actions](/img/features/debuglayer/renderpipelineactions.jpg)

When your scene does not contain a default rendering pipeline, you can right-click on the rendering pipelines node to get a context menu letting you create a new default rendering pipeline.


## Inspector pane

The inspector pane contains 4 tabs:

![inspector](/img/features/debuglayer/inspector.jpg)

- The property grid which will display configurable controls for the current selected entity:

![property grid](/img/features/debuglayer/property.jpg)

- The debug pane will let you turn features on and off. It also let you display a grid and turn viewers (bones or physics) on and off:

![debug pane](/img/features/debuglayer/debugpane.jpg)

- The statistics pane gives information about all metrics captured by the engine:

![stats pane](/img/features/debuglayer/statspane.jpg)

- The tools pane lets you access utilities (like screen capture or recording as well as several tools related to glTF):

![tools](/img/features/debuglayer/tools.jpg)

## Popup mode

You can move any pane into a popup mode by clicking the icon right left to the close button in the pane header:

![popup](/img/features/debuglayer/popup.jpg)

## Specific debug tools

Specific debug tools can be found across the inspector:

## Render grid

This tool (available in the Debug pane) will render a grid on the (0,0,0) plane:

![grid](/img/features/debuglayer/grid.jpg)

## Bones viewer

This tool (available in the skeleton property grid) will render your skeletons:

![bones](/img/features/debuglayer/BonesView.png)

## Skeleton Map Shader

This tool (available in the mesh property grid when the mesh has an attached skeleton) will render a unique color on the mesh, for each bone, showing their total contribution:

![bones](/img/features/debuglayer/BonesMap.png)

## Bone Weight Shader

This tool (available in the mesh property grid when the mesh has an attached skeleton) will render a heat map showing the selected bones contribution:

![bones](/img/features/debuglayer/BonesWeight.png)

## Physics viewer

This tool (available in the Debug pane) will render your physics impostors:

![physics](/img/features/debuglayer/physics.jpg)

## Normal painter

This tool (available in the property pane when you select a mesh) will paint the normals on your active mesh:

![paint normal](/img/features/debuglayer/paintnormal.jpg)

## Vertex normal viewer

This tool (available in the property pane when you select a mesh) will render the vertex normals of a mesh:

![vertex normal](/img/features/debuglayer/vertexnormal.jpg)

## Texture painter

This tool (available in the property pane when you select a material with textures in it) will render the texture directly as an emissive one:

![texture painter](/img/features/debuglayer/texturepainter.jpg)


## Creating Shaders The Easy Way

Creating shaders can be a very dense and complicated process, often requiring knowledge of glsl and a strong understanding of how shaders work. Starting with Babylon.js 4.1, the Node Material Editor was introduced. This amazing tool is a visual editor allowing you to connect blocks together to make shaders. It's really that simple. 

<img src="/img/how_to/Materials/nme1.jpg" title="Babylon.js Node Material Editor"/>

You can jump in and play around with it here: <nme id="" title="Node Material Editor" description="The starting basic template for creating Node Materials." image=""/>

For an introductory look at the Node Material Editor, check out where it all started with this video:

<Youtube id="34uIGJH0ySU"/>

When you're ready to learn more, head on over to the [Node Material Documentation](/divingDeeper/materials/node_material/nodeMaterial) for more info.

You can also dive into the API that powers it all here: [API documentation.](/typedoc/classes/babylon.nodematerial)


## Creating Particles The Easy Way

Babylon.js has a feature-rich, powerful particle system. Babylon.js 4.2 introduced a new tool to make it simple and easy to leverage this powerful system. The Babylon.js Particle Editor. Built right into [The Inspector](/toolsAndResources/tools/inspector), creating particle systems is now as easy as right-clicking!

<img src="/img/tools/particleEditor.jpg" title="Babylon.js Particle Editor"/>

You can jump in and play around with it here: <Playground id="#M7MYT8#11" title="Particle Editor" description="Simple example of particles using the particle editor." image=""/>

For an introductory look at the Particle Editor, check out where it all started with these videos:

<Youtube id="BPJ0SZQnOXk"/>

<Youtube id="HgcUkTZmWyA"/>

<Youtube id="mKTD2P1lF9Q"/>

When you're ready to learn more about particles and particle systems, head on over to the [Particle System Documentation](/divingDeeper/particles/particle_system).



## The Playground

The place to try out coding with Babylon.js. [Playground](https://playground.babylonjs.com/)

Experimenting and changing any code in the playground and clicking on the **Run** button will not affect any original code in the playground you currently using. 
Original code can be restored by refreshing the browser.

You can write the code in JavaScript or Typescript. The playground software compiles the code to JavaScript, in the background, before rendering.

## Overview

![Playground Overview](/img/how_to/Introduction/playground.jpg)

The Playground consists of four areas:

- a menu bar at the top
- a links bar at the bottom
- a coding editor on the left
- a rendering area of the right.

The space for the coding editor and rendering area can be adjusted by dragging the vertical bar between them.

## The Menu

![Playground Menu](/img/how_to/Introduction/pgmenu.jpg)

In Typescript mode the menu has an orange color theme

![Playground Typescript Menu](/img/how_to/Introduction/pgmenu_ts.jpg)

### Large Screen

- **Title and Version**: As stated.
- **Language**: Typescript/JavaScript switch.
- **Run** ![run](/img/features/PGsupport/run.jpg): Commands the playground to try to render your scene.
- **Save** ![save](/img/features/PGsupport/save.jpg): Causes your scene to be permanently stored in the playground's database and it will issue a unique URL for each save. On save you will be asked to complete the metadata so that it can be searched for. Once saved it is a good idea to bookmark the page so you can return to it later. You could then share the URL with others, for example, if it is not working as you expect you can ask a question in the forum along with the link to your playground.
- **Download** ![zip](/img/features/PGsupport/zip.jpg): Allows you to download a zip file named *sample.zip*. Once downloaded and unzipped, you will see a file named `index.html` 
which contains everything necessary to run the code in your browser, including links to external *babylon.js* and other files.
- **New** ![new](/img/features/PGsupport/new.jpg): Places a basic `createScene()` function into the editor along with code to initialise the scene variable and provide a camera.
- **Clear** ![clear](/img/features/PGsupport/clear.jpg): Empties all the code out of the playground editor.  You could then paste in any createScene function you are working on locally.
- **Settings** ![set](/img/features/PGsupport/set.jpg): The Settings button has a sub menu with extra options
  - *Theme*: Choose the theme for the playground
  - *Font size*: Set the font size in the editor.
  - *Safe Mode*: When the checkbox is ticked the playground issues a "leaving the page?" confirmation warning when you try to unload/reload a freshly-edited, un-saved scene.
  - *Editor*: The checkbox hides or un-hides the editor portion of the playground.
  - *Full Screen*: Makes the render area full screen.
  - *Editor Full Screen*: Makes the editor area full screen.
  - *Format Code*: Pretty prints the code.
  - *Minimap*: Display the minimap of the code editor.
  - *Inspector*: The checkbox toggles the playground scene inspector which shows a multitude of variable values.
  - *Metadata*: This is where you describe your playground allowing yourself and other to search the playground database for examples of use.
- **Version**: Allows and shows your choice of the BABYLON.js framework, either the current stable one or the latest preview version.
- **Examples** ![examples](/img/features/PGsupport/ex.jpg): A drop down menu giving examples of playgrounds with a search filter.

### Small Screens

- **Menu** ![menu](/img/features/PGsupport/menu.jpg): Contains Run, New, Clear, Save and Zip as submenus.
- **Code** ![code](/img/features/PGsupport/code.jpg): Bottom Left Corner - switch to Code View and Editor.
- **Scene** ![scene](/img/features/PGsupport/scene.jpg): Bottom Right Corner - switch to Scene View.

## Playground URL formats

New playgrounds have this URL format

| JavaScript | Typescript |
|---|---|
| https://www.babylonjs-playground.com/# | [https://www.babylonjs-playground.com/#](https://www.babylonjs-playground.com/#) |

Saved playgrounds have a hash code reference key added to the URL

| JavaScript | Typescript |
|---|---|
| https://www.babylonjs-playground.com/#6F0LKI | [https://www.babylonjs-playground.com/#M1HI7X](https://www.babylonjs-playground.com/ts.html#M1HI7X) |


After editing any saves of the playground are numbered incrementally from one, for example 

| JavaScript | Typescript |
|---|---|
| https://www.babylonjs-playground.com/#6F0LKI#1 | [https://www.babylonjs-playground.com/#M1HI7X#1](https://www.babylonjs-playground.com/ts.html#M1HI7X#1) |
| https://www.babylonjs-playground.com/#6F0LKI#2 | [https://www.babylonjs-playground.com/#M1HI7X#2](https://www.babylonjs-playground.com/ts.html#M1HI7X#1) |
  
etc.

You might be interested to know that [some html templates](https://github.com/BabylonJS/Babylon.js/tree/master/Playground) are also available:

Template | Description
--- | ---
[full.html](https://www.babylonjs-playground.com/full.html#6F0LKI#2) | show the render area in full screen
[frame.html](https://www.babylonjs-playground.com/frame.html#6F0LKI#2) | show the render area in full screen, but with a bottom toolbar showing FPS, reload and edit buttons
[indexStable.html](https://www.babylonjs-playground.com/indexStable.html#6F0LKI#2) | use the BJS stable version, not the preview one
[debug.html](https://www.babylonjs-playground.com/debug.html#6F0LKI#2) | used to run a version of the playground which uses debug version of babylon.js
[index-local.html](https://www.babylonjs-playground.com/index-local.html#6F0LKI#2) | used for local development using VSCode

## Forum sharing

Of course the playground is extremely useful to get help from the community. In the forum, simply paste the link of your playground.

You can have fun showing directly your playground imbedded into your message, using iframe. But take note that you have to be sparing with this functionality: this will slow down the loading of your topic.

```html
<iframe src="https://www.babylonjs-playground.com/frame.html#6F0LKI#2" width="400px" height="250px" ></iframe>
```

![playground forum sharing ways](/img/features/pgsupport/pg-forum-sharing-ways.jpg)
> *so many ways to share an issue*

## Compilation Errors

![compilation error popup](/img/features/pgsupport/pg-compilation-error.jpg)

Any errors in your playground are flagged with a red pop-up box containing limited information. After making an adjustment to your code, you need not close the compilation error pop-up.  It should close automatically at the next Run, if all errors have been corrected.

Please note that you can name your main function `delayCreateScene` instead of `createScene` if you want to return a scene without a camera (because for instance you plan to load a scene using `SceneLoader`).

## Focus

Whenever a scene in the playground needs the use of keys to move an object, such as a mesh or camera, around then the rendering area needs to have the focus. After running the playground ensure that the render area has the focus by clicking inside it before using the keys. 


## Debugging Skeletons and Rigging Issues

When something isn't working right, simple debugging tools can help us identify and fix the issue quickly. This is Babylon.js 4.2 added an all new Skeleton Viewer. Built right into [The Inspector](/toolsAndResources/tools/inspector), from rendering bones and joints, to visualizing skin weights, the Skeleton Viewer is sure to make it quick and easy to debug pesky rigging issues inside your scene.

<img src="/img/tools/skeletonViewer.jpg" title="Babylon.js Skeleton Viewer"/>

You can jump in and play around with it here: <Playground id="#KK9Z6D#1" title="Skeleton Viewer" description="Simple example of the skeleton viewer in The Inspector." image=""/>

When you're ready to learn more about the different skeleton viewer options, head on over to the [Skeleton Viewer Documentation](/toolsAndResources/tools/inspector#bones-viewer).


## Creating Sprites The Easy Way

Babylon.js has a sprite system with many features and components. Babylon.js 4.2 introduced a new tool to make it simple and easy to leverage this powerful system. The Babylon.js Sprite Editor. Built right into [The Inspector](/toolsAndResources/tools/inspector), creating sprite managers and controlling sprites is now as easy as right-clicking!

<img src="/img/tools/spriteEditor.jpg" title="Babylon.js Sprite Editor"/>

You can jump in and play around with it here: <Playground id="#G3Q7GR#1" title="Sprite Editor" description="Simple example of sprites using the sprite editor." image=""/>

For an introductory look at the Particle Editor, check out where it all started with these videos:

<Youtube id="v02wuOGD0Sg"/>

When you're ready to learn more, head on over to the [Introduction to Sprites Documentation](/divingDeeper/sprites/sprites_introduction) for more info.


## Using the Texture Inspector

The Texture Inspector is designed to enable you to debug your textures inside of Babylon. Users often load in textures and find that they do not appear as expected. Unexpected results can be related to transparency, UVs, or unique texture types such as cubemaps. The Texture Inspector allows you to investigate issues and even fix them in-engine.

## How to Access

![Accessing the Inspector](/img/features/debuglayer/texture/access.png)
The Texture Inspector can be accessed from the main inspector panel. Simply select a texture from the list, and click the "edit"  button underneath the texture preview.

## Properties

![Properties Bar](/img/features/debuglayer/texture/properties.png)

### Dimensions

The width and height of the texture are shown in pixels. Editing these values and then clicking the dashed rectangle will resize the texture.

### Pixel Inspection

These values show the coordinates and RGBA values of the pixel under the cursor.

### MIP Levels

Adjust the MIP level you are viewing. Some textures do not have mipmaps. Clicking the down button will take you to lower levels of detail.

### Reset, Upload, Download

The reset button restores the texture to its original state before it was opened in the inspector. The upload button allows you to upload a local file (.png, .jpeg, .dds, and .env are currently supported.) The download button will save the texture to your local machine using the name displayed in the bottom left.

### Faces (Cubemaps only)

When inspecting a cubemap, you can click through the 6 buttons to view the faces of the cubemap.

## Tools

![Toolbar](/img/features/debuglayer/texture/tools.png)

### Rectangle Select

Selects a region of the texture. When you have a reigon selected, edits will only be applied to that region. Press Escape to clear the selection.

### Paintbrush

Paints the active color onto the texture. The size slider controls the width of the brush. The paintbrush will always apply the exact active RGBA value, rather than blending with what's currently on the canvas.

### Eyedropper

Sets the active color to the RGBA value of clicked pixels.

### Floodfill

Floods the entire texture or selected region with the active color and alpha.

### Active Color

Displays the active color and alpha, which are used by other tools. Clicking opens a panel which allows precise manipulation of the RGBA values.

## Channels

![Channel Pane](/img/features/debuglayer/texture/channels.png)
This pane is used to control the RGBA channels. Clicking the eye icons on the left will hide individual channels, allowing you to narrow your focus to particular channels. Clicking the letter on the right will lock a channel, meaning that any edits you perform will not affect that channel.

## Shortcuts

-   Mousewheel and the +/- buttons allow you to zoom in and out
-   The middle mouse button allows you to pan across the texture
-   Control+A selects the entire texture
-   Escape deselects everything
-   Control+S saves the texture to your local machine
-   Control+R resets the texture to it’s original state


# Tools and Resources

This section contains all sorts of handy information for developing in Babylon.js. From a rich set of tools to make development easier, to several free asset libraries for you to leverage in your scenes, this section is sure to help you make the most beautiful experiences possible, as quickly and effeciently as possible!


Tools

Coming next

Playground

Learn about the incredibly powerful playground, the online Babylon.js IDE.

The Inspector

Learn all about the incredibly powerful debug layer called "The Inspector" in Babylon.js.

The Node Material Editor

Learn all about the powerful Node Material Editor in Babylon.js.

The Particle Editor

Learn all about the Particle Editor in Babylon.js.

The Sprite Editor

Learn all about the Sprite Editor in Babylon.js.

The Texture Inspector

Learn all about the texture inspector in Babylon.js.

The Skeleton Viewer

Learn all about the Skeleton Viewer in Babylon.js.