How To Use the Debugger in VS Code

Lee Stanton July 13, 2022

VS (or Virtual Studio) Code is a free code editor that supports all major programming languages. It makes it quick and easy for programmers to look at the coding and edit it where necessary. It works as an IDE for people writing code. but it doesn’t prevent bugs. Luckily, VSCode has a nifty debugging tool built into the program.

In this article, we’ll show you how to use the debugger on VS code.

What’s a Debugger?

When you’re coding, there will be times where the code you write runs into some problems. These problems may not be the fault of the coder, but just appear due to something going haywire on their own. These “bugs” can cause programs to stop working. For that reason, it’s important for coders to find and eliminate them.

A debugger is a program that locates bugs and will either fix them automatically or suggest ways to do so. VSCode has one built in, but there are many different methods for utilizing the debugger. Here are some ways to use the Debugger in VS Code.

The Debugger has JavaScript, TypeScript, and all other languages that use Java compilers. Other languages like Python or Ruby will need extensions installed.

To do that, follow these steps:

At the top menu, select “Install Additional Debuggers.”
Select which programming languages you would like to use.
The language will download and be entered into your database. You can now run the debugger using the desired language.

Next, we’re going to look at how to use the Debugger in VSCode.

Create a Node.js Database

Node.js is the platform that VSCode’s debugger runs as default. You need it to track everything that is happening with your code. This makes it easier to identify the problem. Also, there are some features in VSCode debugger that only work with JavaScript. You will have to create a simple program, the famous “Hello, World” program. Once you complete this step, running the debugger will be smooth and fast.

To create a Node.js, follow these steps:

Before you begin, make sure you have Node.js downloaded and installed on your computer.
To see if Node.js is installed, create a new terminal and type “node—version” in the terminal. The version of Node.js you installed should appear.
Create an empty folder on your Desktop and name it “hello.”
Open VSCode and in the command prompt, type the following code:
mkdir hello cd hello code.
Find the File Explorer toolbar. Your file should show up with the name “Hello.” Click the “New File” button on the right side of the file name.
Name the new file “app.js”
In the console command, type the following code:
var msg = 'Hello World'; console.log(msg);
Save the file by pressing “Ctrl +S” on the keyboard.
In a terminal, type node app.js. The output will say “Hello, World.”

Congratulations, you’ve written your first program and are now ready to run VSCode’s debugger.

Run View

From here, you’ll be able to utilize all of VSCode’s debugging features. When you first start, you’ll need to familiarize yourself with the all of the information the debugger has for you. It also includes a taskbar where you can configure settings and debugging commands.

To access Run View, do the following:

On the sidebar of VSCode, select the “Run” icon. You can also quickly access it by pressing “Ctrl+Shift+D” on your keyboard.
A menu will appear with three options. For the purposes of this guide, select the “create a launch.js” option.

Create a Launch.js Program

A launch.js program is called a launch configuration program. It will automatically save any new settings and configuration changes you make while debugging. This will save you time if you run into the same bug that previously occurred. Think of it as a note taker for your coding.

Note that you’ll need to have this program before you can finally run the debugger.

Here’s how to do it:

In the “Run view” menu, select “create a launch.js.”
VSCode will automatically select the debug environment, but if it doesn’t detect anything, select “Node.js.”
Go back to the File Explorer by pressing “Ctrl+Shift+E.”
Check under your folder “hello.” There should be a tab called “.vscode” and the launch.json should be in that tab.
To check the debugger’s attributes, press “Ctrl+Space”.

Running the Debugger

Now that all of the preparation is done, we can start our debugging session. To run the debugger, we will first need to select our launch configuration.

In the Run view of VSCode, find “Configuration dropdown.”
Select “Launch Program.” Once you’ve selected it, press F5 to start the debugger.
You can also access the debugger menu by first accessing the Command Palette by pressing “Ctrl+Shift+P”
Type in “.debug” and select your configuration.

Adding a New Configuration

With particularly tough bugs, there’s a chance that the database you have on VSCode doesn’t have the configuration you need. Luckily, you can add new configurations to the debugger.

In the “Run” menu, select “Add configuration.”
Bring up IntelliSense (Shift+Space) to bring up the menu, then select “Add configuration.”
Inside the IntelliSense configuration array, choose to add another configuration.

Launch vs. Attach Configurations

VSCode has two modes of debugging – “launch” and “attach.” Each mode has its own pros and cons and each is suited to a certain kind of coder. Here’s a short breakdown of the methodology for each mode.

First, let’s discuss “launch” configurations. Launch configurations mean that you, the coder, are writing the code or “recipe” for your debugging session.

“Attach” configurations, on the other hand, involve you attaching a configuration from outside VSCode while the program in VSCode is running. You aren’t building anything from scratch, but using previously made code to debug.

Auto Attach

Auto attach is a feature that will automatically attach the Node debugger to certain Node.js processes in VSCode’s terminal. To enable Auto Attach, follow these steps:

To access the command palette, press “Ctrl+Shift+P” on your keyboard.
When the menu comes up, select “Toggle Auto Attach.” The Auto Attach bar should appear at the top.
After you turn on Auto attach, you will need to restart your device.
You can also create a new terminal and Auto attach will still be enabled.

Auto attach comes with three different modes to choose from. Each one has its own function, so make sure to choose the right one. Here are the three modes:

“Smart” – This is the default option. When you execute a script that isn’t contained in your “node_modules” folder, the script will automatically get debugged.
“Always” – Any process using Node.js that is launched in the integrated terminal will be debugged.
“OnlyWithFlag” – This option will only debug processes that are flagged with the “- -inspect” or the “- -inspect-brk” flags on them.

Attach to Node Process

You can attach your Node.js debugger to processes manually as well. This requires a bit more work but it will save you time if you know exactly which process is causing problems. To attach the debugger to a Node.js process, do the following:

Open the command palette by pressing “Ctrl+Shift+P” on your keyboard.
Select “Attach to Node Process” from the menu.
From here, you will see all of the processes that can be debugged by the Node.js debugger. Select which process you want to attach the debugger to.

JavaScript Debug Terminal

Adding a JavaScript debug terminal is quick and painless and a great option if you want to do broad or general bug fixing. First, you’ll need to make a terminal.

Open the command palette by pressing “Ctrl+Shift+P” on your keyboard.
Select “Debug: Create JavaScript Debug Terminal” from the menu.
You can also access this option by choosing it in the terminal dropdown menu.
The debugger will attach to your current process. It will run automatically and fix any bugs in the code that it detects.

Setting Up an “Attach” Configuration

This option is a lot more work than those outlined above, but it lets you configure the debug configurations in detail.

A simple “attach” configuration will usually look like this batch of code
{ "name": "Attach to Process", "type": "node", "request": "attach", "port": 9229 }
9229 is the default port number for “- -inspect” and “- – inspect-brk” options. To change the port number, type the following: “- - inspect =95430”

Note: these numbers are just examples. Use whichever port number that works for you.
After you’ve changed the port number, change it in the attach configuration you wrote.

To attach the debugger to a process that isn’t currently in the debugger, do the following:

You’ll need to specify which process by entering the ID in a string of code that looks like the following:
{ "name": "Attach to Process", "type": "node", "request": "attach", "processId": "53426" }
It is quite tedious to manually enter each process ID. Luckily, you can bring up the entire list by entering “${command:PickProcess}” in the “processId” part of the string.

Multi-Target Debugging

There will be times where there are coding disasters and your code is riddled with bugs and nothing works. Multi-target bugging is supported by VSCode and it allows you to run multiple debuggers on multiple processes. To start multi-target debugging, all you need to do is start another debugging session without closing your first one.

Once you start multi-target debugging, each session will show up as an individual element at the top in the “CALL STACKS” menu. You can select which session you would like to be active.

The debug toolbar and any debug actions taken will be done on the active process, so make sure the one you want to work on is active.

Stop Debugging

You’ve finally made it to the end and all of those pesky bugs have been eliminated. Now you must shut down your debugging operation. It’s important to do this to make sure that your work is saved.

“Attach” Configurations

Select the “Debug: Stop” on the debug toolbar or after opening the command palette by pressing “Ctrl+Shift+P.”
After clicking stop, the Node.js debugger will detach and shut down. However, the process you entered will still be running.
To stop the processes you’re running, go to the task bar and select “Stop.”

“Launch” Configurations

After selecting “Stop,” VSCode will ask you to shut down by sending a SIGINT signal.
Before intercepting the signal clean up anything and then shut down.
If there are no breakpoints (or problems) in that shutdown code, the session will end.

Debuggers Demystified

The Debugger tool of VSCode is very handy to have at your disposal. However, there are many options and it can be hard to decide which method you want to use. We have listed the novice and advanced level methods for using the debugger, so you have the option to go about debugging how you wish.

Do you use VSCode debugger? Which method do you think is the best? Let us know in the comments section below.