Intro to Visual Studio Code Debug Visualizer

Bunlong — Sat, 14 Nov 2020 10:29:10 +0000

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 ❤

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

DEV Community: Algorithms Hub

Intro to Visual Studio Code Debug Visualizer

Supported Languages

Installation

Usage