Windows环境下用WebStorm+Chrome调试AngularJS2+NPM

Question

在使用VisualStudio代码学习了AngularJs2官方英雄教程之后，我想在Windows10上使用WebStorm+Chrome进行代码和调试。

为此，我做了下面的事情；

>

安装Chrome JetBrains IDE扩展

• 不管--debug选项如何，断点都没有命中。
• 在WebStorm中，连接被拒绝：连接消息在一段时间后弹出。
• 在WebStorm中发生连接错误后，Chrome开发控制台显示大量消息；无法加载资源:NET::err_connection_rejectedhttp://localhost:3000/browser-sync/socket.io/？eio=3&transport=polling&t=lugjh1h
• 管理员模式无济于事。
• Chrome扩展具有端口63342。我发现启动日志显示端口5858，并将5858设置为Chrome扩展。但这没有帮助。

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

{
  "browser": "chrome"
}

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

请注意，WebStorm版本2016.2.3和Chrome 53都是最新的。

Answer 1

嗯...

1. 向NPM运行配置中添加--debug将不起作用。如果希望通过NPM运行调试服务器端代码，则在调试配置时需要遵循打印到控制台的说明，即:

要调试“start”脚本，请确保将%node_debug_option%字符串指定为要调试的node命令的第一个参数。例如：{“start”：“node%node_debug_option%server.js”}