Good bye Debug Layer, Hello Inspector !

[adam]

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.

http://www.babylonjs-playground.com/#XXPKC

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.

http://www.babylonjs-playground.com/#XXPKC#1

edit: 

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.

[Wingnut]

Yep, good point, and well-said, Adam.  Plus, there's console.dir(someobject) which I recently learned-about, and that... is really something, too. 

[adam]

console.table is pretty cool too:

http://www.babylonjs-playground.com/#XXPKC#2

[V!nc3r]

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

[Temechon]

Great idea Vincer, I'll add it to the list ! The loging of all manual modification could be awesome !

[Temechon]

New feature (PR waiting for approval) : Console tab !

With this new tab, you can have access to console output and Babylon logs (used with BABYLON.Tools.Log). 
 

[Dad72]

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.

[Temechon]

Eh, my mistake here  Sorry dude, I'll post a new screenshot in few minutes

Here we are :

 

[Dad72]

It is excellent, clean. Thank you for this new Console

[jerome]

wonderful

[GameMonetize]

Updating PG with new inspector

[Temechon]

Hello community, 

The inspector has been updated recently. The documentation is up to date here : 

http://doc.babylonjs.com/overviews/using_the_debuglayer

http://doc.babylonjs.com/overviews/debug_layer_features

http://doc.babylonjs.com/overviews/customize_debug_layer

 

[mr_pinc]

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.

[GameMonetize]

the version in github is the 3.0

https://github.com/BabylonJS/Babylon.js/tree/master/dist/preview release

[mr_pinc]

Thanks for the info.  Is there a plan then on when 3.0 might go live?  Any idea on what kind of migration steps might be needed?

[Temechon]

Hey, 

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()

[ian]

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
 bodyViewer.update();
// -----------------------


// and this two functions
// --------------------------
 function PhysicsImposterViewer(physicsPlugin, scene) {
 	
 	this.bodies = physicsPlugin.world.bodies;
 	
 	this.meshes = [];
 	
 	this.boxMesh = BABYLON.MeshBuilder.CreateBox('physicsBodyBoxViewMesh', { size: 1 }, scene); 
 	scene.removeMesh(this.boxMesh);
 	
 	this.boxMesh.rotationQuaternion = BABYLON.Quaternion.Identity();
 	
 	this.sphereMesh = BABYLON.MeshBuilder.CreateSphere('physicsBodySphereViewMesh', { diameter: 1 }, scene); 
 	scene.removeMesh(this.sphereMesh);
 	
 	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;
 		}
 	}
 }

 

[Temechon]

There is no physics tab in the inspector, and there no plan to add it currently. I can add it to the list of features ncie to have, but if you want to do it yourself you can just follow the doc here : http://doc.babylonjs.com/overviews/customize_debug_layer

[ian]

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) 

https://support.google.com/chrome/answer/1342714?p=unauthenticated&visit_id=0-636270794018128874-3129128722&rd=1

Gretings
Ian

[Temechon]

Hi Ian, 

Thank you for your feedback, I'm fixing it right now.

[ozRocker]

Does anyone know how to make this appear on the left side of the screen, instead of the right?

[GameMonetize]

Ping @Temechon

[ozRocker]

Is it possible to use the old inspector?  Does it still exist in the latest babylon.js distro?

[GameMonetize]

nope it was removed 

[ozRocker]

Hello @Temechon  Do you know what's happened to the new inspector?  http://www.babylonjs.com/babylon.inspector.bundle.js returns a "Page not found" error.  I checked the GIT repo and I can't find a babylon.inspector.js file either.