Debuggen mit Visual Studio Code funktioniert nicht

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

Ä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}/*"
            }
        }
    ]
}

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 /*",
 } 
 } 
 ] 
} 

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.

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

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

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