webentwicklung-frage-antwort-db.com.de

Debuggen mit Visual Studio Code funktioniert nicht

Ich möchte eine Angular2-Anwendung mit Visual Studio Code debuggen können. 

Hier ist meine Umgebung: 

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

Neues Projekt mit angle-cli erstellen:

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

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

Ich klicke auf das debug-Logo und ich configure launch.json durch Auswahl von chrome. 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 starte ich einfach das angle2-Projekt mit:

ng serve

Nach dem Start wähle ich in VSC: "Chrome gegen localhost starten, mit Quellcaps".

Dann erhalte ich folgende Fehlermeldung:
"Chrome kann nicht gefunden werden: Installieren Sie es oder setzen Sie das Feld runtimeExecutable in der Startkonfiguration."

Also habe ich eingestellt:
"runtimeExecutable": "Chrom-Browser"
(wie ich nicht habe Chrom, aber Chrom auf meinem Ubuntu).

Angular-cli-Standardport zum Starten der App ist 4200 . Ändern Sie die URL von: " http: // localhost: 8080 " in " http: // localhost: 4200 ".

Jetzt öffnet der Browser die App, aber der VSC hat die folgende Fehlermeldung: "Verbindung zur Laufzeit kann nicht hergestellt werden, Timeout nach 10000 ms - (Grund: Verbindung zum Ziel kann nicht hergestellt werden: Verbinden Sie ECONREFUSED 127.0.0.1:9222").

Aus anderen Antworten, die in stackoverflow/github-Problemen gefunden wurden, habe ich gelesen, dass ich möglicherweise alle Chrom-Instanzen töten muss, bevor ich das versuche. Ich schließe also Chrom und führe killall chromium-browser aus.

Ich versuche, den Debug erneut auszuführen: Gleicher Fehler wie zuvor (Verbindung kann nicht hergestellt werden).

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

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

Aber daran ändert sich nichts.

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

Danke für jede Hilfe!

PS: Einige verwandte Stackoverflow-Fragen und Probleme mit Github:
- Debuggen und Angular2 TypeScript mit Visual Studio-Code ausführen?
- 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 in der Visual Studio Code-Konsole zu haben! .__ Es ist also noch nicht perfekt, da Haltepunkte nicht funktionieren, aber hier ist die Sache . Bisher habe ich http geöffnet : // localhost: 9222 Ich konnte nichts sehen. ("localhost autorisiert die Verbindung nicht").

ABER, wenn ich Chrom so lasse: 

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

Das Wichtigste ist, dieses Argument zu beachten: --user-data-dir=remote-profile. Wenn Sie einfach --user-data-dir übergeben, wird ein neues Fenster ohne Verbindungsaufbau geöffnet. Aber es ist nicht genug. Sie müssen remote-profile 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 Chrome mit Quellkarte anhängen" verbinden! enter image description here (Wie Sie sehen können, ist der Angular 2 im Entwicklungsmodus aktiv. Rufen Sie enableProdMode () auf, um den Produktionsmodus zu aktivieren. "In der Konsole angezeigt und die Fußzeile hat jetzt einen orangefarbenen Hintergrund.)

Bislang hoffe ich, dass es einigen Leuten helfen kann ... Aber das Problem ist jetzt, dass Haltepunkte nicht funktionieren .. _. enter image description here

Ich grabe weiter und werde einen weiteren Schnitt machen, wenn ich den Grund finde.

14
maxime1992

Ich konnte dieses Problem unter OSX lösen. Der Grund, warum es so ein Schmerz ist, ist, dass das Problem durch mehrere Dinge verursacht wird.

  1. Sie treffen mit --user-data-dir=remote-profile auf die erste: Wenn Sie bereits Chrome ausführen (z. B. Tabs bereits geöffnet haben - wer nicht?), Müssen Sie eine andere userDataDir verwenden, damit Chrome eine unabhängige Instanz startet.
    Der richtige Weg, dies zu tun, ist jedoch, "userDataDir": "${workspaceRoot}/.vscode/chrome", zu Ihrer Konfiguration von launch.json hinzuzufügen (siehe unten). Dies muss ein Weg sein. Wenn 'remote-profile' verwendet wird, wird versucht, ein relatives Verzeichnis mit dem Namen 'remote-profile' zu finden.
  2. Sie müssen sourceMapPathOverrides in Ihrer launch.json-Konfiguration festlegen, deren Wert von Ihrem Betriebssystem abhängt:
    OSX: "sourceMapPathOverrides": { "webpack:///./*": "${webRoot}/*" }
    Windows: "sourceMapPathOverrides": { "webpack:///C:*":"C:/*" } 
    Linux: "sourceMapPathOverrides": { "webpack:///*": "/*" } 
    (Hinweis: Ich habe die Windows- oder Linux-Version nicht getestet.)

Hier ist meine Arbeit launch.json unter 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}/*" }
        }
    ]
}

Um dies zu erreichen, führen Sie ng serve in einem Terminal aus und drücken Sie im Visual Studio-Code die Taste F5.


Hier sind die Versionen, mit denen ich arbeite:

  • 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
12
Aaron F.

Ich bekomme es endlich voll zum Laufen !!!

Für Interessierte:

(mit Chromium-Browser unter Linux, aber einfach durch "Chrome" ersetzen).

Zuerst die launch.json -Konfiguration:

{
    "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 habe mich entschlossen, das Teil mit "request": "launch" zu entfernen, da ich ein neues Browserfenster starten muss.

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

Greifen Sie im neuen Fenster auf http: // localhost: 4200 zu.

Führen Sie dann von VSC aus das Debuggen aus.

Alles sollte gut funktionieren und Sie sollten Haltepunkte verwenden können :)

GIF hier verfügbar, um es in Aktion zu sehen: http://hpics.li/0156b80

12
maxime1992

Ähnlich wie bei Aaron F. ans Ich verwende die folgende Einstellung für die Entwicklung von Angular 2+ in Windows

{
    "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}/*"
            }
        }
    ]
}
2
Zealitude

Ich verwende Angular CLI 1.7.3 und Angular: 5.2.9 unter Mac OSX. Hier ist die Konfiguration, die für mich funktioniert:

 {
 "version": "0.2.0", 
 "Konfigurationen": [
 {
 "type": "chrome", 
 "request": "starten", 
 "name": "Client in Chrome starten", 
 "sourceMaps": true, 
 "URL": "http: // localhost: 4200", 
 "webRoot": "$ {workspaceRoot}", 
 "userDataDir": "$ {workspaceRoot} /. vscode/chrome", 
 "sourceMapPathOverrides": {
 "webpack: /./*": "$ {webRoot}/*", 
 "webpack:/src/*": "$ {webRoot}/src /*",
 "webpack:/*": "*", 
 "webpack: /./ ~/*": "$ {webRoot}/node_modules /*",
 } 
 } 
 ] 
} 
2
Awsed

Ich hatte das gleiche Problem mit Windows-vscode und meinem launch.json ist wie folgt:

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

        {
        "type": "chrome",
        "request": "launch",
        "name": "Launch Chrome against localhost",
        "url": "http://localhost:4200",
        "webRoot": "${workspaceFolder}"
        }
        ]
}

Dann habe ich chrome debug extension from here installiert und dann den Fehler behoben.

Sie können diese Erweiterung direkt installieren von:

vscode-->Extensions-->search and select "Debugger From Chrome"-->click on install 

Möglicherweise müssen Sie vscode neu starten.

1
dd619

Die folgende Konfiguration ist für MacOS mit VSCode v1.23, Angular 6 und Chrome 66 gut geeignet.

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "Launch Chrome",
      "url": "http://localhost:4200",
      "smartStep": true,
      "sourceMaps": true,
      "webRoot": "${workspaceFolder}",
      "sourceMapPathOverrides": {
        "webpack:///./*": "${webRoot}/*",
        "webpack:///src/*": "${webRoot}/src/*",
        "webpack:///*": "*",
        "webpack:///./~/*": "${webRoot}/node_modules/*"
      }
    }
  ]
}
1
Jose Orihuela

Sie müssen nur den Debugger für die Erweiterung Chrome) installieren.

0
Itumeleng Tlali

Ich habe ein seltsames Problem mit launch.json von Aaron F.

".scripts" in der Debugger-Befehlszeile geben URLs wie folgt an:

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)

vS-Code versucht, die Datei "/home/user/my-dream-app/src/app/webpack:/src/app/app.component.ts" zu verwenden (Hinweis: Webpack: in der Mitte). 

Quellkarten funktionieren nicht, weil mein Chrome URL als "Webpack: /" mit EINEM Schrägstrich angibt.

In hat es mit diesem launch.json gearbeitet:

{
    "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 habe richtige Zuordnung erhalten

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 
  • VS-Code: 1.20.1 
  • Winkel-CLI: 1.7.2
  • Knoten: 7.10.1
0
nagos