Debugging Angularjs2+npm with WebStorm+Chrome on Windows

Question

After following AngularJs2 official Hero tutorial with VisualStudio Code, I'd like to code and debug using WebStorm+Chrome on Windows 10.

For that, I did as below;

1. Install Chrome JetBrains IDE extension

2. After reading WebStorm tutorial, I might need to add --debug Node option.

The NPM configuration is as below.

With above settings, click Run button then browser popped up as before.

But my problem is that put breakpoint on getHeroes() return method in hero.service.ts file or any other place does not hit.

• Regardless of --debug option, Breakpoints did not hit.
• In WebStorm, Connection refused: connect message is popped up after some time.
• After connection error occurred in WebStorm, Chrome Dev console displays lots of messages; Failed to load resource: net::ERR_CONNECTION_REFUSED http://localhost:3000/browser-sync/socket.io/?EIO=3&transport=polling&t=LUGJH1h
• Administrator mode does not help.
• Chrome extension has port 63342. I found that startup log shows port 5858 and set 5858 to Chrome extension. But it does not help.

package.json

{
  "name": "angular2-quickstart",
  "version": "1.0.0",
  "scripts": {
    "start": "tsc && concurrently \"npm run tsc:w\" \"npm run lite\" ",
    "lite": "lite-server",
    "postinstall": "typings install",
    "tsc": "tsc",
    "tsc:w": "tsc -w",
    "typings": "typings"
  },
  "license": "ISC",
  "dependencies": {
    "@angular/common": "2.0.0",
    "@angular/compiler": "2.0.0",
    "@angular/core": "2.0.0",
    "@angular/forms": "2.0.0",
    "@angular/http": "2.0.0",
    "@angular/platform-browser": "2.0.0",
    "@angular/platform-browser-dynamic": "2.0.0",
    "@angular/router": "3.0.0",
    "@angular/upgrade": "2.0.0",

    "core-js": "^2.4.1",
    "reflect-metadata": "^0.1.3",
    "rxjs": "5.0.0-beta.12",
    "systemjs": "0.19.27",
    "zone.js": "^0.6.23",

    "angular2-in-memory-web-api": "0.0.20",
    "bootstrap": "^3.3.6"
  },
  "devDependencies": {
    "concurrently": "^2.2.0",
    "lite-server": "^2.2.2",
    "typescript": "^2.0.2",
    "typings":"^1.3.2"
  }
}

tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false
  }
}

bs-config.json

{
  "browser": "chrome"
}

Console log on startup

"C:\Program Files (x86)\JetBrains\WebStorm 2016.2.3\bin\runnerw.exe" "C:\Program Files\nodejs\node.exe" --debug "C:\Program Files\nodejs\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 [::]:5858

> angular2-quickstart@1.0.0 start C:\Users\Youngjae\Documents\recognition-web
> tsc && concurrently "npm run tsc:w" "npm run lite" 

[0] 
[0] > angular2-quickstart@1.0.0 tsc:w C:\Users\Youngjae\Documents\recognition-web
[0] > tsc -w
[0] 
[1] 
[1] > angular2-quickstart@1.0.0 lite C:\Users\Youngjae\Documents\recognition-web
[1] > lite-server
[1] 
[1] ** browser-sync config **
[1] { injectChanges: false,
[1]   files: [ './**/*.{html,htm,css,js}' ],
[1]   watchOptions: { ignored: 'node_modules' },
[1]   server: { baseDir: './', middleware: [ [Function], [Function] ] },
[1]   browser: 'chrome' }
[1] [BS] Access URLs:
[1]  -------------------------------------
[1]        Local: http://localhost:3000
[1]     External: http://192.168.56.1:3000
[1]  -------------------------------------
[1]           UI: http://localhost:3001
[1]  UI External: http://192.168.56.1:3001
[1]  -------------------------------------
[1] [BS] Serving files from: ./
[1] [BS] Watching files...
[1] 16.10.05 00:20:58 304 GET /index.html
[1] 16.10.05 00:20:58 304 GET /styles.css
.....

How to setup debugging environment?

Note that, WebStorm version 2016.2.3 and Chrome 53, both the latest.

Answer 1

Well...

1. adding --debug to NPM Run configuration won't work. If you like to debug server-side code run through NPM, you need to follow instructions printed to console when you try to debug your configuration, namely:

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

To do this, you have to modify your package.json accordingly. But this should only be done if you like to debug the server code.

2. To debug your Angular application, you have to create the appropriate JavaScript Debug run configuration with http://localhost:3000 set as URL (or whatever address your npm server is listening on) and use it for debugging (see https://confluence.jetbrains.com/display/WI/Starting+a+JavaScript+debug+session#StartingaJavaScriptdebugsession-Startingadebugsessionwhenusingadifferentwebserver)

3. Please make sure to change extension port back to default (63342). 5858 is the port node debugger is listening on, it has absolutely nothing to do with extension port. Extension port is the port Chrome extension uses to connect to WebStorm

if you still have problems setting up the debugger, please create a support ticket.