Debugging node in VSCode
Published: 2020-01-07 04:52:00

Hello everyone, today I'm here to show for us a example of how I uses the VSCode debugger with nodemon for debug my applications.

#Start our example project.
In that project we have to do some steps for finally can using the debugger of VSCode.
Remember all that I show in this post is **my workflow**, all files organization and the tools I choose for this example is a only personal preference.
##Creating a example node project in a terminal.
       mkdir debugexample
       cd debugexample
       npm init
       code .
Create the folder **debugexample**, which stores our project, start **package.json** by **npm init** and open this folder in VSCode.

##Install express and nodemon tool in the project.
       yarn add express
       yarn add nodemon -D
Nodemon is a tool that give us a dynamic development, when save our modifications the nodemon listen these modifications and restart the server automatically.

##Create a simple folder tree.
A default managed of our files with a main folder as **/src**.

![Folder tree of the project](https://thepracticaldev.s3.amazonaws.com/i/cxtttzkpuh0s5jzksz1y.png)

##Create the server file.
The server file is where the our application is runs, here we started the express to listen the **3333** port, uses the **routes** file for organize the requests that our API receive and sets to receive requests in **JSON** format.

![Server file](https://thepracticaldev.s3.amazonaws.com/i/e7chaug35t3cdufd1kb3.png)

##Create a simply routes file.
Here we manage the requests that our API receives, first start the routes with the express **Router** method and define a **get** route that listens for the **'/'** path for requests. Then, on this default route, we define a user list and return it.
 
![Routes file](https://thepracticaldev.s3.amazonaws.com/i/s0t9xjxy7b0xksnw6jvb.png)

##Create a nodemon config JSON in the **root** of our project.
Here we are say to the nodemon that it run in **inspect** mode, the inspect is always watch our application for attach it to the debugger when we calls the debugger mode.

![Specify a nodemon.json config run in inspect mode](https://thepracticaldev.s3.amazonaws.com/i/hbd2vowoyqw1oqdpc09u.png)

##Finally click in the debugger VSCode button.
Already in VSCode debug screen clicks in the **create a launch.json file**.

![Create launch.json example](https://thepracticaldev.s3.amazonaws.com/i/rnh6brkrpl33tlxv6b0b.png)

The VSCode will automatically create a **.vscode** folder with a **launch.json** file in the root of our project.

![Folder tree with .vscode folder](https://thepracticaldev.s3.amazonaws.com/i/kps0qbx0i2jlp5hcj5s8.png)

###Doing some modifications in the **launch.json** file.
We have to delete the line **"program"** and modify the **"request"** from **"launch"** to **"attach"** these modifications are very important because they modify the debugger operation, the debugger will run on our development server, will not run another server to debug, as it does by default. 

##Debugger in practice.
Now, with all that right, we can actually use the debugger tools.


###Create a **break point**:
Always when our application to arrive in the line with the **break point** marks, the debugger will pause the application for we can analysis the actual state of our API. 

![Example of breakpoint](https://thepracticaldev.s3.amazonaws.com/i/xgygc94a38426skhfxvx.png)

###Running the **debugger**:
In debugger screen we'll connect our application with the debugger, on bottom side of our VSCode will can see that we are in the **debugger mode**.

(**Run the tool clicking in the arrow in the top of the debugger**)

![Debugger running](https://thepracticaldev.s3.amazonaws.com/i/g85a2fggjp5xrtfdptep.png)

###Using our **break point**:
Since we put the **break point** in the request function, whenever a request is made on the route with the path **''/'**, our **break point** pauses API execution when the application will return **"users"**.
Then, we'll see a lot of **run time** information about our API, **see**:

![Debugger pauses in breakpoint](https://thepracticaldev.s3.amazonaws.com/i/th95ovrafxks7kfa4t8e.png)

Too, we'll can add some **expressions** that we'll can see through the tool **watch** of the debugger, in other words, these **expressions** will be watched in **run time** of our API.
**For example, see in the watch's row in the debugger column:**

![Example of debugger watch tool](https://thepracticaldev.s3.amazonaws.com/i/xwm8wtbsyyza7ynrmtfs.png)

##More information.
<ol>
<li>GitHub code repository: <a  href="https://github.com/joaoianuci/debug_example" target="_blank">here.</a></li>
<li>Video for reference(in portuguese, sorry...): <a  href="https://www.youtube.com/watch?v=bVAhNaxBEjM&t" target="_blank">here.</a></li>
<li><b>End.</b> Thanks for the attention, my first post here I'm very happy =) </li>
</ol>