• Docs/
• Debugging/
• Selected guides/
• VS Code

---

Debugging in VS Code

The most effective debugging tool is still careful thought, coupled with judiciously placed print statements. - Unix for Beginners

Doesn't this sound familiar? How many times did you debug your NodeJS back ends with console.log or similar statements? These practices are not very effective and often take a lot more time than debugging using a dedicated tool. So we encourage you to use VS Code to debug any application, not only NodeJS in particular.

Debugging in VS Code is really easy. The following paragraphs will go through the basics of debugging plain JS and TypeScript projects (both front-end and back-end).

Back-end

Plain JavaScript

First check the command which starts your NodeJS server and add the inspect option (e.g. node --inspect=0.0.0.0:9301 src/index.js). Caution: only add this option to development scripts (e.g. the dev script in a package.json).

Then create a file launch.json in a folder named .vscode in your project folder. An example of this file (credits to Thomas):

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "attach",
            "name": "Attach to NodeJS",
            "skipFiles": [
                "<node_internals>/**"
            ],
            "cwd": "${workspaceFolder}",
            "localRoot": "${workspaceFolder}",
            "remoteRoot": "/app",
            "address": "localhost",
            "port": 9301,
            "timeout": 30000,
            "restart": true
        }
    ]
}

The only properties you should check are these: - remoteRoot: check if this path is equal to the WORKDIR in a Dockerfile or to the path where your NodeJS program resides on the server (or device running it). - address: where is the debugger listening? If you're working on your local computer, leave this localhost. In other cases, put the IP address or domain name of the remote host here (where your NodeJS server is running). - port: on which port is the debugger listening? This can be found where the inspect option is given to the node command.

Now when you open the project folder in VS Code, you should be able to debug your application. Therefore click on the debug icon in the left sidebar (play icon with a bug). Then you should see Attach to NodeJS in the top bar of the side panel. Finally, click on the green play icon and VS Code should attach to your NodeJS debugger.

The property restart in the launch.json should re-attach the debugger when your NodeJS server quits unexpectedly (e.g. due to a nodemon restart).

TypeScript

Debugging a NodeJS project using TypeScript looks a lot alike debugging a plain JavaScript NodeJS project. Take a look at the following launch.json:

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "attach",
      "name": "Attach to NodeJS",
      "skipFiles": [
        "<node_internals>/**"
      ],
      "cwd": "${workspaceFolder}",
      "localRoot": "${workspaceFolder}",
      "remoteRoot": "/app",
      "port": 9301,
      "timeout": 30000,
      "restart": true,
      "sourceMaps": true
    }
  ]
}

The only difference between the launch.json for debugging a plain JavaScript or a TypeScript project is the extra property sourceMaps. You can update the port number to whatever port you want as long as it equals the port in the inspect option for node (see below).

Then you need to add "sourceMap": true to your tsconfig.json.

In order to be able to debug, alter your node command like so:

node --inspect=0.0.0.0:9301 -r ts-node/register src/index.ts

Make sure the debug port equals the one you entered in the launch.json and vice versa.

Front-end

TODO: complete docs about debugging front-end

Plain JavaScript

TypeScript