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

​Zu allererst muss hierfür die Erweiterung "Debugger for Chrome" über Visual Studio Code heruntergeladen und installiert werden. Hierfür ist es notwendig, unter VS Code an der linken Seite auf Erweiterungen (das unterste Symbol) zu klicken.  Visual Studio Code sucht dann im Internet nach den verfügbaren Erweiterungen. Dort ist Debugger for Chrome zu finden.

Nach der Installation kann VS Code mit Chrome kommunizieren und über diesen Debuggen.

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.

0
Angular 2 - Arbeiten mit Visual Studio Code
Die Antwort auf alle Fragen - Hybride Apps mit HTM...

Related Posts

Kommentare

 
Keine Kommentare vorhanden
Bereits registriert? Login
Gäste
Montag, 25. September 2017
Wenn Sie sich automatisch registrieren möchten, füllen Sie bitte die Felder Benutzername, Name und E-Mail.
Füllen Sie bitte die Felder Name und E-Mail, wenn Sie sich nicht registrieren möchten.

Sicherheitscode (Captcha)

Unsere Autoren

Technologie Blogs

Tutorials

4 members

Webentwicklung

3 members

Java

3 members

Archiv | Blog-Beiträge

Login