在 Windows 上使用 WebStorm+Chrome 调试 Angularjs2+npm

Question

在使用 VisualStudio Code AngularJs2 official Hero tutorial 之后，我想在 Windows 10 上使用 WebStorm+Chrome 进行编码和调试。

为此，我做了如下操作；

安装 Chrome JetBrains IDE 扩展
阅读WebStorm tutorial后，我可能需要添加--debug节点选项。

NPM 配置如下。

通过以上设置，点击运行按钮，浏览器会像以前一样弹出。

但我的问题是，在 hero.service.ts 文件或任何其他地方的 getHeroes() return 方法上放置断点没有命中。

无论--debug选项如何，断点都没有命中。
在 WebStorm 中，Connection refused: connect 消息会在一段时间后弹出。
WebStorm发生连接错误后，Chrome开发控制台显示大量信息； Failed to load resource: net::ERR_CONNECTION_REFUSED http://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
  }
}

bs-config.json

{
  "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和Chrome53，都是最新的。

Answer 1

嗯……

将 --debug 添加到 NPM 运行配置将不起作用。如果你喜欢通过 NPM 调试服务器端代码运行，当你尝试调试你的配置时，你需要按照打印到控制台的说明进行操作，即：

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

为此，您必须相应地修改 package.json。但是只有当你想调试服务器代码时才应该这样做。

要调试您的 Angular 应用程序，您必须创建适当的 JavaScript 调试运行配置，并将 http://localhost:3000 设置为 URL（或您的 npm 服务器正在侦听的任何地址）并将其用于调试（参见 https://confluence.jetbrains.com/display/WI/Starting+a+JavaScript+debug+session#StartingaJavaScriptdebugsession-Startingadebugsessionwhenusingadifferentwebserver）
请确保将分机端口改回默认值 (63342)。 5858 是调试器正在侦听的端口节点，它与扩展端口完全无关。扩展端口是 Chrome 扩展用来连接到 WebStorm

如果您在设置调试器时仍然遇到问题，请创建支持票。

在 Windows 上使用 WebStorm+Chrome 调试 Angularjs2+npm

Debugging Angularjs2+npm with WebStorm+Chrome on Windows

debugging

npm

webstorm

angular