Import "@babylonjs/inspector" 'breaks' VSCode debugging

Questions
1

Hello everyone,

I use a clean setup using VSCode, NPM, and Webpack. As soon as I import "@babylonjs/inspector", debugging kinda breaks:

  • Stepping through the code becomes thrice as slow (takes ~2 seconds each step for me).
  • Hovering variables never shows their value anymore.

Is the inspector so heavy that the debugger gives up on some functionality?

I’d love to know if you have the same issue and if I can somehow solve this.

  • I uploaded a sample repo on GitHub
  • The breaking change is in line 3 of index.ts - uncomment the inspector import (which seems required or it will throw trying to open it) and debugging goes awry as stated above.
2

cc @RaananW

3

The inspector is not so heavy, as much as it also includes many other packages (like gui, serializers, loaders and so on), that it might take a little while for your debugger to catch up. Is it working in chrome but fails in vscode, or is chrome not working as well?

4

Thanks for replying. I did some more testing with these results; it seems only the bolded issue below remains:

  • Stepthrough speed is only slow during scene setup code, and ~instant in code called by the main loop. Behaves the same in Edge-Chromium or VSCode. (It is additionally slower in the setup code if the inspector is included, but while that’s slightly annoying, it’s the main loop debugging that matters more to me).

  • Variable hovers always work in Edge-Chromium (albeit with a short delay). But in VSCode they break everywhere once the inspector is included (even in code called by the main loop which steps through performantly).

I wonder if I should throw my repo at the VSCode devs so they can check why this happens. Unless you have an idea what else I could check / do here. Also wonder if I’m the only one with this issue despite using clean setups for this; unless I misconfigured something in webpack or so… my PC also shouldn’t be too slow with an i7-6700K… :thinking:

5

TBH I haven’t tested it in a while. Want to share your project with us? I can do that same and see if I get the same results

6

Sure! I posted a link to a sample repo above: GitHub - RayKoopa/babylonjs-inspector-debugging: Demonstrates debugging issues with VSCode once the babylonjs inspector is imported.
The variable hovers break in VSCode if you keep the inspector import in index.js, and work if you comment it out.

1 Like
8

So! If i can suggest a solution - use devtool: "eval-cheap-source-map" instead of inline source maps when debugging. Then vscode works correctly:

image
image958×1030 80.1 KB

I believe the file sizes with inline source maps are just really big and drive vscode a bit crazy… But this is not an official explanation, of course :slight_smile:

1 Like
10

Thanks so much! That helps indeed! I noticed some breakpoint lines don’t match up with what’s actually being executed during setup with these source maps, but once in the main loop, they seem fine.

I guess I’ll remember that in case I run into it another time, though if someone else finds this topic… please reply, because then it feels like it should be reported to the VSCode team (since it works in Edge-Chromium)…

1 Like