58

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 add the right configuration to the launch.json file under .vscode folder,
I have a app.js file which is the main app file.
And the application runs on node version 4.6.2 and on Port 8080.
In usual case I run the App using npm run dev command.

Following is my launch.json file -

{
    // 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": "node",
            "request": "launch",
            "name": "MyApp",
            "program": "${workspaceFolder}/app.js",
            "runtimeVersion": "4.6.2",
            "protocol": "legacy",
            "port": 8080
            //"runtimeExecutable": "/home/user/.nvm/versions/node/v4.6.2/bin/node"
        },
        {
            "type": "node",
            "request": "launch",
            "name": "nodemon",
            "runtimeExecutable": "nodemon",
            "program": "${workspaceRoot}/app.js",
            "restart": true,
            "console": "integratedTerminal",
            "internalConsoleOptions": "neverOpen",
            "runtimeVersion": "4.6.2",
            "protocol": "legacy",
            "port": 8080
        },
        {
            "type": "node",
            "request": "launch",
            "name": "DEBUG",
            "runtimeExecutable": "nodemon",
            "program": "${workspaceFolder}/app.js",
            "restart": true,
            "console": "integratedTerminal",
            "internalConsoleOptions": "neverOpen",
            "runtimeVersion": "4.6.2",
            "protocol": "legacy",
            "port": 8080
        }
    ]
}

The package.json is as follows -

{
  "name": "myapp",
  "description": "myapp",
  "version": "1.35.0",
  "private": true,
  "scripts": {
    "dev": "nodemon app.js",
    "debug": "nodemon app.js"
  },
  "dependencies": {
    "async": "1.3.0",
    "aws-sdk": "2.7.20",
    "aws-xray-sdk": "^2.1.0",
    "aws-xray-sdk-restify": "^1.3.0-beta",
    "bcrypt": "0.8.5",
    "body-parser": "1.12.3",
    "compression": "^1.7.0",
    "connect-flash": "0.1.1",
    "cookie-parser": "1.3.4",
    "cron": "1.0.9",
    "csurf": "^1.9.0",
    "csvtojson": "^1.1.2",
    "date-utils": "1.2.16",
    "dotenv": "4.0.0",
    "email-templates": "1.2.1",
    "express": "4.12.3",
    "express-handlebars": "2.0.0",
    "express-jwt": "^5.1.0",
    "express-mailer": "0.2.4",
    "express-session": "1.11.1",
    "express-validator": "3.1.3",
    "handlebars": "^3.0.3",
    "helmet": "^3.5.0",
    "html-pdf": "1.4.0",
    "json-2-csv": "2.0.12",
    "jsonwebtoken": "^7.3.0",
    "multer": "^0.1.8",
    "mysql": "2.6.2",
    "newrelic": "1.25.0",
    "node-schedule": "^1.3.0",
    "nodemailer": "^1.3.4",
    "nodemailer-ses-transport": "1.2.0",
    "passport": "0.2.1",
    "passport-local": "1.0.0",
    "path": "0.11.14",
    "promise": "7.0.0",
    "qs": "^2.4.1",
    "replaceall": "0.1.6",
    "request": "2.55.0",
    "run-parallel": "1.1.0",
    "validator": "^7.0.0",
    "winston": "^2.3.1",
    "winston-daily-rotate-file": "^1.7.0",
    "xlsx": "0.8.8"
  },
  "devDependencies": {
    "nodemon": "^1.17.3"
  }
}

The App gets launched when I run the DEBUG and nodemon configurations,
But the code is not getting paused on the breakpoints I put on the app.js file.

Reference links -
1. https://github.com/Microsoft/vscode-recipes/tree/master/nodemon
2. https://github.com/bdspen/nodemon_vscode
3. Can Visual Studio Code be configured to launch with nodemon
4. Cannot debug in VSCode by attaching to Chrome
5. https://code.visualstudio.com/docs/editor/debugging

What changes are required in package.json, or any corrections in Launch configuration - launch.json, that would help me to debug the application in VSCode for my usecase?

Improve this question

10 Answers 10

Reset to default
75

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

Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

--inspect is for versions >= 6.3. --legacy or --auto for older versions refers to node, current is v15.
Note: the process you should choose is NOT the nodemon one but the node process which is running your app.
26

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 easier than attaching a debugger to the running process.

Improve this answer

2 Comments

I know we shouldn't write comments just to say "thanks", but THANK YOU SO MUCH. I don't know how many different launch.json's I've tried without success until this one! (though, I had to change "${workspaceFolder}/bin/www" for "${workspaceFolder}/server" in my case).
I learned that when I use launch as in your example I need the program key related to my debug html file (but your program refers to a folder, not file). If I use attach as in the other example by Geek, I need the processId and pick the process I want to debug (which I started before with nodemon).
13

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"
  }
  1. 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"
  1. 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.

Improve this answer

Comments

11

In 2022 i use this:

// launch.json
"configurations": [
        {
            "name": "Launch via NPM",
            "request": "launch",
            "runtimeArgs": ["run", "debug"],
            "runtimeExecutable": "npm",
            "skipFiles": ["<node_internals>/**"],
            "type": "node"
        }
    ]

// package.json
"scripts": {
        "debug": "nodemon dist/app"
    }

After this I click Run and Debug: Launch via NPM in vscode. And the debugger starts with nodemon and the breakpoints working when code changes.

Improve this answer

1 Comment

do you have nodemon:{} configuration in package.json ?
11

None of solutions worked for me until I edit runtimeExecutable with following value:

"runtimeExecutable": "${workspaceFolder}/node_modules/nodemon/bin/nodemon.js",

Which gives:

{
  "name": "debug nodemon",
  "type": "node",
  "request": "launch",
  "runtimeExecutable": "${workspaceFolder}/node_modules/nodemon/bin/nodemon.js",
  "program": "${workspaceFolder}/app.js",
  "restart": true,
  "console": "integratedTerminal",
  "internalConsoleOptions": "neverOpen"
},
Improve this answer

1 Comment

Found here on the VS Code docs, fwiw, with a little more context further down the page, though I never would've guessed this answer from their docs alone. :(
3

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.

Improve this answer

Comments

2

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!

Improve this answer

Comments

1

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)

Improve this answer

4 Comments

So what changes do I need to do to run it in debug mode, any changes in package.json or launch.json that would help me to debug?
Changes to launch.json . Use node as your executable and the debugger will start stop on breakspoints.(like the first member in your launch.jsomn
use "runtimeExecutable": "node", instead of "runtimeExecutable": "nodemon"?
sorry didn't work, the app runs but doesn't pause on any of the breakpoints :'(
1

I was searching for the same problem and encountered this question, as now in 1. July 2022, this seems to be the best way. Using the Auto-Attach feature in VSCode.

I followed the article here, restarted the IDE, set a breakpoint, and ran my code with:

nodemon app.js

everything worked correctly as expected.

so Proccess:

  Activating Auto Attach -> Restarting IDE -> Setting Break Points-> Running with Nodemon
Improve this answer

Comments

1

I had a problem with all the proposed answers because my MVSC workspace was not directly the folder containing the package.json file. I therefore add to Ridham Tarpara's answer (here). For it to work with a workspace of this type (my package.json file is inside the directory server

my workspace

You need to create a .launch.json file in the workspace's .vscode folder.

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "nodemon",
      "runtimeArgs": ["--prefix", "${workspaceRoot}/server", "run", "debug"],
      "runtimeExecutable": "npm",
      "program": "${workspaceRoot}/server/",
      "restart": true,
      "console": "integratedTerminal",
      "internalConsoleOptions": "neverOpen"
    }
  ]
}

The key is to specify to npm where the package.json defining the "debug" command is located using the --prefix argument to at the end, launch this kind of command npm --prefix path/to/dir/containing/npm/package run debug.

Then here is my package.json running nodemon in full typescript

{
  ...
  "scripts": {
    "start": "tsc && nodemon server",
    "debug": "tsc && nodemon --watch 'server/lib/**' --ext 'ts,json' --exec 'ts-node server.ts'",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
...
}
Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.