Debugging Node.js with Visual Studio Code

Hello.
I'm Mandai, in charge of Wild on the development team.

What kind of editor do you use when developing Node.js?
On the other hand, if you ask me what to use, I would have no hesitation in recommending Visual Studio Code (VSCode), which is an extremely capable debugging tool!

This time, I will introduce how to use VSCode's extremely powerful debugging tool.

 

Installation of nodemon for debugging

Speaking of Node.js, when I think of a tool that automatically restarts when a source is modified, I remember it as "node-dev" in the past, but recently it seems like nodemon is being used.

The official VSCode website also seems to use Nodemon, so I would like to follow the trend and use Nodemon here.

To use nodemon, you just need to install it with npm, so it's very easy.
Is it better to install globally? That's what I thought, so I installed it with the "-g" option.

# sudo npm install nodemon -g if necessary

 

The preliminary preparations are now complete.

 

launch.json settings

Configure launch.json to set launch options.
If you select "Open configuration" from the debug menu, launch.json will be automatically created.
It's already done to a certain extent, so all you have to do is make some corrections here and there.

Clicking the images below in numerical order will add items to launch.json.

At the bottom right of the launch.json screen, you will see a button called "Add Item", so press it.
New setting items will be added and the cursor will be moved, so scroll down the options and you will see an item called ``Node.js: nodemon setup'', so select this.

From here, change the settings to suit your individual environment.

I will list some of the most common ones that are frequently revised.

 

program

The program key specifies the file that will be the entry point for the Node.js application you are developing.

"${workspaceRoot}" will be replaced with the path to the folder open in VSCode, so change the path from there as necessary.

Regardless of the "cwd" item described below, a directory path that includes ${workspaceRoot} is required.

 

cwd

If this is set, the working directory will be changed before starting the Node.js application.

It's a bit complicated, but you can start the application without setting cwd (because you specify an absolute path with the program key), but if you use a relative path inside the application, the current directory where the program was executed Since a relative path starting from is selected, a "file not exists" error will occur.

 

example

• Directory opened in VSCode
  • /path/to/hoge
• Absolute path of app.js
  • /path/to/hoge/node/app.js

In the above case, the values ​​of the program and cwd keys are as follows.

• program
  • ${workspaceRoot}/node/app.js
• cwd
  • ${workspaceRoot}/node

 

args

When starting a Node.js application, define the necessary arguments as an array in the args key.

Since it is not specified in key/value format, the value is expanded as is as an argument.

"args": [ "-hoge", "--fuga=1", "-a 1", "--port 8080", "--socket", "/path/to/socket" ]

 

If you launch a Node.js application with launch.json with the args key as above, it will be launched with the command below.

nodemon --inspect=28106 --debug-brk app.js -hoge --fuga=1 "-a 1" "--port 8080" --socket /path/to/socket

 

What you need to be careful about is values ​​that include spaces, and the way you write them will change depending on whether you want to pass the string "-a 1" or specify 1 for the -a option.

It may not seem right, but if you specify it in the form "-a 1", it will be converted into an argument as a 4-character string, so how to specify the args key when specifying 1 for the -a option is

"args": [ "-a", "1" ]

 

You will need to specify the values ​​separately.
Therefore, the order of the args key arrangement is important.

 

runtimeArgs

Specifies the program arguments specified in runtimeExecutable.
runtimeExecutable is node by default, but you can choose from various options such as nodemon or gulp.

 

env

Specifies environment variables to be specified at runtime.

On Linux, this is the value passed to the env command, and on Windows, it is the value passed to $env.

It's hard to tell which env, runtimeArgs, and args are which, but if you run it on Linux, it will look like the following.

env [env] node [runtimeArgs] app.js [args]

 

It's like a mathematical formula, so it might be easier to memorize it.

 

Launch the app from VSCode

After setting launch.json, try launching it from VSCode.

The startup procedure is easy, just click as shown in the image below.

If it launches successfully, try accessing the application using a browser.
You should be able to access it as before.

You can set a breakpoint by clicking on the left side of the line number in the editor, so if you stop at a suspicious part, you can also check the value contained in the variable at that point.

When a program is interrupted, a bar like the one below will appear during debugging, so you can press it to step through the program.

After that, make good use of the watch expressions on the left that can display defined variables and objects, the call stack that displays the functions passed through until the breakpoint is processed, and the list of set breakpoints. , let's keep increasing debugging efficiency!

 

Debugging not just Node.js

VSCode's debugging tools seem to be able to debug not only Node.js but also Python.
Templates for major frameworks such as django and flask are preset, so you can debug with the same experience as with Node.js applications.

 

summary

What do you think of VSCode's extremely easy-to-use debugging tool?
I have the impression that VSCode inherits the best features of Visual Studio, such as the ease of use of IntelliSense and the excellent debugging tools.

 
That's it.