Intro to Visual Studio Code Debug Visualizer
Tags: tooling, vscode, debug, algorithms
Published: 2020-11-14 10:29:10

[Debug Visualizer](https://marketplace.visualstudio.com/items?itemName=hediet.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.

![Command Palette](https://raw.githubusercontent.com/algorithmshub/intro-to-vscode-debug-visualizer/main/static/images/command-palette.png "Command Palette")

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

![Debug Visualizer: New View](https://raw.githubusercontent.com/algorithmshub/intro-to-vscode-debug-visualizer/main/static/images/debug-visualizer-new-view.png "Debug Visualizer: New View")

Visualizer view:

![Debug Visualizer](https://raw.githubusercontent.com/algorithmshub/intro-to-vscode-debug-visualizer/main/static/images/debug-visualizer.png "Debug Visualizer")

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

![Command Palette](https://raw.githubusercontent.com/algorithmshub/intro-to-vscode-debug-visualizer/main/static/images/command-palette.png "Command Palette")

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.

![Debug Visualizer: Use Selection as Expression](https://raw.githubusercontent.com/algorithmshub/intro-to-vscode-debug-visualizer/main/static/images/debug-visualizer-use-selection-as-expression.png "Debug Visualizer: Use Selection as Expression")

Download sample JavaScript repository [here](https://github.com/hediet/vscode-debug-visualizer/tree/master/demos/js) 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.

![Visual Studio Code and set breakpoint at line 69](https://raw.githubusercontent.com/algorithmshub/intro-to-vscode-debug-visualizer/main/static/images/visual-studio-code-and-set-breakpoint-at-line-69.png "Visual Studio Code and set breakpoint at line 69")

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

![Start Debugging](https://raw.githubusercontent.com/algorithmshub/intro-to-vscode-debug-visualizer/main/static/images/start-debugging.png "Start Debugging")

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

![Debug Visualizer Input](https://raw.githubusercontent.com/algorithmshub/intro-to-vscode-debug-visualizer/main/static/images/debug-visualizer-input.png "Debug Visualizer Input")

Debug Visualizer show the graph as following.

![Debug Visualizer Graph](https://raw.githubusercontent.com/algorithmshub/intro-to-vscode-debug-visualizer/main/static/images/debug-visualizer-graph.png "Debug Visualizer Graph")

<hr />

Thanks for reading ❤

Follow us to catch the newest Algorithms articles:

* GitHub: [AlgorithmsHub](www.github.com/algorithmshub)
* Twitter: [AlgorithmsHub](www.twitter.com/algorithmshub)
* LinkedIn: [AlgorithmsHub](www.linkedin.com/algorithmshub)
* FB: [AlgorithmsHub](www.facebook.com/algorithmshub)