Debug mit Visual Studio Code funktioniert nicht

Question

Ich möchte in der Lage sein, eine Angular2-Anwendung mit Visual Studio Code zu debuggen.

Hier ist meine Umgebung:

• OS: Ubuntu 16.10 x64
• Browser: Chromium 53.0.2785.143
• Knoten: 6.8.0
• Winkel- cli: 1.0.0-beta.19-3

ein neues Projekt mit Winkel-cli Erstellen:

ng new test-VSC-debug 
cd test-VSC-debug 

Dann öffne ich VSC und laden Sie das Projekt: File/open folder

ich auf dem debug Logo klicken und ich configure launch.json durch chrome Auswahl. Es erzeugt die folgende Datei:

{ 
    "version": "0.2.0", 
    "configurations": [ 
     { 
      "name": "Launch Chrome against localhost, with sourcemaps", 
      "type": "chrome", 
      "request": "launch", 
      "url": "http://localhost:8080", 
      "sourceMaps": true, 
      "webRoot": "${workspaceRoot}" 
     }, 
     { 
      "name": "Attach to Chrome, with sourcemaps", 
      "type": "chrome", 
      "request": "attach", 
      "port": 9222, 
      "sourceMaps": true, 
      "webRoot": "${workspaceRoot}" 
     } 
    ] 
} 

Dann habe ich nur das angular2 Projekt starten, indem Sie:

ng serve 

Sobald es gestartet wurde, in VSC ich wählen: "Starten Sie Chrome gegen localhost, mit sourcemaps".

Dann erhalte ich den folgenden Fehler:
"Kann nicht finden Chrome: Installieren Sie es oder legen Sie das RuntimeExecutable-Feld in der Startkonfiguration." So

I gesetzt:
"runtimeExecutable": "Chrom-Browser"
(wie ich nicht haben Chrom aber Chrom auf meinem Ubuntu).

Angular-cli Standard-Port zum Starten der App ist 4200. Ändern Sie URL von: "http://localhost:8080" zu "http://localhost:4200".

Jetzt wird der Browser die App zu öffnen, aber VSC hat den folgenden Fehler: "Es kann keine Verbindung nach 10000 ms Prozess, Timeout zur Laufzeit - (Grund: Kann nicht an das Ziel verbinden: ECONREFUSED 127.0.0.1:9222 connect"

.

Von anderen Antworten auf Stackoverflow/gitHub Probleme gefunden, ich habe gelesen, dass ich vielleicht alle Instanzen Chrom zu töten, bevor Sie versuchen, das zu tun, so dass ich nur in der Nähe Chrom und laufen killall chromium-browser.

ich versuche, das laufen erneut debuggen: Gleicher Fehler wie zuvor (keine Verbindung möglich)

Ich habe auch gesehen, dass die folgenden Argumente helfen könnten:

"runtimeArgs": [ 
    "--remote-debugging-port=9222", 
    "--user-data-dir" 
] 

Aber es ändert nichts.

Ich entschied mich, VSC für meine Typoskript-Devs zu verwenden (meistens angular2) und diese Art des Debuggens scheint sehr mächtig zu sein. Ich habe das Gefühl, dass es schade wäre, es nicht zu benutzen :).

Danke für jede Hilfe!

PS: Einige verwandte Fragen und Stackoverflow Github Fragen:
- Debug & Run Angular2 Typescript with Visual Studio Code?
- https://github.com/angular/angular-cli/issues/2453
- https://github.com/angular/angular-cli/issues/1936
- https://github.com/angular/angular-cli/issues/1281

EDIT 1: !!! Teilverbesserung !!! Ich habe einen Weg gefunden, Debug-Informationen innerhalb der Visual Studio Code-Konsole zu haben! Es ist also noch nicht perfekt, da Breakpoints nicht funktionieren, aber hier ist die Sache. So weit, wenn ich http://localhost:9222 geöffnet habe konnte ich nichts sehen. ("localhost autorisiert die Verbindung nicht").

ABER, wenn ich Chrom so starten:

chromium-browser --remote-debugging-port=9222 --user-data-dir=remote-profile 

Das Wichtigste ist, dieses Argument zu bemerken: --user-data-dir=remote-profile. Wenn Sie einfach --user-data-dir übergeben, startet ein neues Fenster ohne Verbindung. Aber es ist nicht genug. Sie müssen Remote-Profil als Wert übergeben.

• es öffnet sich ein neues Browserfenster
• Ich öffne http://localhost:4200 und ich kann auch http://localhost:9222 erreichen!
• Ich kann VSC mit der Option "An Chrom mit Quellkarte anhängen" verbinden! (wie Sie sehen können, habe ich die „Angular 2 wird in dem Entwicklungsmodus läuft. Rufen Sie enableProdMode(), um den Produktionsmodus zu aktivieren.“ Angezeigt in der Konsole und die Fußzeile hat jetzt einen orangefarbenen Hintergrund)

Bis jetzt hoffe ich, dass es einigen Leuten helfen kann. Aber das Problem ist jetzt, dass Breakpoints nicht funktionieren.

Ich graben weiter und werde einen weiteren Schnitt machen, wenn ich warum finde.

Answer 1

Ich war in der Lage, dieses Problem auf OSX zu lösen. Der Grund dafür ist, dass es mehrere Ursachen gibt, die das Problem verursachen.

1. Sie treffen auf den ersten mit --user-data-dir=remote-profile: Wenn Sie bereits Chrome laufen (zum Beispiel bereits Tabs geöffnet - wer nicht?), Haben Sie eine andere userDataDir verwenden Chrome haben starten eine unabhängige Beispiel.
   Der richtige Weg, dies zu tun, ist jedoch "userDataDir": "${workspaceRoot}/.vscode/chrome", zu Ihrer launch.json Konfiguration hinzuzufügen (siehe unten). Dies muss ein Weg sein. Wenn 'remote-profile' verwendet wird, wird versucht, ein relatives Verzeichnis namens 'remote-profile' zu finden.
2. Sie benötigen sourceMapPathOverrides in Ihrem launch.json Config zu setzen, hängt der Wert von denen auf Ihrem Betriebssystem:
   OSX: "sourceMapPathOverrides": { "webpack:///./*": "${webRoot}/*" }
   Fenster: "sourceMapPathOverrides": { "webpack:///C:*":"C:/*" }
   Linux: "sourceMapPathOverrides": { "webpack:///*": "/*" }
   (Anmerkung: ich Windows nicht getestet oder Linux-Versionen)

Hier ist meine Arbeits launch.json auf OSX:

{ 
    // Use IntelliSense to learn about possible Node.js debug attributes. 
    // Hover to view descriptions of existing attributes. 
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387 
    "version": "0.2.0", 

    "configurations": [ 
     { 
      "name": "Launch Chrome against localhost, with sourcemaps", 
      "type": "chrome", 
      "request": "launch", 
      "url": "http://localhost:4200", 
      // This forces chrome to run a brand new instance, allowing existing 
      // chrome windows to stay open. 
      "userDataDir": "${workspaceRoot}/.vscode/chrome", 
      "sourceMaps": true, 
      "webRoot": "${workspaceRoot}", 
      //"diagnosticLogging": true, 
      "sourceMapPathOverrides": { "webpack:///./*": "${webRoot}/*" } 
     }, 
     { 
      "name": "Attach to Chrome, with sourcemaps", 
      "type": "chrome", 
      "request": "attach", 
      "url": "http://localhost:4200", 
      "port": 9222, 
      "sourceMaps": true, 
      "webRoot": "${workspaceRoot}", 
      "diagnosticLogging": true, 
      "sourceMapPathOverrides": { "webpack:///./*": "${webRoot}/*" } 
     } 
    ] 
} 

Damit dies funktioniert, führen Sie ng serve in einem Terminal aus, und drücken Sie F5 innerhalb von Visual Studio Code.

Hier sind die Versionen Ich bin mit Arbeit:

• Winkel-cli: 1.0.0-beta.24
• Knoten: 7.3.0
• Chrome: 55,0 .2883.95
• Visual Studio-Code: 1.8.1
• VSCode-Erweiterung "Debugger für Chrome" msjsdiag.debugger-for-chrome: 2.4.2

Answer 2

Endlich bekomme ich es voll funktionstüchtig !!!

Für Interessenten:

(unter Verwendung von Chrom-Browser auf Linux, aber Sie können von "Chrom" einfach nur ersetzen).

Zuerst ist hier die launch.json config:

{ 
    "version": "0.2.0", 
    "configurations": [ 
     { 
      "name": "Attach to Chrome, with sourcemaps", 
      "type": "chrome", 
      "request": "attach", 
      "port": 9222, 
      "sourceMaps": true, 
      "webRoot": "${workspaceRoot}/src", 
      "url": "http://localhost:4200/", 
      "sourceMapPathOverrides": { 
       "webpack:///*": "/*" 
      } 
     } 
    ] 
} 

Ich beschloss, den Teil mit „Anfrage“ zu entfernen: „Start“, wie ich ein neues Browserfenster starten müssen.

starten Sie den Browser so dann:
chromium-browser --remote-debugging-port=9222 --user-data-dir=remote-profile

In dem neuen Fenster Zugang zu http://localhost:4200.

Dann von VSC, führen Sie das Debug aus.

Alles sollte gut funktionieren, und Sie sollen Stützpunkte der Lage sein zu verwenden :)

GIF hier in Aktion zu sehen: http://hpics.li/0156b80

Answer 3

ähnlich wie Aaron F. am Ich benutze die für Angular folgende Einstellung 2+ entwickeln in Windows-Umgebung

{ 
    "version": "0.2.0", 
    "configurations": [ 
     { 
      "name": "Launch Chrome against localhost, with sourcemaps", 
      "type": "chrome", 
      "request": "launch", 
      "url": "http://localhost:4200", 
      "sourceMaps": true, 
      "webRoot": "${workspaceRoot}", 
      "trace": true, 
      "smartStep": true, 
      "runtimeArgs": [ 
       "--disable-session-crashed-bubble", 
       "--disable-infobars" 
      ], 
      "userDataDir": "${workspaceRoot}/.vscode/chrome", 
      "sourceMapPathOverrides": { 
       "webpack:///./*": "${webRoot}/*" 
      } 
     } 
    ] 
} 

Answer 4

ich mit launch.json wierd Problem bekam, die von Aaron F.

".Skripte "in line Debugger-Befehl Urls wie folgt geben:

webpack-internal:///./src/app/app.component.ts (/home/user/my-dream-app/src/app/app.component.ts) 
- webpack:/src/app/app.component.ts (/home/user/my-dream-app/src/app/webpack:/src/app/app.component.ts) 

so VS-Code versucht, Datei zu verwenden"/home/user/my-dream-app/src/app/webpack:/src/app/App. component.ts“. (Hinweis webpack: in der Mitte)

Quelle Karten nicht funktioniert, weil meine Chrome-uRL als geben "webpack. /" mit ONE slash

in bekam es mit dieser Markteinführung arbeiten. json:

{ 
    "version": "0.2.0", 
    "configurations": [ 
     { 
      "type": "chrome", 
      "request": "launch", 
      "name": "Launch Chrome with ng serve", 
      "url": "http://localhost:4200/", 
      "webRoot": "${workspaceRoot}", 
      "sourceMapPathOverrides": { "webpack:/*": "${webRoot}/*" } 
     } 
     ] 
} 

und bekam korr Mapping ect

webpack-internal:///./src/app/app.component.ts (/home/user/my-dream-app/src/app/app.component.ts) 
- webpack:/src/app/app.component.ts (/home/user/my-dream-app/src/app/app.component.ts) 

• Ubuntu: 16,04
• Chrome: 64.0.3282.186
• VSCode: 1.20.1
• Angular CLI: 1.7.2
• Knoten: 7.10.1