Debuggen von Angular 2 mit Visual Studio Code

Bei der Entwicklung von Software spielt das Debuggen eine entscheidende Rolle.  Obwohl Visual Studio Code prinzipiell einen Debugger zur Verfügung stellt, ist die Anpassung der IDE für das Debugging nicht trivial.  Das Problem liegt in der Verknüpfung der Laufzeitumgebung innerhalb des Browsers Chrome und Visual Studio Code.

Erweiterung für Visual Studio Code herunterladen

Bearbeiten der Debug Konfiguration von VS Code

Nun muss noch die Konfigurationsdatei von VS Code bearbeitet werden, damit diese beim Starten des Debuggers weiß, dass mit Chrome gearbeitet werden soll. Nachdem ihr euer Projekt nun mit VS Code öffnet und im Bereich Debug (Symbol mit der durchgestrichenen Wanze) auf Einstellungen (Symbol Zahnrad) drückt, wählt ihr als Umgebung "Chrome". 

Ihr seht jetzt die Datei launch.json. Der erforderliche Eintrag ist im nächsten Listing zu sehen - alle übrigen Einträge können entfallen. Wichtig ist insbesondere die Einstellung des Ports in dem Attribut url. Dieser muss mit dem Port übereinstimmen, der auch von ng serve verwendet wird. Standardmäßig wird von ng serve der Port 4200 geöffnet. Ihr könnt eure Angular Anwendung aber auch mit dem Befehl ng serve --port 80 starten, damit der Port 80 verwendet wird. In dem Fall bitte daran denken auch die Konfiguration anzupassen.

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Launch",
            "type": "chrome",
            "request": "launch",
            "url": "http://localhost:4200",
            "sourceMaps": true,
            "webRoot": "${workspaceRoot}"
        }
    ]
} 

TIPP: Falls ihr die Erweiterung bereits heruntergeladen habt überprüft ob sie aktualisiert werden kann! Für die älteren Version von "Debugger For Chrome" musste neben den obigen Einstellung noch "sourceMapPathOverrides" wie folgt gesetzt werden:

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Launch",
            "type": "chrome",
            "request": "launch",
            "url": "http://localhost:4200",
            "sourceMaps": true,
            "webRoot": "${workspaceRoot}",
            "sourceMapPathOverrides": {
                "webpack:///<Pfad zum Projekt-Root>/*": "${workspaceRoot}/*"
            }
        }
    ]
} 

Starten der Anwendung und Debuggen

Bevor ihr nun Anfangen könnt zu Debuggen muss die Anwendung mit dem Befehl ng serve gestartet werden.  

Über den Start-Knopf in VS-Code kann nun der Debugger gestartet werden.

Wenn die Fehlermeldung "Cannot connect to runtime process, temout after 10000 ms - (reason Cannot conne...)" angezeigt wird, so wurde Chrome nicht vom VS-Code-Debugger gestartet.

Also beachten, dass zuerst alle Chrome-Instanzen beim Starten des Debuggers geschlossen werden. Ansonsten kann VS Code kein Mapping zwischen dem Browser und dem Debugger herstellten!

Nun ist VS Code bereit eure Breakpoints anzunehmen und Variablen zur Laufzeit zu überprüfen.