Is the debugLayer supposed to look like this?

Questions
1

Hi!

I’m new to babylon and I’m trying to show the debugLayer like this:

let scene = new BABYLON.Scene(engine);
scene.debugLayer.show({
  embedMode: true,
});

But it shows up like this:

That can’t be right, can it?
Thanks

2

It is likely to be your css stye. Can you debug your DOM elements and check the css properties of your parent element for canvas and inspector?

3

Thanks. You’re right it was something about the styles. Yet, I can’t seem to fix it.
This is the best I could come up with:

I’ve got

 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;

…all the way from html and body and down.

If I press the Breakout window button it still looks wrong

4

It is hard without manipulating the css in the dev tool. What happens if you remove display: flex style?

Applying position:absolute, 100% width and height for the canvas and its parent divs. Hover the div to make sure the highlight area does cover the full screen. And leave the inspector to its original style should work.

1 Like
5

You can also exclude the inspector in your css so that it is not modified with the pseudo class :not():

#yourDiv:not(#inspector)

check the id of the inspector to add it in the not()

3 Likes
6

Hello @phero just checking in, are you still having issues?