Good bye Debug Layer, Hello Inspector !

Recommended Posts

For those who are new to the built-in browser developer console, you can easily inspect objects by simply calling console.log(myObject).

Here you can modify the position of the sphere in realtime.


Press f12 and go to the console tab, and then inspect the sphere.  Find the position property and modify the values of it.

If you want to debug a playground, simply add the word "debugger" where you want your breakpoint to be and open the dev console and press run.  Then press f10 or f11 to step through your code.



this was in response to:

8 hours ago, Wingnut said:

Anyway, I would love to see an object/mesh inspector... with insane amounts of power. 

to let users know there are currently ways to inspect objects even though it might not be in the BJS inspector.

Share this post

Link to post
Share on other sites

Great job, nice enhancement !

Is there a way to log all manual modifications which are made ? This could be allowing to easily patch a scene.

And another suggestion : include color picker for color values :)

Share this post

Link to post
Share on other sites

You can not see the picture, you have to have an account. And that requires our company name, the number of people, what you do and a lot of questions that I would do without to answer. I abandon my registration because too many questions.

I do not know where I am. I do not want to register, I do not feel concerned.

Why not display the image directly on the forum? This is not an image that should require an inscription. I do not understand.

Share this post

Link to post
Share on other sites

Share this post

Link to post
Share on other sites

Question, the docs say the new inspector is only available in version 3.0 which explains why it doesn't work in my 2.5 app.  Does that mean we won't see the inspector in any version between now and 3.0?  Also is there a public way to test 3.0, the Github page only has 1 branch.

Share this post

Link to post
Share on other sites


You have to use the v3.0-preview. So download it here: https://github.com/BabylonJS/Babylon.js/blob/master/dist/preview release/babylon.js

and download this file: https://github.com/BabylonJS/Babylon.js/blob/master/dist/preview release/inspector/babylon.inspector.bundle.js (to use it locally).

Insert both in your html file and you're done.

No migration is needed as it'is used like the old fashion way : debuglayer.show()

Share this post

Link to post
Share on other sites

Just one notice.
Can you add to view where are physics impostors/colliders?
Or is this already in inspector?

RaananW did something like that (maybe is another/better way but this is sometime good/handy to se where are coliders)

// add this in render loop
// -----------------------

// and this two functions
// --------------------------
 function PhysicsImposterViewer(physicsPlugin, scene) {
 	this.bodies = physicsPlugin.world.bodies;
 	this.meshes = [];
 	this.boxMesh = BABYLON.MeshBuilder.CreateBox('physicsBodyBoxViewMesh', { size: 1 }, scene); 
 	this.boxMesh.rotationQuaternion = BABYLON.Quaternion.Identity();
 	this.sphereMesh = BABYLON.MeshBuilder.CreateSphere('physicsBodySphereViewMesh', { diameter: 1 }, scene); 
 	this.sphereMesh.rotationQuaternion = BABYLON.Quaternion.Identity();
 	var mat = new BABYLON.StandardMaterial('', scene);
 	mat.wireframe = true;
 	this.boxMesh.material = mat;
 	this.sphereMesh.material = mat;
 	for (var i = 0; i < this.bodies.length; i++){
 		var body = this.bodies[i];
 		var shape = body.shapes[0];
 		var mesh;
 		if (shape.halfExtents) {
 			mesh = this.boxMesh.createInstance('physicsBodyView' + i);

 			mesh.scaling.x = shape.halfExtents.x * 2;
 			mesh.scaling.y = shape.halfExtents.y * 2;
 			mesh.scaling.z = shape.halfExtents.z * 2;
 		} else if(shape.boundingSphereRadius){
 			mesh = this.sphereMesh.createInstance('physicsBodyView' + i);
 			mesh.scaling.x = shape.boundingSphereRadius * 2;
 			mesh.scaling.y = shape.boundingSphereRadius * 2;
 			mesh.scaling.z = shape.boundingSphereRadius * 2;
 		this.meshes[i] = mesh;

 PhysicsImposterViewer.prototype.update = function () {
 	for (var i = 0; i < this.bodies.length; i++){
 		var body = this.bodies[i];
 		var mesh = this.meshes[i];
 		if (mesh) {
 			mesh.position.x = body.position.x;
 			mesh.position.y = body.position.y;
 			mesh.position.z = body.position.z;
 			mesh.rotationQuaternion.x = body.quaternion.x;
 			mesh.rotationQuaternion.y = body.quaternion.y;
 			mesh.rotationQuaternion.z = body.quaternion.z;
 			mesh.rotationQuaternion.w = body.quaternion.w;


Share this post

Link to post
Share on other sites

just find some problem...

babylon.js:3 Mixed Content: The page at 'https://..................' was loaded over HTTPS, but requested an insecure script 'http://www.babylonjs.com/babylon.inspector.bundle.js'. This request has been blocked; the content must be served over HTTPS.

Just find some problem. (Mybe in future try host http://www.babylonjs.com/babylon.inspector.bundle.js also with https https://www.babylonjs.com/babylon.inspector.bundle.js)..

WHIT NO SELF SIGN CERT !!! (MAYBE WITH Let's Encrypt Authority X3) 



Share this post

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.