Jump to content

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.

Link to comment
Share on other sites

  • 2 weeks later...
  • 2 weeks later...

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.

Link to comment
Share on other sites

  • 1 month later...
Link to comment
Share on other sites

  • 2 weeks later...

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.

Link to comment
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()

Link to comment
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;


Link to comment
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) 



Link to comment
Share on other sites

  • 1 month later...

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...