Visual Studio Code — Debug Mode

It has been about a year since I switched to Visual Studio Code (also known as Code or VSCode) as my primary text editor and development environment. VS Code is a beautifully crafted text editor and has a convenient debug mode feature.

I am choosing Javascript as the programming language here to explain how the debug mode works, but this will work over a lot of different programming languages.

Before we begin…

Visual Studio Code

If you are hearing about Visual Studio Code for the first time, this is an editor built at Microsoft which sits between a text editor and a full-blown IDE. It has a high-quality extension ecosystem and a great community around this.

In this article, we will see how to debug a simple Node JS application using Visual Studio Code.

Editor Setup

1. Switch to the debug mode in the editor
2. Click on the ⚙️launch configuration
3. Select Node.js as the environment

Visual Studio Code — Debug Mode

4. Update the name of the program in launch.jsonand save.

launch.json

5. Let’s add a breakpoint in our code

Adding a breakpoint in the code

6. Start Debugging

VS Code: Debug mode

For the advanced 🦸‍♂️,

If you are using Babel to compile your code, let's not forget inbabel.config.js the retainLines: true option.

This will let the program pause its execution in the compiled code at the exact line where you put the breakpoint in VS Code.

Wrapping up

Visual Studio Code is a completely free and open source text editor. A lot of passion has gone into building this editor by the community and making this performant. VS Code has become an indispensable tool for me. Hope you will enjoy this tool as well. Peace ✌️