Website URL

Twitter

Skype

Location

Interests

Having more Three.js experience where the general practice is to define your variables globally at the top, I'm getting used to keeping them local when that's all I need (most Babylon.js examples seem to do this), but I'm of course unable to inspect them in the browser console to look at the topology.
This is a pretty general open-ended question, but mostly I'm wondering what's the best way to still be able to inspect when using local variables? I'm more generally wondering what's the best Babylon.js practices with respect to what I'm asking.
Thanks!

Hi,
Today I was playing around with BABYLON.EngineInstrumentation (babylonjs version v3.1-beta-2) and found this playground in your docs: https://www.babylonjs-playground.com/#HH8T00#1
If you enable the debug layer and choose the "Stats" tab everything working fine.
But if you switch to any other tab and switch back to "Stats" again, you get a console error "Uncaught TypeError: Cannot read property 'getEngine' of null".
Is there anything broken with the Inspector on this version?
Best regards,
Ller

When I invoke "scene.debugLayer.show()", using the current nightly BJS builds, as soon as the inspector bundle loads and runs I get an error like:
Exception: ReferenceError: __extends is not defined at
http://www.babylonjs.com/babylon.inspector.bundle.js:408:12893 at INSPECTOR
(http://www.babylonjs.com/babylon.inspector.bundle.js:408:13544) at Object.<anonymous>
(http://www.babylonjs.com/babylon.inspector.bundle.js:408:13575) at __webpack_require__
(http://www.babylonjs.com/babylon.inspector.bundle.js:21:30) at Object.<anonymous>
(http://www.babylonjs.com/babylon.inspector.bundle.js:49:19) at __webpack_require__
(http://www.babylonjs.com/babylon.inspector.bundle.js:21:30) at
http://www.babylonjs.com/babylon.inspector.bundle.js:41:18 at
http://www.babylonjs.com/babylon.inspector.bundle.js:44:10
If I grab the inspector bundle file out of the github "/dist" folder and src it in my html locally I get the same error.
Am I missing something?
Edit: tagging @Temechon

1. A parameter to specify an HTMLElement for the Inspector to add itself to?
2. Could the inspector take a parameter for which tab to start on?
Reasons: (1) So games with a UI can see the inspector, and (2) so I can use it as an FPS meter
I know I'm late to this party, but since it's such a big feature an options argument might be warranted:
scene.debugLayer.show({
popup: false,
parentElement: document.body,
initialTab: 3,
})
...or similar.

Hello everybody,
As you surely noticed it, the old debug layer has been reworked in something bigger... called the "inspector".
This tool has the goal to become the 'F12 tool' of our beloved engine, without replacing the official editor. It's dedicated to HELP the developer by providing some debug features. You will find almost every feature from the debug layer, and much more: display shaders code, display textures used on materials, check stats, enable lights...
All properties are refreshed almost in real time (actually every 200ms for performances reasons). AND you can update any value (among strings, numbers and booleans) by clicking on it and pressing 'enter'.
Sure, there is still work to do and bugs to fix. But in the current state, we decided that it is already more useful than the debug layer was.
I'm still working hard on it, don't worry ! You can also help me a lot by reporting every kind of bugs in this thread and even contribute to its development.
In the next days, I'll first fix all the annoying display and integration bugs. Then, I'll work on :
- Restore clickables labels from the old debug layer (for Dad72 and DK )
- Update the documentation (of course)
- How to contribute (add a new tab, add a new tool, change panel color theme...)
- Add new features ! (Cameras, particles, textures, audio, animations...)
- <insert your suggestion here>
I'm having a lot of fun to work on this, and I really hope you will find it as useful as I do !
Cheers

[uPDATE] The plugin can now display RenderTexture on WebGL So last August I posted this [WIP] Phaser Inspector Plugin. Though I have yet to solve the problem I mentioned in the topic, I have managed to have time to create a release for the plugin, in an entirely new look. The new plugin provides a floating, resizable, minimize-able panel for inspecting Display Objects and States. The plugin is available here and you can try out a demo here. Working features: Display objects tree inspection.Display object class guessing.Display object name guessing (by looking for this./name/ in parents).Text as name for Phaser.Text.Display objects non-case-sensitive search by name and class.Display object destroy/kill/hide.Properties inspection and editing.Texture display for sprite/imageBounds drawingStates list and state changeFloating, resizable and draggable panelPanel remember position on page reloadClose/minimize panelPlay/Pause buttonUpcoming features: Transparent/Clickthrough panelSprite/Image load TextureOptimize when displaying too many display objects on the tree Here are some "promo" images

Some weeks ago I was given a task to solve a problem with a Phaser game that it performed poorly on older devices (in this case the acient iPhone 4). The project was complicated, and some parts were very poor written, so I had a very hard time understanding it . Therefore I started to look around for some way to inspect the scene, to see what is on the screen, what is happening. The only one I found is phaser-debug. Obviously, the plugin helped me a lot with the problem, but it has its limitation. The inspection isn't realtime, which means the object list and the selected object's properties information isn't updated until I click refresh or open/close the debugging panel, which each time, reset the list and I have to find the object again and again. Not only it's inconvenient, it also doesn't allow me to understand what is really happening with the object. Therefore I created another plugin to fit my needs, based on the css style and html of phaser-debug. Currently the functionalities are: - Realtime inspection of current state. - Showing current texture of the sprite (down to the current frame) - Clickthrough toggle, - Bounds drawing (using div box). - Search (not-realtime, since the computation is too heavy). You can find a footage here on youtube. (I forgot to show the search functionalities ). As you can see, there are still a lot of css bugs, so I am gonna have to do it again. I would also add something like play/pause button and state listing and switching. I am also looking in to mobile screen simulation for the plugin too (I know how to add this but really didn't have time since I would also have to change my build process ). Anyway, with this plugin, I have solve my problem with the project and soon, I would like to release an usable plugin to everyone There is one problem that I haven't been able to solve myself : How can I make a functionality to allow me to click on the scene and get the object that I currently clicked on without actually have the on click signal dispatched? I mean, I wouldn't want to go through all the visible object and temporary disabling their handler, the developer might do something to it that interfere with this in the update during the inspection, right? Also, if you would like to have some extra functionalities in the release of this plugin, please also tell me here . I would like to look in to an add on system for this plugin but, er, I have zero experience on this .