Debuggen Angularjs2 + npm mit WebStorm + Chrome unter Windows

Question

Nach folgenden AngularJs2 official Hero tutorial mit Visual Studio-Code, würde Ich mag WebStorm + Chrome unter Windows codieren und zu debuggen 10.

Dafür verwenden, ich, wie unten tat;

1. Installieren Chrome JetBrains IDE Erweiterung

2. Nach WebStorm tutorial lesen, ich könnte --debug Knoten Option hinzufügen müssen.

Die NPM-Konfiguration ist wie folgt.

Mit den obigen Einstellungen auf Ausführen-Schaltfläche und dann Browser wie vor aufgetaucht.

Aber mein Problem ist, dass setzen Breakpoint auf getHeroes()return Methode in hero.service.ts Datei oder jeder andere Ort nicht getroffen.

• Unabhängig von --debug Option, Haltepunkte getroffen nicht.
• In WebStorm, Connection refused: connect Nachricht wird nach einiger Zeit aufgetaucht.
• Nachdem in WebStorm ein Verbindungsfehler aufgetreten ist, zeigt die Chrome Dev-Konsole viele Nachrichten an. Failed to load resource: net::ERR_CONNECTION_REFUSED http://localhost:3000/browser-sync/socket.io/?EIO=3&transport=polling&t=LUGJH1h
• Administrator-Modus hilft nicht.
• Chrome Erweiterung hat Port 63342. Ich habe festgestellt, dass das Startprotokoll den Port 5858 anzeigt und 5858 auf die Chrome-Erweiterung setzt. Aber es hilft nicht.

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

Konsolenprotokoll beim Start

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

Wie Setup-Umgebung Debuggen?

Beachten Sie, dass WebStorm Version 2016.2.3 und Chrome 53, beide die neuesten. Nun

Answer 1

...

1. Hinzufügen --debug zu NPM Run-Konfiguration wird nicht funktionieren.Wenn Sie serverseitigen Code durch NPM laufen debuggen möchten, müssen Sie Anweisungen befolgen, gedruckt zu trösten, wenn Sie versuchen, Ihre Konfiguration zu debuggen, und zwar:

„Start“ debuggen Skript, stellen Sie sicher% NODE_DEBUG_OPTION % string ist , das als erstes Argument für den Knotenbefehl angegeben ist, den Sie debuggen möchten. Zum Beispiel: { "Start": "Knoten% NODE_DEBUG_OPTION% server.js"}

Um dies zu tun, müssen Sie Ihre package.json entsprechend ändern. Aber das sollte nur getan werden, wenn Sie den Server-Code debuggen möchten.

1. Um Ihre Angular Anwendung zu debuggen, können Sie die entsprechenden JavaScript Debug Run Konfiguration mit http://localhost:3000 Satz als URL erstellen (oder Adresse Ihre Unternehmungen npm Server hört auf) und es für Debugging (siehe https://confluence.jetbrains.com/display/WI/Starting+a+JavaScript+debug+session#StartingaJavaScriptdebugsession-Startingadebugsessionwhenusingadifferentwebserver)

2. Bitte stellen Sie sicher, dass der Erweiterungsport wieder auf den Standard zurückgesetzt wird (63342). 5858 ist der Port Node Debugger hört auf, es hat absolut nichts mit Extension-Port zu tun. Erweiterungsport ist der Port, den die Chrome-Erweiterung für die Verbindung mit WebStorm verwendet

Wenn Sie weiterhin Probleme beim Einrichten des Debuggers haben, erstellen Sie ein Supportticket.