Debug like a PRO (Debugger in VsCode) - Series 1
Tags: debugging, javascript, node, vscode
Published: 2020-08-14 20:37:58

Debugging is an everyday task when it comes to software development. Whether you are working in a team, working alone or contributing to open source projects, we all encounter bugs. These bugs can be caused by syntax errors, wrong algorithm, unterminated loops, etc. To fix these bugs you need to find them first, and this entire process is called Debugging.

In this article you are going to learn how to debug your code directly in Visual Studio Code. We would be using a JavaScript application for our example.

## Prerequisites
- [Visual Studio Code](https://code.visualstudio.com/)
- [Node.js](https://nodejs.org/en/download/)
- [nodemon](https://www.npmjs.com/package/nodemon) (optional but will be used in this tutorial)

## Visual Studio Code

Visual Studio Code has an inbuilt tool to help you debug your application directly from your editor.
![debugger icon](https://dev-to-uploads.s3.amazonaws.com/i/2sq4u6tqbnqtcu903uyw.png)

The debugger icon in Visual Studio Code enables you to launch or attach to your running apps and debug with break points, call stacks, and an interactive console.

Let’s get it up and running.

## Configurations
### Method 1 - Run and Debug
![a](https://dev-to-uploads.s3.amazonaws.com/i/jvz7ghgeoo2ep3xyabhe.png)
![b](https://dev-to-uploads.s3.amazonaws.com/i/0tysubzwt9s6np6decdt.png)

#### Image a)
If the opened tab on your Visual Studio Code is not a debuggable file, click on **Open a file** and select the file you want to debug. 
#### Image b)
Opened tab is a debuggable file. I will be debugging a JavaScript file that removes campaigns with expired dates from a list of ongoing campaigns. You can find the code [here](https://gist.github.com/osumgbachiamaka/c747895b31ec41425740d7ea872ed2f3), feel free to clone and follow along.

Add **Break Points** and click on **Run and Debug** as shown in the image above, this will pop up a window for you to select how you want to run your application. 
![node.js](https://dev-to-uploads.s3.amazonaws.com/i/mglia37roufgqm9zslb1.png)

The image below tries to explain how to debug your application. When you run the debugger, you can use break points to explore what is happening in your code. You also have the ability to hover over the variables in your application to see if the hold the intended value. 

With this method, you will always need to click on **Run and Debug** to start debugging.
![debugging](https://dev-to-uploads.s3.amazonaws.com/i/ukdlix4rm17lg2rkvl7u.png)

### Method 2 - Configure a launch.json file
Follow along as I show you how to create a `launch.json` file and configure it to tell Visual Studio Code how to debug your application. The launch.json file is saved in a folder called `.vscode`. You can create this file yourself or auto-create it with the steps below.

Use any of the steps below
- Click on **create a launch.json file**
![launch.json](https://dev-to-uploads.s3.amazonaws.com/i/zfnabhy6geip45s7yeal.png)
- Select **Run** from the menu bar and then select **Add Configurations**
![run](https://dev-to-uploads.s3.amazonaws.com/i/c1wgt745qzr2jlpmdkn0.png)

Using any method above, a pop-up window will appear. Because you want to debug your application directly in Visual Studio Code without opening chrome, select **Node.js.**
![select node](https://dev-to-uploads.s3.amazonaws.com/i/luavoz5m8kycd87drxzn.png)

Your launch.json file should look like the the image below. Click on **Add Configuration.**
![launch.json file](https://dev-to-uploads.s3.amazonaws.com/i/im7gtd1ybx2v8jx3z3vb.png)

Let’s add a `nodemon` configuration so we do not have to click on the debug icon whenever we make changes to our file.
![select nodemon](https://dev-to-uploads.s3.amazonaws.com/i/rjq1blh77mlts5x336lh.png)
![edit configuration](https://dev-to-uploads.s3.amazonaws.com/i/7pyggfvzr1yeqc3p6a7g.png)

or simply copy the code below into your `launch.json` file
```json
    {
      "version": "0.2.0",
        "configurations": [
            {
                "console": "integratedTerminal",
                "internalConsoleOptions": "neverOpen",
                "name": "nodemon",
                "program": "${workspaceFolder}/index.js",
                "request": "launch",
                "restart": true,
                "runtimeExecutable": "nodemon",
                "skipFiles": [
                    "<node_internals>/**"
                ],
                "type": "pwa-node"
            },
            {
                "type": "node",
                "request": "launch",
                "name": "Launch Program",
                "skipFiles": [
                    "<node_internals>/**"
                ],
                "program": "${workspaceFolder}/index.js"
            }
        ]
    }
```
To start the debugger, click on the debugger icon, select how you want to start the debugger. We will select `nodemon` for this tutorial. 
![select nodemon](https://dev-to-uploads.s3.amazonaws.com/i/jdzv03fk1t3a5liprmg6.png)
![start debugger](https://dev-to-uploads.s3.amazonaws.com/i/fv6p616az3r5rwm6yo1l.png)

If your terminal looks like the image below, then **voilà** we have successfully started our debugger. Feel free to add break points, console.log, etc and start debugging. Notice that if you make changes to your code, it auto-restarts the debugger.
![debugger started](https://dev-to-uploads.s3.amazonaws.com/i/pfbzeysr3zrdojsihntn.png)

#### Sneak peek
you can see a log of what is happening in your application by simply typing `node.index.js` or `nodemon index.js` to enable auto-restart when changes are detected in the file debugged. 

**Note**: This only logs changes to your terminal if you used console.log. You won’t have that full debugging capabilities, like break points, watch, etc.
## Conclusion
Your debugger is up and running. In the next series we will explore other ways to debug your code with easy.

I hope you enjoyed this post. You can find me on [Twitter](https://twitter.com/KindnessOsumgba), let's connect.