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.
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.
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.
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.
A default managed of our files with a main folder as /src.
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.
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.
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.
Already in VSCode debug screen clicks in the create a launch.json file.
The VSCode will automatically create a .vscode folder with a launch.json file in the root of our project.
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.
Now, with all that right, we can actually use the debugger tools.
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.
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)
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:
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: