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.
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.
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.
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.
Finally click in the debugger VSCode button.
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.
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.
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)
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:
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:
Top comments (0)