All Articles

Debugging NodeJS Applications

There is an easy way to debug your NodeJS applications with VS Code without the use of console.log statements littered all over your codebase.

VS Code comes with a built in debugger which can start NodeJS apps in debug mode, pause execution with the help of a breakpoint, step over code, and output the value of a variable at any given time.

The answer lies in creating a launch.json file and VS Code will create one for you.

Create Launch File

Open your NodeJS project and then from the toolbar click on View and Run. You will see an option to create a launch.json file under Run and Debug. Click on that link and VS Code will ask you to select the type of app you want to debug. In this case, you will select Node.js. This action will create a directory called .vscode and inside that directory you will find a file called launch.json.

The initial file should look something like

{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "pwa-node",
            "request": "launch",
            "name": "Launch Program",
            "skipFiles": [
                "<node_internals>/**"
            ],
            "program": "${workspaceFolder}/index.js"
        }
    ]
}

Assuming index.js file is present at the root of the application then you wouldn’t have to change anything.

You can now use F5 to debug your NodeJS application.

Customize Launch File

The launch file can be customized with different attributes listed here

Using nodemon

If you are using nodemon like me then you want to tell launch.json to use nodemon when debugging your application. This is done via runtimeExecutable key. If you are not using nodemon then you can ignore this.

{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "pwa-node",
            "request": "launch",
            "name": "Launch Program",
            "skipFiles": [
                "<node_internals>/**"
            ],
            "program": "${workspaceFolder}/index.js",
            "runtimeExecutable": "${workspaceFolder}/node_modules/nodemon/bin/nodemon.js",
        }
    ]
}

If you would like to know more about nodemon then check out this article.

Restarting your application

During debugging you may change a file and you would want the server to restart automatically in debug mode and this can be done with the restart key

{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "pwa-node",
            "request": "launch",
            "name": "Launch Program",
            "skipFiles": [
                "<node_internals>/**"
            ],
            "program": "${workspaceFolder}/index.js",
            "runtimeExecutable": "${workspaceFolder}/node_modules/nodemon/bin/nodemon.js",
            "restart": true
        }
    ]
}

Open Console when debugging

It might be better to open the integrated console when you start debugging and that is done via the console key

{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "pwa-node",
            "request": "launch",
            "name": "Launch Program",
            "skipFiles": [
                "<node_internals>/**"
            ],
            "program": "${workspaceFolder}/index.js",
            "runtimeExecutable": "${workspaceFolder}/node_modules/nodemon/bin/nodemon.js",
            "restart": true,
            "console": "integratedTerminal"
        }
    ]
}

Passing runtime arguments

Passing runtime arguments to the node executable is possible via runtimeArgs key which helps in debugging. Here is a list of arguments I like to pass

  1. trace-deprecation Shows a stack trace of where the deprecation warning originated so you can make an informed decision of using or not using that function. Better to not use it since it will be removed from future versions.
  2. unhandled-rejections The presence of this argument will stop our debugger when the application encounters an exception which we have not caught.

This is how the file will look like

{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "pwa-node",
            "request": "launch",
            "name": "Launch Program",
            "skipFiles": [
                "<node_internals>/**"
            ],
            "program": "${workspaceFolder}/index.js",
            "runtimeArgs": [
                "--trace-deprecation",
                "--unhandled-rejections=strict"
            ],
            "restart": true,
            "runtimeExecutable": "${workspaceFolder}/node_modules/nodemon/bin/nodemon.js",
            "console": "integratedTerminal"
        }
    ]
}

If you are using nodemon then you are actually passing these arguments to nodemon which passes them to node.

Adding Breakpoints

You can add breakpoints by clicking before the line number in VS Code. Breakpoint is represented by a red circle and the process will stop execution at that line, giving you the control to inspect data or execute your code line by line with the help of a debugger toolbar available at the top center of VS Code.

Location of breakpoint Location of a breakpoint

You can now hit F5 to start debugging your application.

Location of the debug bar at the top center of VS Code Debug bar

Peek inside your variables

A breakpoint has been added, VS Code has stopped the execution at that breakpoint and now you would like to find out the data in a variable before the breakpoint. One option is to hover over the variable name and another option is to use the DEBUG CONSOLE that comes with your integrated console.

The integrated console should be open in your VS Code and in that you should see a tab named DEBUG CONSOLE click on that and you will find your cursor blinking. Enter the name of your variable and you will see the value of that variable.

Debug Console Debug console

In the same Debug console you can also call functions and execute JavaScript code.

One more thing

Using a debugger will make a better programmer as it will help you to understand the flow of your application. I recommend you use it instead of console.log.