How to debug using npm run scripts from VSCode?

I was previously using gulp and running gulp to start my application and listeners from the Visual Studio Code debugger but have recently needed to switch to running scripts through npm instead. Unfortunately in VSCode I've not been able to run npm scripts through the debugger so I've had to resort to running node to start my server directly which gets rid of my listener tasks which reloaded code automatically.

This seems like something that should be simple but so far I haven't had much luck. Below is a snippet from my launch.json file that I attempted to use but npm could not be located.

{
    ...
        "program": "npm",
        "args": [
            "run",
            "debug"
        ],
    ...
}

This gives me the following error.

Error request 'launch': program 'c:\myproject\npm' does not exist

Related resources:

• https://github.com/Microsoft/vscode/issues/2726

It appears that VS Code will support npm scripts and other launch scenarios in the release from October 2016.

Below is an example as it was proposed on GitHub.

packages.json

  "scripts": {
    "debug": "node --nolazy --debug-brk=5858 myProgram.js"
  },

vscode launch config

{
    "name": "Launch via NPM",
    "type": "node",
    "request": "launch",
    "cwd": "${workspaceRoot}",
    "runtimeExecutable": "npm",
    "runtimeArgs": [
        "run-script", "debug"
    ],
    "port": 5858
}

1. Configure a new debug target in your .vscode/launch.json:

   {
       "name": "Attach To npm",
       "type": "node",
       "request": "attach",
       "port": 5858,
       "address": "localhost",
       "restart": false,
       "sourceMaps": false,
       "outDir": null,
       "localRoot": "${workspaceRoot}",
       "remoteRoot": null
   }
   

2. Config your npm to run the node with --debug-brk option:

   "scripts": {
     "start": "node app.js",
     "debug": "node --debug-brk app.js"
     ...
   

3. Start your app from the shell as:

    $npm run debug
   

4. The program by default will be waiting in the port 5858 to attach the debugger

5. So, run the debugger in your visual studio code ("Attach To npm").

6. Enjoy your debugger :)

I think what you're looking for is the following configurations.

Add the following object to the configurations array in .vscode/launch.json file.

{
    "command": "npm run dev",
    "name": "Run npm dev",
    "request": "launch",
    "type": "node-terminal"
}

And try debugging with the new configuration now. VSCode will take care of the debugger attachment.

Don't forget to replace npm run dev with your desired command.

VS Code now gives you a "Debug Script" button when you hover over the name of a script in package.json.

It is feasible with npm whithout having to alter your scripts section in package.json

The trick here is to pass the --inspect-brk=9229 to node.

The command will look like npm run start -- --inspect-brk=9229

Here's the .vscode/launch.json:

{  
"version": "0.2.0",
"configurations": [
    {
        "type": "node",
        "request": "launch",
        "name": "Launch via NPM",
        "runtimeExecutable": "${env:NVM_BIN}/npm", //change this to your npm path
        "runtimeArgs": [
            "run-script",
            "start",
            "--",
            "--inspect-brk=9229"
        ],
         "port": 9229
    },

  ]
}