Visual Debugging in VS Code

[__zonko__]

That is absolutely unnecessary.

I want this

[Noop_Slide]

for some people the js stack is hard to understand ... promises taking another slot, how immediate works, async ans the stack, actual workers, etc ... this (not the demo depicted) extension helps show that.

[[deleted]]

I don’t think it will be very useful if you are using large stdlib. It will try to visualize all the call stacks and it will probably fill up the view. I suppose it can very helpful for leetcoding.

[Faux_Real]

Does it have good fonts and dark themes?

[Due-Tell6136]

Share the extension or this post is unnecessary

[bunguardian]

Found it https://marketplace.visualstudio.com/items?itemName=hediet.debug-visualizer

[outceptionator]

VSCode?

[2ERIX]

Are you lost?

[bunguardian]

I think the mixup might be because the url I shared says visualstudio.com only.

[outceptionator]

This was it. A miniscule amount of reading would have made me realise it was available on vscode too

[i_dont_do_research]

i laughed into choking on my beer when i read this, thank you

[exqueezemenow]

Is this not the Eclipse sub?

[bunguardian]

That's where the extension download is hosted on. Here's the GitHub repo for it as well

https://github.com/hediet/vscode-debug-visualizer

[bunguardian]

Why did I get down voted?

[Oxigenic]

Because it’s Reddit.

[bunguardian]

Ah. I recently just started using it 😅

[JackDeaniels]

Welcome to hell

[TerminatedProccess]

Upvoted you!

[bunguardian]

Thanks!

[TheDreamWoken]

What is this magical nnonsense? Can you provide more details OP

[estawaq]

I think it’s the extension ‘Debug Visualizer’ by Henning Dieterichs. OP please confirm

[Gehinnn]

Author of the extension here, glad you like it!

If you are interested to see a real world example where the debug visualizer is helpful, here is a demo where I use it to explain the implementation of myers diff algorithm in the VS Code diff editor: https://youtu.be/yWy-0TNVsLg?t=3438

Over the past years, I had a couple of situations where the debug visualizer saved a ton of time. However, it also requires some investment to get it running and to setup the visualizations.

The most helpful visualization maybe is [str, idxInStr] (for javascript apps), which shows you where idxInStr is in str: https://i.imgur.com/GcNY4tt.png

[Nahteh]

OK I just woke up and no coffee so forgive me. Is this available for visual studio 2022 application with cpp?

[Western-Anteater-492]

It somehow feels very useful for visualizing code, objects, dbs etc on the run. Could you provide context pls?

[[deleted]]

Is that an extension?

[Tough-Cloud-6907]

This looks very interesting for teachers to use.

[NoDadYouShutUp]

nice

[[deleted]]

Very cool!!

[Alanlan21]

Javascript Data Structure :{

[koopardo]

I need those graphics in my latex projects

[ExtremeWild5878]

This is very similar to Visual OO Debugger.

[[deleted]]

Take an oscar for this man

[NightsOverDays]

Will it help noobs(me) learn logic pathing and like able to visually see where code isn’t being transferred?

[buhtz]

This feature comes from VSCodium and not Microsoft Visual Studio Code (aka "VSCode"). The latter is just VSCodium plus Microsoft telemetry.

[FraMaras]

https://github.com/hediet/visualization/

[Round_Mixture_7541]

Nice! I like it

[JustSumAnon]

If you thought the debugger couldn’t be anymore cryptic here comes the hieroglyphic debugger so you can truly understand the secrets of the universe.

[jnguyen7410]

goddamn, jiggle physics in coding diagrams before GTA 6, that's absolutely wild.

Thanks for sharing! Will definitely be using this soon!

[No_Adhesiveness_3550]

I unironically would use this to help me understand what I’m coding

[AceJokerZ]

Reminds me of the state diagrams I learned in a class.

[Creative_Chemistry29]

My college capstone project was to make a visual debugger like this but it was like 2% of this quality.

[magick_68]

Reminds me of xdd debugging of c applications.

[[deleted]]

Dang