[SOLVED] How to inspect example variables in developer console?

Questions
1

Seems that some official examples are now inside <script type="module">. How can I get a variable from inside the example into the Chome’s developer Console?
For example I would like to write “scene” into the console and inspect its value. This was possible, when the main variables were in the global scope.

Example of an example that is inside the <script type="module">:
https://threejs.org/examples/webgl_materials_cubemap_dynamic.html
Pressing F12 in Chrome and writing “scene” gives an error.

2

Just place a breakpoint in the render loop, when your in it you can access the module scope from the console.

1 Like
3

Actually all of them were migrated^^.

Apart from breakpoints, the developer tools of three.js are another way for inspecting the scene:

1 Like
4

Okay, thanks. Breakpoint seems to work.

The tool does not seem too usable yet. For the linked example it shows me only 1 mesh in the scene and 2 BoxBufferGeometry objects, instead of the cube, knot and sphere.

5

You can just put console.log( scene ) in the code.

But I guess you mean doing this with the live example on threejs.org, which means that you can’t edit the code. I think that the chrome console allows you to pause scripts and check the value of a variable without making any changes to the code. Not sure how to do it though.

Hopefully at some point we’ll upgrade the examples to allow code editing like Babylon.js does.

6

Sure, but downloading the examples, running them on a server, changing the code is too much work to just inspect a single variable.

Previously I just did:

  1. F12
  2. Console
  3. write “scene”

But the recommended solution now was:

  1. F12
  2. Source
  3. find the rendering loop
  4. add a breakpoint by clicking on a line number in the loop
  5. write “scene” in the Watch block
  6. resize panels to better see the variable properties if using landscape docking

It is a bit more tedious, but still doable.