DEV Community

Cover image for Debugging node in VSCode
João Vitor Ianuci
João Vitor Ianuci

Posted on • Updated on

Debugging node in VSCode

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 .
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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

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

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

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

Finally click in the debugger VSCode button.

Already in VSCode debug screen clicks in the create a launch.json file.

Create launch.json example

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

Folder tree with .vscode folder

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

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

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

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

More information.

  1. GitHub code repository: here.
  2. Video for reference(in portuguese, sorry...): here.
  3. End. Thanks for the attention, my first post here I'm very happy =)

Top comments (0)