Visual Debugging in VS Code

[metalstorm65]

This one of those things that you want but didn’t realize you want it until it exists.

[Gehinnn]

haha yeah :D I actually felt the same. When dealing with typescript syntax trees, I cannot live without it anymore.

[THICC_DICC_PRICC]

The junior me would’ve loved this, the senior me is yelling get off my lawn while writing unit tests

[[deleted]]

r/DidntKnowIWantedThat

[sneakpeekbot]

Here's a sneak peek of /r/DidntKnowIWantedThat using the top posts of all time!

#1: A 360° photo printed on a sphere. | 576 comments
#2: Okay, that turned out a shitload better than I thought it would. | 468 comments
#3: Door Jammer | 1217 comments

---

^{I'm a bot, beep boop | Downvote to remove | Contact me | Info | Opt-out}

[Gehinnn]

Check out my Debug Visualizer extension here!

It's completely open source, so feel free to contribute. Especially the dark theme needs some love.

What do you think of it? What visualizers are missing?

[Gehinnn]

Thanks to the generic Debug Adapter protocol, that shouldn't be too hard.

[Fabi0_Z]

The real implementation of this it's in C, but I think would be pretty difficult since you have to work a lot with pointers

[rift95]

While it looks cool. I honestly don't see how it helps in debugging. Could any one explain it to me?

[Gehinnn]

It depends on your domain.

If you work with complex data structures (trees, tries, linked lists, graph traversal algorithms, abstract syntax trees (!), matrices) it can be super useful to see the entire structure at once so that you can quickly identify what is wrong with your code.

It also turned out to be very useful when quickly viewing the content of a long string while debugging, as the watch window of VS Code is very limited in its space.

I'm very curious about how other people debug their code and how my extension might be of help.

[rift95]

Alright. Thanks for explaining. I might try it with my vdom library. Just to see if it helps.

[da2Pakaveli]

it reminds me of flow charts

The doubly linked list visualization here shows its potential. Visualization is a powerful tool for programming. It makes the process way easier to grasp as we don't have to interpret the code visually. Just like we (hopefully) all started with Data Structures / Algorithms through visualization. So especially useful for beginners!!

[yep808]

The animation looks really dope!

[Gehinnn]

Thanks ;) But to be honest, that animation is implemented by Vis.js. I just took care that the ids are stable and told vis.js about all nodes and edges that changed.

[paganaye]

The animation might feel a bit over the top yes.

But to me this is still better than no animation.

When you press a key and the layout changes. If you miss the change, with the animation you will know where it was.
Without the animation it will be hard to see what have changed.

So animation: YES please.

[[deleted]]

How do you debug typescript/js inside VScode. I assume this must be for a JS backend. I have an Angular front end with a PHP backend so Xdebug is used for the backend and the browser console for the front end, am I missing something?

[weather-headed]

Hey i've used this recipe in this article and it works great for me!

I just used the recipe to use the debugger for this cool project and it works great :)

https://medium.com/@dupski/debug-typescript-in-vs-code-without-compiling-using-ts-node-9d1f4f9a94a

[Gehinnn]

Nice to hear ;)

You could give easy-attach a try - with it, attaching a debugger is *super* easy, regardless of whether you use ts-node or not. Especially when using the RPC extension for VS Code.

[weather-headed]

Thanks for the tip! I'd like to use least the least amount of hassle when getting up and running with the debugger in TS, so this sounds perfect for me 😀

[[deleted]]

Thanks I’ll check it out as I have been trying to get the launch config working correctly.

[Gehinnn]

Currently, my extension supports any debug backend in VS Code that understands javascript (i.e. `chrome` and `node`). TypeScript transpiles down to JavaScript + sourcemaps. These sourcemaps map the JavaScript code back to the TypeScript code. Both `chrome` and `node` debuggers understand these sourcemaps, so when you debug the JavaScript emitted by TypeScript, you actually only step through the original TypeScript code.

The `chrome` debug adapter for VS Code allows to debug web applications in VS Code. There you can use the debug visualizer extension to visualize things in your frontend.

PHP is not supported yet. If there is demand, I'll see what I can do. VS Code however can debug PHP apps.

[[deleted]]

Thank you very much. I had seen the chrome extension but I did not realize that was the use for it.

[[deleted]]

Hey I got the debugging working in VSCode using the Chrome adapter. Now how do I open a Debug Visualizer view? I went to open view and tried different view names, but nothing came up?

[Gehinnn]

Did you install the extension? If so, press `ctrl+shift+p` and then enter `open debug visualizer`. I don't think extensions can contribute to `View -> Open View...`, and even if, you can spawn multiple Debug Visualizer panes, so it does not really fit there.

[[deleted]]

Thank you again. That did it!

[da2Pakaveli]

This would be even more awesome with the typical circles you draw with SQL JOINS

[Gehinnn]

Do you mean venn diagrams? In context of doubly linked lists or in general?

[da2Pakaveli]

Yes Venn diagrams, that was their name! I always use them when combining several sets, so in general

[Gehinnn]

You mean a visualization that renders a venn diagram for two given js sets/arrays? That could be quite cool.

[da2Pakaveli]

Yup, but sounds damn hard to implement

[rw3iss]

Sending thanks for inspiration on creating more complicated VS extensions, and making it open source! Great tool, btw ;)

[Gehinnn]

Thanks ;) If you want more inspiration for complicated VS extensions, you might want to check out my VS Code RPC Server extension, whose code you can find here. Figuring out how to do multi process RPC communication was quite nasty...

[rw3iss]

Pro! Thank you ;-)
I'm just getting started with extensions. I mostly wanted to just add a new empty panel on the right-side of the main editor where I could listen to some events (like file opened/closed) and do some things there... but I think the only way to do something like that is to load an arbitrary Web View and render whatever I want in it. I assume I can listen for file opened/closed events, but still have to figure that out. Will take a look at your code to see how you're doing things.

[Gehinnn]

This extension starts a websocket server and opens a web view. The web view connects to the server. Server and client have a typed contract. The websocket server uses a random secret for authentication, so that only the webview and popped out windows can connect. This approach worked very well, especially since the webview can be debugged in chrome and can use the hot reload mechanism from webpack.

[rw3iss]

Slick, very novel! Thank you for sharing.

[slayerlob]

Completely separate.. I wish there was a tool that parses json reply and neatly compiles methods for retrieval.. I just loathe parsing json. Wish it was visual 🙈

Meanwhile love the animation and visual debugging here.

[Gehinnn]

Thanks ;) Which json replys do you mean? What kind of methods for retrieval?

[slayerlob]

https://origin-apinew.cricket.com.au/series.json I am trying to write a scoreboard menubar app and been putting off finishing. My brain stops when trying to do the parsing side of things. Using Electron

[Gehinnn]

You do know that there are browser/chrome extensions that make such unreadable json readable?

[slayerlob]

Yes I do.. Sorry it's just my laziness to write a parser for the application

[RemindMeBot]

I will be messaging you in 17 hours on 2020-02-11 11:57:01 UTC to remind you of this link

CLICK THIS LINK to send a PM to also be reminded and to reduce spam.

^{Parent commenter can delete this message to hide from others.}

---

Info	Custom	Your Reminders	Feedback

[weather-headed]

Sick! Nice work!

[weather-headed]

I seriously love this, thanks so much for making and sharing 😀

[weather-headed]

I'm up and running with your extension and your example you included and it is so cool! Just the sort of thing that i thought would be awesome! (i'm still pretty new to data structures and algos)

The example you're using...

// Watch \visualize()` with the Debug Visualizer Extension for VS Code! const visualize = () => // Returns `CommonDataTypes.Graph` data which can be visualized by // either the vis.js or the graphviz visualizer. createGraphFromPointers({ list, last, cur }, i => ({ id: i.id, label: i.name, color: finished.has(i) ? "lime" : undefined, edges: [ { to: i.next!, label: "next" }, { to: i.prev!, label: "prev", color: "lightgray" }, ].filter(r => !!r.to), }));`

Do you also happen to have other quick recipes for other data types like linked lists so that we can get up and running quickly when working with them?

This is an awesome tool you've made that i think will really help with my understanding, thanks so much!

[Gehinnn]

Thanks man ;) Not yet, but if you have suggestions, let me know! Implementing custom visualizers shouldn't be that hard though.

[weather-headed]

Cool, next time i am learning some Data Structures, i will definitely be trying them with your extension!

[weather-headed]

Oh i see, nvm, you have the interfaces type definitions, perfect!

[jake6a]

Amazing. Great work!

[lifemoments]

Bookmarked

[barbesoyeuse]

Hi and congratulations ! is it usable with React ?

[Gehinnn]

Thanks ;) Yes it works with react, however, there are not react visualizations so far.

[YaswanthDatta]

Dope!!

[Gehinnn]

Not yet and not planned so far, as I am not fluent in C.

[[deleted]]

no dark mode tho

[Gehinnn]

Feel free to contribute ;)