How to debug a nodemon project in VSCode

Question

I have a NodeJs project and I run it using nodemon,
I wish to run it in debug mode for development tasks, but I am unable to do so.

I found that I\'ll need to ad

Answer 1

You can launch and attach nodemon with F5, however it will require a little more setup.

We will have to first pre-launch nodemon via VS Code task and then attach.

I'm using remote debugger to attach since it does not require additional clicks to select the process to attach, and VS Code process picker is currently broken in WSL2, which is my main development environment.

tasks.json (from this answer):

{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "npm dev",
      "type": "npm",
      "script": "dev",
      "isBackground": true,

      // This task is run before some debug tasks.
      // Problem is, it's a watch script, and since it never exits, VSCode
      // complains. All this is needed so VSCode just lets it run.
      "problemMatcher": [
        {
          "pattern": [
            {
              "regexp": ".",
              "file": 1,
              "location": 2,
              "message": 3
            }
          ],
          "background": {
            "activeOnStart": true,
            "beginsPattern": ".",
            "endsPattern": "."
          }
        }
      ]
    }
  ]
}

launch.json:

{
  "type": "node",
  "request": "attach",
  "name": "Launch & Attach",
  "restart": true,
  "localRoot": "${workspaceRoot}",
  "remoteRoot": "${workspaceRoot}",
  "preLaunchTask": "npm dev"
}

And in npm dev script (for node >= 6.9):

nodemon --watch src -e js --exec node --inspect .

Note - this approach won't work if your process takes more than 10 seconds to start. In that case you will have to figure out how to signal VS Code when the pre-launch task has finished. This probably can be achieved by playing with beginsPattern / endPattern regex, though I haven't tried it.

Answer 2

Change package.json to

"scripts": {
    "dev": "node app.js",
    "debug": "nodemon --inspect app.js"
}

--inspect is for versions >= 6.3. --legacy or --auto for older versions

And launch.json to:

"version": "0.2.0",
"configurations": [
    {
        "type": "node",
        "request": "attach",
        "name": "Node: Nodemon",
        "processId": "${command:PickProcess}",
        "restart": true,
        "protocol": "inspector"
    }
]

the restart flag is the key here.

Start app via new debug script

npm run debug

• In Debug view, select the Node: Nodemon configuration and press play or F5
• Choose the process started above

See more: vscode nodemon recipe

Answer 3

I ran into a similar issue attaching to a Dockerized nodemon process. I found the solution in this article. I was able to get it working by changing three things:

1. Added --inspect=0.0.0.0 to the npm script that launched the service (named debug in my case):

  "scripts": {
    "debug": "nodemon -w lib -w server.js --inspect=0.0.0.0 server.js"
  }

2. Making sure port 9229 (or whatever debug port you wish to use) is open in the Docker container. I'm using docker-compose, so it's defined in the associated yaml:

ports:
  - "8080:8080"
  - "9229:9229"

3. Adding the following configuration to launch.json in VS Code:

    "configurations": [
        {
            "name": "Attach to Node in Docker",
            "type": "node",
            "address": "localhost",
            "port": 9229,
            "request": "attach",
            "restart": true
        }
    ]

The "restart": true option allows the debugger to automatically reattach when nodemon recompiles things after a watched file changes.

Answer 4

As @the Geek proposes,

1. You should modify launch.json as follows:

   {
       "version": "0.2.0",
       "configurations": 
     [    
       {
           "type": "node",
           "request": "attach",
           "name": "Attach by Process ID",
           "processId": "${command:PickProcess}"
       }
     ]
   }
   

2. Start server "npm run dev" (as you can see, in "request" property, we set to attach. So we have to run the server firstly and then attach the debugger).

3. Click on the left side of vscode in the bug-like icon. On top you will see the small green play icon. Click on the dropdown arrow right of it and select "Attach by process ID".

4. Click on the play icon and then a bar on the bottom of vscode should turn dark orange. Now try making a request. Breakpoints will be hit correctly!

Answer 5

In vscode config, you can set the runtimeExecutable which will run the program you give. set restart:true so vs code debugger can restart the process.

This is an example config:

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node", 
            "request": "launch",
            "name": "nodemon",
            "runtimeExecutable": "nodemon",
            "program": "${workspaceFolder}/bin/www",
            "restart": true,
            "console": "integratedTerminal",
            "internalConsoleOptions": "neverOpen",
            "env": {
                "debug": "app:*",
            }
        }
    ]
}

Update program to the node file you want to debug.

It's easy than attaching a debugger to the running node process.

Answer 6

nodemon listens to files changes and re-start the app on another process

So your configuration is correct but the debugger never "sees" the breakpoints .

There is no point of running debug mode with nodemon .

That's is a feature you may want to request on VScode(Auto-Restart on code change)