Intro to Visual Studio Code Debug Visualizer

Debug Visualizer is a vscode extension for visualizing data structures while debugging.

Supported Languages

These languages and debuggers are verified to work with this extension: JavaScript/TypeScript, Go, Python, C#, PHP, Java, C++, Swift, Rust.

Installation

Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.

ext install hediet.debug-visualizer

Usage

After installing this extension go to View and click on Command Palette (Ctrl + Shift +P) of VS Code.

And use the command Debug Visualizer: New View to open a new visualizer view.

Visualizer view:

And then go to View and click on Command Palette (Ctrl + Shift +P) of VS Code again.

And use the command Debug Visualizer: Use Selection as Expression (Shift + F1) to use the currently selected text as expression in the most recently opened debug visualizer.

Download sample JavaScript repository here and following command line:

$ cd demos/js
$ npm install
$ npm run dev

Open demo_sorting.ts in Visual Studio Code and set breakpoint at line 69.

And then go to Run and click on Start Debugging (F5) of VS Code.

And then input the variable array that you want to debug.

Debug Visualizer show the graph as following.

---

Thanks for reading ❤

Follow us to catch the newest Algorithms articles:

• GitHub: AlgorithmsHub
• Twitter: AlgorithmsHub
• LinkedIn: AlgorithmsHub
• FB: AlgorithmsHub

Comments

[Ben Sinclair]

I've spent 2 minutes looking at those screenshots and have no idea what I'm looking at!

There's a line graph that's somehow connected to an array (out of many possible drop-down items all called "array"), but this is found by selecting a variable of unspecified type called "index".