Читать книгу Angular - Manfred Steyer - Страница 71

Etwas komfortabler lässt sich der in Chrome integrierte Debugger über Visual Studio Code bedienen. Damit das möglich ist, müssen Sie das Visual-Studio-Code-Plug-in Debugger for Chrome installiert haben.

Zum Starten des Debuggers via Visual Studio Code benötigen Sie die Datei .vscode/launch.json. Falls sie noch nicht existiert, können Sie sie mit den folgenden Schritten einrichten:

1 Öffnen Sie eine beliebige .ts-Datei.

2 Wählen Sie in Visual Studio Code den Befehl Run/Start Debugging oder drücken Sie F5.

3 Falls Visual Studio Code Sie nach einer Umgebung (Environment) für das Debugging fragt, wählen Sie Chrome aus.

4 Visual Studio Code generiert nun eine Datei launch.json und zeigt diese an.

5 Korrigieren Sie in der Datei launch.json die angezeigte URL auf http://localhost:4200. Sie sollte in etwa wie die unter Beispiel 3-14 aussehen.

Beispiel 3-14: launch.json zum Starten von Chrome via Visual Studio Code

{

"version": "0.2.0",

"configurations": [

{

"type": "chrome",

"request": "launch",

"name": "Launch Chrome against localhost",

"url": "http://localhost:4200",

"webRoot": "${workspaceFolder}"

}

]

}

Wenn alle Stricke reißen, können Sie diese Datei auch manuell anlegen.

Um den Debugger nun via Visual Studio Code zu nutzen, sind die folgenden Schritte notwendig:

1 Starten Sie Ihre Anwendung wie gewohnt mit ng serve.

2 Erzeugen Sie direkt in Visual Studio Code durch einen Klick links neben eine Zeilennummer einen Break Point (siehe Abbildung 3-6).

3 Wählen Sie den Befehl Run/Start Debugging oder drücken Sie F5.

4 Nun öffnet sich Chrome.

5 Sobald der Programmfluss auf den Break Point stößt, hält der Debugger die Anwendung an.

6 Sie können den Debugger jetzt direkt aus Visual Studio Code heraus steuern, die Ausführung Schritt für Schritt fortsetzen und die Werte von Variablen bzw. Eigenschaften einsehen (siehe Abbildung 3-7).

Abbildung 3-6: Break Point in Visual Studio Code (Zeile 62)

Abbildung 3-7: Debuggen mit Visual Studio Code