19

Bearing in mind that I have only the loosest understanding of what a debugger is really doing, I need help setting up the WebStorm npm debug configuration for an express.js application.

Here's me so far-- I click debug with my settings as I think they should be (below):

/Users/me/.nvm/versions/node/v4.4.1/bin/node --debug=8090     
/Users/me/.nvm/versions/node/v4.4.1/lib/node_modules/npm/bin/npm-cli.js run-script start

To debug "start" script, make sure $NODE_DEBUG_OPTION string is specified as the first argument for node command you'd like to debug.
For example:
 { "start": "node $NODE_DEBUG_OPTION server.js" }
Debugger listening on port 8090
...
It has begun. Port: 3000

So at this point, the application has started up and responds to my POST to localhost:3000, but does not break on the breakpoint I set.

Looking in the Debugger>Variables pane, I see Connecting to localhost:57617, then a tooltip pops up saying "Connection refused" and the pane says Frame is not available.

I don't understand where that port number 57617 is coming from. It varies, though not according to any pattern I've yet discovered, except inasmuch as it is always different than the one I set in the --debug=X or --debug-brk=X node option.

2
  • 1
    57617 is a random port Node debugger is listening on. This doesn't really matter. Did you add $NODE_DEBUG_OPTION to node command in your package.json as it's written in the message? You can't debug npm scripts unless this variable is there - it's needed to start Node spawned by npm in debug mode
    – lena
    Commented May 13, 2016 at 10:21
  • 1
    That was it. (I was, I admit, confused about that as I somehow imagined it was not a literal string value, but some env variable or some such). If you answer the question below, I will accept your answer.
    – Ben
    Commented May 13, 2016 at 17:20

2 Answers 2

15

The error message is indeed very unclear. You need to adjust your npm script entry in the package.json (sadly). Found a clear description in this blog post: http://pavelpolyakov.com/2016/05/01/webstorm-npm-tasks-debug/

Your start entry should look like the following:

"scripts": {
    "start": "node $NODE_DEBUG_OPTION ./node_modules/someModule/bin/someModule.js --arguments"
}

You could also go with two entries to keep the first one DRY. Though it is not really necessary since both run just fine from command line. So just for completeness' sake:

"scripts": {
    "start": "someModule --arguments",
    "startDebug": "node $NODE_DEBUG_OPTION ./node_modules/someModule/bin/someModule.js --arguments"
}

I don't find this method particularly clean, imo that is what the npm debugger should do for you without having to manipulate source code. But it appears to be the only way (for now).

6
  • I agree, that would be undesirable, but I was able to pass $NODE_DEBUG_OPTION to the script from the command line (npm run configuration), which was really all that was needed. No source edits required.
    – Ben
    Commented May 19, 2016 at 14:04
  • How exactly did you do so? Can you specify exactly what you put in "Arguments". Nothing I tried was successful, I must be missing something here. Commented May 19, 2016 at 17:35
  • 4
    In the Run/Debug Configurations window of Webstorm, you can pass "$NODE_DEBUG_OPTiON" to the script in the Arguments field. (It should be an npm config)
    – Ben
    Commented May 19, 2016 at 17:39
  • 1
    That did not work for me... Either I put it in the node options, or arguments. Both fail... :/. (WebStorm 2016.1.2). If I run the resulting command "/usr/local/bin/node $NODE_DEBUG_OPTION /usr/local/lib/node_modules/npm/bin/npm-cli.js run-script start" in the terminal, it works just fine though, really weird. Commented May 19, 2016 at 17:41
  • 1
    For me, adding "%NODE_DEBUG_OPTION%" as Webstorm 2016.3.2 suggests caused the script to no longer work from the command line. I get a "Cannot find module <path>/%NODE_DEBUG_OPTION%" error
    – Josh Noe
    Commented Feb 18, 2017 at 4:42
4

I never needed this in previous versions of Node or Webstorm. Not sure which changed requiring this option now.

I had to add it in the package.json, though, adding it to the run configuration does not work. And I had to make a separate script because it broke when running any script without debugging.

Here's my package.json (Note Windows style variables %VAR%, use $VAR for Unix-like systems):

"scripts": {
    "start": "node index.js",
    "debug": "node %NODE_DEBUG_OPTION% index.js",
},

Then when I want to debug I use a run configuration that calls the debug option--because in Windows at least, node is taking the var literally when it's not replaced.


If you try to enter the variable in Webstorm's (2016.3.3) run configuration dialog:

Webstorm Run Configuration

It results in these actual commands, which are incorrect:

As a script argument:

"C:\...\runnerw.exe" "C:\...\node.exe" "C:\...\npm-cli.js" run start %NODE_DEBUG_OPTION%

As a Node option:

"C:\...\runnerw.exe" "C:\...\node.exe" %NODE_DEBUG_OPTION% "C:\...\npm-cli.js" run start

But the options seem to need to be passed to NPM, not the npm script (former), and not node (latter), and there's no way to do that in the dialog, as far as I know. Thus, adding to the package.json script command.

2

Your Answer

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

Not the answer you're looking for? Browse other questions tagged or ask your own question.