Effizientes Debugging von Angular-Anwendungen in VS Code

Heute zeige ich dir, wie du in VS Code effizient das Debugging für deine Angular-Anwendung einrichtest.

Viele Entwickler nutzen immer noch console.log() zum Debuggen – selbst in VS Code. Doch warum solltest du darauf zurückgreifen, wenn VS Code leistungsstarke Debugging-Funktionen bietet?

Dieser Leitfaden richtet sich an Angular-Entwickler, die immer noch mit console.log() arbeiten. Ich zeige dir, wie du das Debugging in VS Code richtig konfigurierst.

Erstellen eines Angular-Projekts

Zunächst erstellen wir ein Demoprojekt mit dem Angular CLI:

ng new debugging

Sobald das Projekt initialisiert ist, öffnest du es in VS Code.

Starte das Projekt mit folgendem Befehl:

npm run start

Nun ist das Projekt einsatzbereit. Öffne einen Browser und rufe http://localhost:4200 auf – hier siehst du die Standard-Angular-Anwendung.

Als Nächstes fügen wir einen Haltepunkt in der Datei app.component.ts ein.

Aber wenn wir den Browser aktualisieren, wird der Haltepunkt in VS Code nicht wirklich ausgelöst.

Warum?

Hinzufügen der Debug-Konfiguration in VS Code für Angular

Wir müssen die Debugging-Funktion von VS Code verwenden, um eine Debug-Konfiguration für unser Angular-Projekt hinzuzufügen.

Wir klicken auf die Registerkarte Debug in VS Code. Diese befindet sich normalerweise auf der linken oder rechten Seite von VS Code mit einem Fehlersymbol.

Und dann wählen wir das Dropdown-Menü für die Debug-Konfiguration und wählen „Konfiguration hinzufügen“.

Dies zeigt uns eine Dropdown-Liste mit allen möglichen Optionen in der launch.json-Datei.

Wir wählen die Konfiguration „Chrome starten“ und ändern die URL in http://localhost:4200.

Unsere Konfiguration sollte am Ende so aussehen.

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

Jetzt können Sie in der Konfigurationsliste „Chrome starten“ auswählen, indem Sie auf die Schaltfläche „Abspielen“ klicken.

Dadurch wird eine neue Instanz von Chrome erstellt, Ihre Angular-App geladen und nach allen Unterbrechungspunkten gesucht.

Fazit

Mit dieser Methode sparst du dir das mühsame console.log()-Debugging und kannst stattdessen direkt mit Haltepunkten in VS Code arbeiten.

Probiere es aus – es wird deine Debugging-Geschwindigkeit erheblich verbessern!