Debuggen von Angular-CLI-Anwendungen in Visual Studio-Code

Blog

Debuggen von Angular-CLI-Anwendungen in Visual Studio-Code

Debuggen von Angular-CLI-Anwendungen in Visual Studio-Code

In diesem Beitrag erstellen wir eine Angular-CLI-Anwendung und fügen dann eine Konfiguration hinzu, um sie in Visual Studio Code zu debuggen.

Erstellen Sie für eine Angular-CLI-Anwendung eine Debugkonfiguration in VS Code, installieren Sie die Debugger für Chrome-Erweiterung und führen Sie sie dann im Debugmodus aus.

  • Debuggen von Angular-CLI-Anwendungen in Visual Studio-Code
  • Erstellen eines Starter-Projekts
  • Debug-Konfiguration erstellen
  • Lass uns debuggen

VS-Code lernen

Wenn Sie mehr über VS Code erfahren möchten, möchten Sie auf jeden Fall den kommenden Learn VS Code-Kurs besuchen.> Wenn Sie mehr über VS Code erfahren möchten, möchten Sie auf jeden Fall den kommenden Learn VS Code-Kurs besuchen .# Erstellen eines Starter-Projekts

Wie kaufe ich Digibyte?

Um eine Angular-CLI-Anwendung testen zu können, benötigen Sie eine Angular-CLI-Anwendung :) Ich werde die grundlegenden Schritte bereitstellen, aber für weitere Informationen zu den ersten Schritten besuchen Sie die Angular CLI-Seite .

Zuerst müssen Sie die Angular-CLI installieren.

npm install -g @angular/cli

Danach müssen Sie Ihre neue Anwendung tatsächlich generieren. Dies dauert ein wenig, da viele NPM-Pakete installiert werden müssen.

ng new my-app

Öffnen Sie das Projekt in VS Code und Sie sollten Folgendes sehen.

Jetzt, da Sie Ihre neue schicke Angular-App haben, führen Sie sie aus, um sicherzustellen, dass alles richtig aussieht.

ng serve

Sollte so aussehen.

numpy Index des Wertes im Array abrufen

Debug-Konfiguration erstellen

Vorausgesetzt, Sie haben es bis hierher geschafft, sind wir bereit, mit dem Debuggen zu beginnen! Bevor wir dies tun, lohnt es sich jedoch zu verstehen, wie das Konfigurieren des Debuggens in VS Code funktioniert. Grundsätzlich werden Debug-Konfigurationen in a . gespeichert Start . json Datei, die in einer . vscode Mappe. Dies . vscode Ordner wird verwendet, um verschiedene Konfigurationen für Code zu speichern, einschließlich unserer erforderlichen Debugging-Sachen.

Bevor Sie Ihre Debug-Konfiguration erstellen, müssen Sie die Debugger für Chrome Verlängerung. Suchen und installieren Sie diese Erweiterung über die Registerkarte Erweiterung in VS Code. Laden Sie VS Code nach der Installation neu.

Um nun eine Debug-Konfiguration zu erstellen, können Sie das Debug-Panel öffnen (die Schaltfläche für die Fehlersuche im linken Panel). Oben im Debug-Fenster sollten Sie eine Dropdown-Liste mit der Aufschrift Keine Konfigurationen sehen.

installiere mysql mit homebrew

Rechts neben dieser Dropdown-Liste befindet sich ein Zahnradsymbol. Klicken Sie auf diese Schaltfläche, damit VS Code automatisch das |_+_| . generiert Ordner und |_+_| oben genannte Datei.

Wählen Sie dann Chrome.

Sie sollten die folgende Konfiguration für Sie erstellt bekommen.

Das einzige, was wir tun müssen, ist den Port von 8080 auf 4200 zu aktualisieren.

Lass uns debuggen

Jetzt sind wir bereit! Fahren Sie fort und klicken Sie oben im Debug-Bedienfeld auf die Wiedergabeschaltfläche, um eine Instanz von Chrome im Debug-Modus zu starten. Denken Sie daran, dass Ihre App bereits ausgeführt werden sollte, wenn Sie sie verwenden von dienen früher. In VS Code sollten Sie die Debug-Symbolleiste sehen.

update() python

Damit können Sie einen Haltepunkt in Ihrer App.component.ts festlegen. Öffnen Sie Ihre App.component.ts und fügen Sie einen Breakpoint innerhalb der Komponente hinzu, indem Sie in den Bundsteg (links neben den Zeilennummern) klicken. Sollte so aussehen.

Aktualisieren Sie nun das Debugging, indem Sie auf die Schaltfläche Aktualisieren in der Debugging-Symbolleiste klicken. Dies sollte Ihre Anwendung wieder öffnen und diesen Breakpoint auslösen. Sie sollten direkt zu VS Code an die Stelle zurückgeleitet werden, an der Sie Ihren Haltepunkt festgelegt haben.

Von hier aus können Sie weitere Breakpoints setzen, Variablen überprüfen usw. Wenn Sie mehr über das Debuggen von JavaScript im Allgemeinen in Chrome oder VS Code erfahren möchten, können Sie sich Debuggen von JavaScript in Chrome und Visual Studio Code ansehen.

#eckiges #visuelles-studio