Inspector v2.0 is ready for testing

[GameMonetize]

He is here and already deployed to sandbox and Playground

Feel free to report any issue!

[Guest]

Doc: https://doc.babylonjs.com/features/playground_debuglayer

[Dad72]

Hi,

It's great, I just tried, but it does not work at home. The previous inspector was working.

Are there any special things that need to be added ?

I add :

<script src="JS/babylon.inspector.bundle.js"></script>

And use :

scene.debugLayer.show({embedMode: true, handleResize: true});

But nothing is displayed and in the console I have:

I do not know if it's a z-index question. My project uses a contener layout which is add in a jquery-ui dialog. I have several layers between the body and the canvas. It worked with the former inspector.

[Guest]

Can you try with this version and give me the error message?

Or even better deploy it somewhere so I can debug live: babylon.inspector.bundle.zip

[Dad72]

Ok.

Here is the error that I have:

My project is not online, I am local. I heard something some time ago that there was maybe conflict with Jquery and React and my project uses Jquery has 80% for are interface and DOM modification.

I tried on another Field Editor project that does not have as much layer overlay for the canvas and it works.

If you really want something debug live I'll try to do it tomorrow. I think it's because my canvas is in a Jquery-UI dialog box

 

[Guest]

What is the error message?

[Dad72]

Uncaught TypeError: root.pendingInteractionMap.forEach is not a function
    at renderRoot (react-dom.development.js:16493)
    at performWorkOnRoot (react-dom.development.js:17387)
    at performWork (react-dom.development.js:17295)
    at performSyncWork (react-dom.development.js:17267)
    at requestWork (react-dom.development.js:17155)
    at scheduleWork (react-dom.development.js:16949)
    at scheduleRootUpdate (react-dom.development.js:17637)
    at updateContainerAtExpirationTime (react-dom.development.js:17664)
    at updateContainer (react-dom.development.js:17691)
    at ReactRoot../node_modules/react-dom/cjs/react-dom.development.js.ReactRoot.render (react-dom.development.js:17957)

[Guest]

Oh yeah! This is the common crap coming from jQuery: they replace the forEach property of all arrays

Let me check if I can find a workaround

[Dad72]

Yes I suspected that Jquery was there for something.

Thanks for the workaround. And thank you for this wonderful new tool.

[Guest]

Can you try with this guy:

babylon.inspector.bundle.zip

[Dad72]

I have the same error.

[Guest]

rats! This is the very latest version  So we won't find a fix in the React world

[Dad72]

Yes I heard about it, the incompatibilities between Jquery-UI and React. My project uses Jquery dialog and tabs ... and all the editors are integrated into Jquery-UI.

I made a complete overhaul of my editor Web Game Editor where all my editors instead of being in tabs are in dialogs to open the windows that we need.

[Guest]

Wait I may have an idea..Can you revert to the public version?

Which browser are you using to get this error?

[Dad72]

I use Google Chrome. Yes I can go back to the previous version of Babylon.

[Dad72]

I do not know why, but the old inspector does not want to work anymore. Before the editor was in a tab() and it worked, now he is in a dialog(), I do not know if it creates the problem, but I will test tomorrow outside my editor and I will tell you more surely with live demo.

[Guest]

ok cool thanks!

[V!nc3r]

Looks like very nice enhancement, nice job. Haven't tried it in local projet for now, but will do for sure

[Dad72]

@Deltakosh. Good after several tests, it works and I understood, I think, why.

Here is how I reproduced a problem (on teste3.html):

The inspector disappears after the creation of the Layout: http://www.babylon.actifgames.com/teste3.html (I do not know if this is an expected / normal result?)

In this example we can see that it works if the layout is created before the scene : http://www.babylon.actifgames.com/teste4.html

On my project, my layout is created when the dialog opens (If I do it when loading the page, my layout has value 0 in height because the dialog is not yet displayed.) The engine and the scene is it loads at the start of the page, we are, I think as in the example teste3.html.

So, if what happens in teste3.html is normal I'll have to start the engines and scene after the layout is built, or you think it's a bug to fix... .In any case I had 'Intent to make my engines run when I open the dialogs to create less engine compared to my previous design by tab (8 engines was load. I will try to load only 1 engine per open dialog and have them dipose() when we close the dialog)

I will make an announcement very soon of my version 3.0 of Web Game Editor where I did something very original for its new design. ?

[Guest]

This is because you change the display:grid of the canvas host:

I restored from display:block to display:grid and it works

[Dad72]

Ok, I found the conflict on my project, I had a class that I named Map

class Map {}

By renaming it MapBox class everything is good. The inspector is displayed.

Thank you DK and sorry for the inconvenience.

[Guest]

my pleasure as always  Glad that it worked!

[Dad72]

Everything seems to work well, I have not found any problem for the moment. ?

Else, I really like how the grid is made and I wondered how it was made, is there a PG or can we find this grid?  How is this done? I would like to do the same. Thanks

 

I'm still experimenting with this new toy to get to know it, it's really a cool and fluid tool.

Little thing, I tend to click on the text to open Nodes, Materials, Textures ors that you have to click on the little more. Maybe the event could be added to the text as well?

Something else :

The text is not complete here:

 

[Guest]

4 minutes ago, Dad72 said:

Little thing, I tend to click on the text to open Nodes, Materials, Textures ors that you have to click on the little more. Maybe the event could be added to the text as well?

Should be fixed now

All incomplete text (because of lack of space) can be read by hovering them 

 

The code for the grid is here: https://github.com/BabylonJS/Babylon.js/blob/master/inspector/src/components/actionTabs/tabs/propertyGrids/gridPropertyGridComponent.tsx#L41

[Dad72]

Thank you for the grid code.

Another little thing. When I select a sphere for example and go to Display and activate infinite distance, the sphere disappears and if I deactivate the sphere does not reappear.
I do not know if it's a bug or normal behavior.