Vscode: Add launch option that allows run node project by npm script

[Ciget]

Hi all,

Looks like current trend to run NodeJs app via npm start or npm dev.
By default, launch.json does not allow us to do this. It`s very unusable. My suggection - to add this feature, that allow easily cconfigure how to run app and not just by parameter "node" and entry point to the site.

Thanks.

[weinand]

@Ciget a VS Code 'launch' configuration is used to launch 'node' in debug mode listening on a specific port. I'm not aware of a way to pass the debug-port to node via an "npm start". If you know a way how to do this, please let me know and we can consider to support "npm" as a launch option. Thanks.

[Ciget]

@weinand, thanks for quick reply. I`m asking this, because most of top solutions use this approach to run. So, does it means, that using VS Code we will do own way to develop app?

[weinand]

@Ciget no, you don't have to change the way of developing an app.

To start your app in debug mode you can use "npm dev" from the command line.

I assume that "npm dev" runs your app in debug mode like this:

"scripts": {
    "dev": "node --debug=12345 server.js"
}

In VS Code create an 'attach' configuration:

{
    "name": "Attach to server.js",
    "type": "node",
    "request": "attach",
    "port": 12345
}

Make sure that the debug port is identical to the one used in the "dev" script (or is 5858 if no port is specified in the dev script).

[egamma]

I was about to write the same, I've just used a more complex script as an example.
So the pattern is that you add an npm script for debugging, e.g., build_test_debug.

  "scripts": {
    "build_test": "rm -rf dist/ && npm run lint && npm run build_cjs && jasmine",
    "build_test_debug": "rm -rf dist/ && npm run lint && npm run build_cjs && jasmine --debug-brk
  }

This requires still two steps 1) npm run build_test_debug 2) F5 to attach.
@weinand would it make sense to support running an npm script as a preLaunchTask?

[weinand]

@egamma yes, it makes sense to run anything (including npm scripts) as a preLaunchTask. This is on our February 2016 plan (see #2263).

[tbeseda]

I'd also be interested in a way for the Launch feature to execute an npm task. :+1:
The scripts property of a Node project's manifest is a common way to launch, build, debug, etc.

Also, FWIW, to run an arbitrary npm script like "dev" that _isn't_ a part of the standard scripts use npm-run-script:

$ npm run dev

[jpierson]

I had posted on Stack Overflow about this exactly. It would be nice if this was more easily supported.

[weinand]

You all seem to have a clear picture how this feature should work.
I don't, so I'd appreciate if someone could help me.

A VS Code 'launch' configuration needs to pass the standard node debug argument '--debug-brk' and a port number to the runtime (e.g. 'node').

If the runtime is launched via an npm script, I still need a mechanism to pass the debug port into that script. What is the way to do this?

[jpierson]

I wonder if there is an environment variable alternative to --debug-brk?

Update:
Ah from the document under the configuration section.

environment variables prefixed with node-inspector_

[weinand]

@jpierson I don't see how node-inspector can help here? I'm looking for a way to pass a port number to an npm script. Ideally something like this:

npm run-script debug port=1234

VS Code would use this to pass a debug port to node and subsequently VS Code would try to attach to that port.

And the npm script would look like this:

    "scripts": {
        "debug": "node --debug-brk=${port} program.js",
    },

[supersonicclay]

I think with npm run you can pass additional arguments by appending -- arguments.

So how about npm run debug -- --debug-brk=1234?
On Mar 8, 2016 10:23 AM, "Andre Weinand" [email protected] wrote:

@jpierson https://github.com/jpierson I don't see how node-inspector
can help here? I'm looking for a way to pass a port number to an npm
script. Ideally something like this:

npm run-script debug port=1234

VS Code would use this to pass a debug port to node and subsequently VS
Code would try to attach to that port.

And the npm script would look like this:

"scripts": {
    "debug": "node --debug-brk=${port} program.js",
},

—
Reply to this email directly or view it on GitHub
https://github.com/Microsoft/vscode/issues/2726#issuecomment-193877131.

[jpierson]

Related information from npm:

• https://docs.npmjs.com/cli/run-script
• https://github.com/npm/npm/issues/3494
• https://github.com/npm/npm/issues/9627

[zhouhao27]

In my package.json:

 "scripts": {
    "forever": "forever start server.js",
    "db": "mongod --dbpath ./data",
    "nodemon": "nodemon server.js",
    "debug": "concurrently \"npm run db\" \"npm run nodemon\" \"parse-dashboard --config parse-dashboard-config.json --allowInsecureHTTP\"",
    "start": "concurrently \"npm run db\" \"npm run forever\" \"parse-dashboard --config parse-dashboard-config.json\"",
    "test": "echo \"Error: no test specified\" && exit 1"
  },

In my launch.json:

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Launch",
            "type": "node",
            "request": "launch",
            "program": "${workspaceRoot}/server.js",
            "stopOnEntry": false,
            "args": [],
            "cwd": "${workspaceRoot}",
            "preLaunchTask": null,
            "runtimeExecutable": null,
            "runtimeArgs": [
                "--nolazy"
            ],
            "env": {
                "NODE_ENV": "development"
            },
            "externalConsole": false,
            "sourceMaps": false,
            "outDir": null
        },
        {
            "name": "Attach",
            "type": "node",
            "request": "attach",
            "port": 5858,
            "address": "localhost",
            "restart": false,
            "sourceMaps": false,
            "outDir": null,
            "localRoot": "${workspaceRoot}",
            "remoteRoot": null
        }
    ]
}

I'm wondering if I can debug "npm start", "npm run debug" or not?

[dmythro]

Alright, +1 to this. I'm writing Electron application and launch via npm start or some Gulp task, because some stuff needs to be generated before electron main.js can be launched from the app subdir.

Any way to apply this to launch.json nicely?

[weinand]

@z-ax until I find the time to add this feature here is a setup for OS X and linux that uses an npm script to launch a program in debug mode.

Unpack this project zip and make the included script fakenode.sh executable.

Open the project with VS Code and set a breakpoint in hello.js:2.

Start debugging: the breakpoint should be hit.

You will have to adapt the script fakenode.sh and the npm scripts in the package.json to your needs.

Two things are important:

• the launch configuration requires a real JavaScript for the program attribute even if you don't need this because it is an implicit part of your npm script. So you can specify an empty dummy.js instead of the hello.js I am using.
• VS Code passes a port number to the script that you will have to pass on to the npm script. You cannot drop this because then VS Code will time out when trying to attach to that port.

[dmythro]

@weinand, thanks for reply, but until it's supported, will better work as before :)

[weinand]

Since the port number might make it difficult to adopt my approach from above, I will add support for a port attribute in the launch configs of request type launch. With this you can specify in your launch config to which port VS Code will try to connect (instead of letting VS Code choose a port randomly).

I've created this feature request for this.

[jghaines]

For reference/inspiration, here is a npm runner, with debugging, that I created as a Custom Runner for Cloud9 (a competing IDE). Their feature is in turn inspired by the Sublime build system.

{
   "cmd" : ["npm", "run", "$file_name", "--", "--debug-brk=15454"],
    "info" : "Started: npm run $file_name",
    "env" : {},
    "selector" : "package.json",
    "debugger": "v8",
    "debugport": 15454,
}

[unional]

I've created this feature request for this.

Saw the feature request is fulfilled and closed. So how to use it?

Still can't get all the pieces together. How will the launch.json looks like if I want to run npm test?

[weinand]

@unional no, this issue is not closed.

[unional]

@unional no, this issue is not closed.

Thanks. I thought the update on https://github.com/Microsoft/vscode-node-debug/issues/60 would enable this. Look forward for this feature to land! 😄

I also running into difficulty in attaching debug (or launch) to karma + karma-jspm. Do you know of an example I can learn from?

Thanks,

[MarkPieszak]

This would definitely be an important feature to add since a lot of compile / build scripts usually need to be ran before firing off a server. (webpack / gulp / what-have-you).

I'd love to be able to set up F5 to run those, and when they're finished, fire up the server & Attach. 💯

[jdnichollsc]

+1

[omayhemo]

+1
Until such time, debugging in vscode is useless for my purposes.

[basharh]

+1

[srdjan]

+1

[weinand]

Hey guys, what is really your problem?

Just use your npm script to launch your program in debug mode and then use the VS Code node debugger to attach to your program.

As long as npm doesn't provide a standard way to launch a program in debug mode, npm is not really a viable solution to support in VS Code directly.

If someone has a better solution please speak up or better: submit a PR.

[pke]

The problem is to run the script with the debugger already attached.

[weinand]

Try this:

In you package.json add a 'debug' script, e.g.:

  "scripts": {
    "start": "node ./bin/www",
    "debug": "node --nolazy --debug-brk=5858"
  },

In your launch config set attribute runtimeExecutable to the npm executable, specify the 'run-script' and 'debug' arguments as runtimeArgs and hardcode the port like this:

{
    "name": "Launch via NPM",
    "type": "node",
    "request": "launch",
    "stopOnEntry": true,
    "program": "${workspaceRoot}/bin/www",
    "args": [],
    "cwd": "${workspaceRoot}",
    "runtimeExecutable": "/Users/xxxxxx/.npm-packages/bin/npm",
    "runtimeArgs": [
        "run-script", "debug"
    ],
    "port": 5858
}

Please note that since the program attribute is mandatory you'll have to pass something even if the real program is already specified in the npm debug script. So you might have to create an empty 'dummy.js' file to satisfy the requirement.

[omayhemo]

REDACTED

I think that it's important to note. Not everyone on dev teams will use the same tooling. I don't think it can be expected to alter the launch scripts in lieu of a single IDE that doesn't support it.

[weinand]

@omayhemo
Do you mean the approach from my previous comment did not work for you?

[omayhemo]

No it doesn't work for me, unless I'm missing something. Putting the runtime path to the npm location results in the ENOENT error. I've tried several different paths here, all ultimately ending in failure.

Additionally our teams make heavy use of gulp serve and browserify.

[weinand]

@omayhemo if all other IDEs support npm scripts for launching the target in debug mode, then you can probably help me understanding how these IDEs run the target in debug mode through npm.

And in what ENOENT error are you running? If you use which npm to find the path, I cannot imagine how that can result in an ENOENT.

[weinand]

@omayhemo for the gulp serve and browserify issues I suggest to create a new issues so that we can track them individually.

[omayhemo]

npm-which helped me correct the path. Thanks for that suggestion. That did indeed allow me to launch with your prescribed solution. Minus, of course, the task runners. I've seen some documentation on task runners in vs code, though i wasn't sure if it was applicable to our situation given our tasks actual 'compile' and serve. It warrants a deeper look before I open an issue.

[weinand]

@omayhemo good to hear that my prescribed (workaround) solution was not a complete failure ;-)

[weinand]

You can now use any program as the runtimeExecutable and pass arguments via the runtimeArgs.
The program attribute is no longer mandatory which helps if the npm script already specifies the program to launch.
If you specify a (debug) port via the port attribute, no --debug-brk=nnnn attribute will be passed automatically (because the debug port is typically specified by the npm scripts as well).

So if your package.json has a 'debug' script, e.g.:

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

the corresponding launch config could look like this:

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

[Yahkob]

This would be awesome to document @weinand . I can open a PR for this if it makes sense to add

[jdnichollsc]

Any example with meteor.js? for example using the command npm start. Check my scripts please https://github.com/jdnichollsc/Meteor-Starter-Template/blob/master/package.json

Regards, Nicholls

[Yahkob]

@jdnichollsc try wrapping the meteor script with node using the debug-brk flag:
node --debug-brk -- meteor --settings settings-development.json

[jdnichollsc]

@Yahkob The following error appeared:

npm run-script debug 
> [email protected] debug /FrontEnd
> node --debug-brk -- meteor --settings settings.json --port 8890
Debugger listening on [::]:5858
module.js:471
    throw err;
    ^
Error: Cannot find module '/FrontEnd/meteor'
    at Function.Module._resolveFilename (module.js:469:15)
    at Function.Module._load (module.js:417:25)
    at Timeout.Module.runMain [as _onTimeout] (module.js:604:10)
    at ontimeout (timers.js:365:14)
    at tryOnTimeout (timers.js:237:5)
    at Timer.listOnTimeout (timers.js:207:5)
npm ERR! Darwin 15.6.0
npm ERR! argv "/usr/local/bin/node" "/usr/local/bin/npm" "run-script" "debug"
npm ERR! node v6.9.1
npm ERR! npm  v3.10.8
npm ERR! code ELIFECYCLE
npm ERR! [email protected] debug: `node --debug-brk -- meteor --settings settings.json --port 8890`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the [email protected] debug script 'node --debug-brk -- meteor --settings settings.json --port 8890'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the bidenergy package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     node --debug-brk -- meteor --settings settings.json --port 8890
npm ERR! You can get information on how to open an issue for this project with:
npm ERR!     npm bugs example
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!     npm owner ls example
npm ERR! There is likely additional logging output above.
npm ERR! Please include the following file with any support request:
npm ERR!     /FrontEnd/npm-debug.log

Using the following configuration

• package.json:

{
  "name": "example",
  "version": "1.0.0",
  "description": "Application description.",
  "scripts": {
    "start": "meteor --settings settings.json --port 8890",
    "debug": "node --debug-brk -- meteor --settings settings.json --port 8890"
  }
}

• launch.json:

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

Thanks in advance, Nicholls

[Yahkob]

You'll need to provide an absolute path to meteor (i.e. /usr/local/bin/meteor) @jdnichollsc

[jdnichollsc]

Exist any other cross-platform option? (Mac, Linux, Windows)
PD: I'm running Meteor with the command npm start :)

[electrotype]

On Windows, the "runtimeExecutable" has to be "npm.cmd", not "npm". Otherwise, the Cannot launch debug target (spawn npm ENOENT). error occures!

Is there a way to make this cross-plateform?

[weinand]

@electrotype please see https://code.visualstudio.com/updates/v1_6#_launch-configuration-supports-npm-and-other-tools for details

[electrotype]

It would be nice to have a "${runtimeExtension}" variable which would be ".cmd" or "" depending on the platform, so we could simply use : "runtimeExecutable": "npm${runtimeExtension}.
Thanks @weinand

[weinand]

@electrotype a "${runtimeExtension}" variable would not be a general solution for all possible task runners because ".cmd" is not the only possible extension on Windows.

The following solution is already possible and works in all cases:

    "runtimeExecutable": "npm",
    "windows": {
        "runtimeExecutable": "npm.cmd"
    },

[electrotype]

@weinand I don't want to be too much off-topic, but with everything I've learned in this thread, I'm still not able to properly debug a Node.js application based on TypeScript with _auto recompilation and application restart_ in VSCode. I asked my question on StackOverflow, with a project example. If you have some time to check it out, it would be really appreciated!!

[weinand]

@electrotype I've commented on StackOverflow.

BTW, I've created a feature request for your scenario.