Inspector v2.0 is ready for testing

[Deltakosh 4315]

He is here and already deployed to sandbox and Playground

Feel free to report any issue!

[Deltakosh 4315]

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

[Dad72 916]

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.

[Deltakosh 4315]

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 916]

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

 

[Deltakosh 4315]

What is the error message?

[Dad72 916]

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)

[Deltakosh 4315]

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 916]

Yes I suspected that Jquery was there for something.

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

[Deltakosh 4315]

Can you try with this guy:

babylon.inspector.bundle.zip

[Dad72 916]

I have the same error.

[Deltakosh 4315]

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

[Dad72 916]

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.

[Deltakosh 4315]

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

Which browser are you using to get this error?

[Dad72 916]

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

[Dad72 916]

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.

[Deltakosh 4315]

ok cool thanks!

[V!nc3r 223]

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

[Dad72 916]

@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. 😁

[Deltakosh 4315]

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

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

[Dad72 916]

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.

[Deltakosh 4315]

my pleasure as always  Glad that it worked!

[Dad72 916]

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:

 

[Deltakosh 4315]

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 916]

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.