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

Question

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

为此，我做了如下操作；

1. 安装 Chrome JetBrains IDE 扩展

2. 阅读后WebStorm tutorial ，我可能需要添加 --debug 节点选项。

NPM配置如下。

完成上述设置后，单击“运行”按钮，然后像以前一样弹出浏览器。

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

• 无论使用 --debug 选项，断点都没有命中。
• 在 WebStorm 中，一段时间后会弹出连接被拒绝:连接消息。
• WebStorm 发生连接错误后，Chrome 开发者控制台会显示大量消息； 无法加载资源: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

> <a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="3859565f4d54594a0a15494d515b534b4c594a4c780916081608" rel="noreferrer noopener nofollow">[email protected]</a> start C:\Users\Youngjae\Documents\recognition-web
> tsc && concurrently "npm run tsc:w" "npm run lite" 

[0] 
[0] > <a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a2c3ccc5d7cec3d0908fd3d7cbc1c9d1d6c3d0d6e2938c928c92" rel="noreferrer noopener nofollow">[email protected]</a> tsc:w C:\Users\Youngjae\Documents\recognition-web
[0] > tsc -w
[0] 
[1] 
[1] > <a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c5a4aba2b0a9a4b7f7e8b4b0aca6aeb6b1a4b7b185f4ebf5ebf5" rel="noreferrer noopener nofollow">[email protected]</a> 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. 将 --debug 添加到 NPM Run 配置将不起作用。如果您想调试通过 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 的端口

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