How to Debug in Vizhub?

I am using Viz hub to try to prototype a d3 force graph.

It has been some time since i used vizhub, and i have struck a problem.

There seems to be no ability to debug.

When I try to use Ctrl-Shift I to open the developers console, i find that errors are cleared, due to code in index.js. When i investigate this source, i find my own index.js code not present, and instead there is code from some other source (your bundle.js perhaps?)?

How can i debug this code? below for a link
Stix D3 Force Graph (vizhub.com)

1 Like

Interesting… Thank you for sharing that example link!

What you are seeing is the console being cleared out before the code gets run. So any runtime errors that your code generates should be visible because they come after the console was cleared. It looks like in your case, the code does not generate any errors when it runs, it just doesn’t have the desired behavior.

For this sort of debugging, it’s the same as you would do if developing in VSCode or any other editor. I personally love to use console.log to see what’s going on. I notice that some errors do get generated when you try to zoom in your example, so that might be something to look at.

Also if I right-click and inspect your SVG element, it’s showing an empty <g> element. That might be another good lead to investigate, as it looks like the data is not getting into the DOM.

Good luck!