调试Angularjs2 + NPM与WebStorm + Chrome Windows版

与VisualStudio的代码如下AngularJs2 official Hero tutorial后，我想在Windows 10调试Angularjs2 + NPM与WebStorm + Chrome Windows版

编码和调试使用WebStorm +镀铬对于这一点，我做了如下;

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

NPM配置如下。

通过以上设置后，单击运行按钮，然后浏览器之前弹出。

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

无论--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 

> [email protected] start C:\Users\Youngjae\Documents\recognition-web 
> tsc && concurrently "npm run tsc:w" "npm run lite" 

[0] 
[0] > [email protected] tsc:w C:\Users\Youngjae\Documents\recognition-web 
[0] > tsc -w 
[0] 
[1] 
[1] > [email protected] 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都是最新版本。

来源

2016-10-04 Youngjae

嗯......

加入--debug到NPM运行配置将无法正常工作。如果您喜欢调试通过NPM运行服务器端的代码，你需要遵循打印的说明来安慰当您尝试调试您的配置，即：

进行调试“开始”的剧本，确保％NODE_DEBUG_OPTION ％字符串是，它指定为要调试的节点命令的第一个参数。例如：{ “开始”： “节点％NODE_DEBUG_OPTION％server.js”}

要做到这一点，你必须相应地修改您的package.json。但是这只能在你想调试服务器代码时才能完成。

要调试角的应用程序，你必须与http://localhost:3000设置为URL（或任何地址您的NPM服务器监听）创建相应的JavaScript调试运行配置和使用它的调试（请参阅https://confluence.jetbrains.com/display/WI/Starting+a+JavaScript+debug+session#StartingaJavaScriptdebugsession-Startingadebugsessionwhenusingadifferentwebserver）

请确保将分机端口更改回默认值（63342）。 5858是调试器监听的端口节点，它与扩展端口无关。分机端口是Chrome扩展程序用于连接到WebStorm的端口

如果您在设置调试器时仍有问题，请创建支持服务单。

来源

2016-10-04 16:24:49 lena

谢谢。我的错。我误解了'npm'也是客户工作的一部分。但是，在js调试器配置中，在启动任务之前添加'npm start'时调试器未激活。它只能在命令提示符下键入'npm start'。这篇文章也指出了类似的经验http://stackoverflow.com/questions/37197866/connection-refused-in-webstorm-npm-debug-configuration#comment62179429_37322417 – Youngjae

'发射前'启动配置需要返回退出代码 - 其他进程正在等待返回码开始。这是“发布前”设计的方式 - 它应该用于在运行主流程之前运行某种预处理。由于'npm start'不会返回退出代码，直到您手动终止它，调试器配置不会启动 – lena

//感谢您的友好解释。现在我完全明白了:) – Youngjae

调试Angularjs2 + NPM与WebStorm + Chrome Windows版

回答

相关问题