Ja, Sie k?nnen JavaScript -Code direkt in VS -Code debuggen, w?hrend er in einem Browser ausgeführt wird, indem Sie die richtigen Tools und Konfigurationen einrichten. Stellen Sie zun?chst sicher, dass Sie VS-Code mit Ihrem JavaScript-Projekt Open installiert haben, einem kompatiblen Browser wie Chrome oder Edge, dem Debugger für Chrome-Erweiterung (oder integrierter Edge-Unterstützung) und Ihrem Projekt, das lokal über einen Dev-Server ausgeführt wird. Konfigurieren Sie anschlie?end das Debugging, indem Sie eine Datei für start.json unter .VSCODE erstellen, Ihren Zielbrowser ausw?hlen und Einstellungen wie die URL und Webroot an Ihr Setup anpassen. Starten Sie dann Ihren Dev -Server, starten Sie den Browser aus dem Debug -Panel, setzen Sie Breakpoints im VS -Code, indem Sie auf die Dachrinne klicken, und verwenden Sie die Debug -Symbolleiste, um Code durchzusetzen, Variablen zu überprüfen und Ausdrücke zu überwachen. Darüber hinaus erm?glichen Quellkarten das Debuggen von Originalquelldateien, und Konsolenprotokolle werden in der Debug -Konsole angezeigt. Vermeiden Sie zum reibungslosen Debuggen vorer?ffnete Browser, überprüfen Sie die Pfadeinstellungen, laden Sie den Browser bei Bedarf neu und verwenden Sie Debugger-Anweisungen als Fallbacks.

Das Debugieren von JavaScript -Code direkt von VS Code, w?hrend er in einem Browser ausgeführt wird, ist super praktisch, insbesondere wenn Sie bereits in dieser Umgebung arbeiten. Der Schlüssel besteht darin, die richtigen Tools und Konfigurationen einzurichten, damit Sie Ihren Code durchlaufen, Variablen inspizieren und Probleme schneller fangen k?nnen.

Voraussetzungen: Stellen Sie sicher, dass Sie die Grundlagen haben

Stellen Sie vor dem Tauchen in das Debuggen fest, dass Sie diese Komponenten bereit haben:

• VS -Code installiert (offensichtlich)
• JavaScript -Projekt im vs Code ge?ffnet
• Ein Browser wie Chrome oder Edge (beide funktionieren gut mit VS -Code zum Debuggen)
• Installieren
• Ihr Projekt sollte lokal ausgeführt werden (z. B. über npm start , vite , webpack-dev-server usw.)

Sobald diese vorhanden sind, k?nnen Sie loslegen.

Richten Sie eine Debug -Konfiguration in VS -Code ein

Um aus dem VS -Code zu debuggen, ben?tigen Sie eine .vscode/launch.json -Datei, in der VS Code angegeben ist, wie Sie eine Verbindung zu Ihrem Browser herstellen.

Hier ist, was zu tun ist:

• ?ffnen Sie das Run- und Debug -Panel (linke Seitenleistensymbol, das wie ein Fehler aussieht)
• Klicken Sie auf "Erstellen Sie eine Datei sterp.json" "
• W?hlen Sie die Umgebung, die Sie debuggen (wie Chrome oder Edge),
• Es generiert eine Standardkonfigurationsdatei

M?glicherweise müssen Sie einige Einstellungen optimieren, je nachdem, wie Ihre App ausgeführt wird. Wenn Ihr lokaler Server beispielsweise Port 3000 verwendet, stellen Sie sicher, dass das url -Feld http://localhost:3000 widerspiegelt.

Eine grundlegende Konfiguration für Chrome k?nnte so aussehen:

 {
  "Typ": "Chrome",
  "Anfrage": "Start",
  "Name": "Starten Sie Chrome gegen Localhost",
  "URL": "http: // localhost: 3000",
  "Webroot": "$ {WorkspaceFolder}"
}

Speichern Sie es und Sie sind bereit, mit dem Debuggen zu beginnen.

Fügen Sie Haltepunkte hinzu und treten Sie durch Code durch

Jetzt, wo alles verbunden ist, debuggen Sie hier tats?chlich:

• Starten Sie Ihren Entwicklerserver (wie npm run dev )
• Klicken Sie im VS -Code im Debug -Panel auf die Schaltfl?che Green Play, um den Browser zu starten
• ?ffnen Sie Ihre App im gestarteten Browserfenster
• ?ffnen Sie im VS -Code die JavaScript -Datei, die Sie debuggen m?chten
• Klicken Sie auf die Rinne neben den Zeilennummern, um einen Haltepunkt festzulegen (Sie werden einen roten Punkt sehen).

Wenn der Code diese Zeile trifft, macht Ausführung eine Pause, und Sie k?nnen:

• Schweben Sie über Variablen, um ihre aktuellen Werte zu sehen
• Verwenden Sie die Debug -Symbolleiste, um über Funktionen einzusteigen, in oder aus Funktionen auszutreten
• Sehen Sie sich Ausdrücke an, indem Sie sie in den Beobachtungsbereich hinzufügen
• überprüfen Sie den Anrufstack, um zu sehen, wie die Funktion aufgerufen wurde

Eine Sache zu beachten: Wenn Sie Source Maps verwenden (welche die meisten modernen Frameworks tun), k?nnen Sie mit dem Code die ursprünglichen Quelldateien anstelle der minifizierten oder transpilierten Versionen debuggen.

Vergessen Sie auch nicht die Konsole - alles, was über console.log() angemeldet ist.

Tipps zum reibungslosen Debuggen

Manchmal klicken Dinge nicht nur sofort. Hier sind ein paar h?ufige Gotchas und Tipps:

• Stellen Sie sicher, dass Ihr Browser noch nicht ge?ffnet ist, bevor Sie von VS Code gestartet werden. Andernfalls ist es m?glicherweise nicht richtig beigefügt.
• Wenn Ihre Haltepunkte nicht treffen, überprüfen Sie den webRoot Pfad in Ihrer Startkonfiguration.
• Versuchen Sie, den Browser neu zu laden, nachdem Sie den Debugger gestartet haben, wenn die Verbindung ausgeschaltet erscheint.
• Verwenden Sie debugger -Anweisungen in Ihrem Code als Fallbacks - sie pausieren die Ausführung, wenn der Debugger beigefügt ist.

Für Projekte, die mit Tools wie React, Vue oder SVELTEKIT erstellt wurden, müssen Sie m?glicherweise Pfade anpassen oder bestimmte Erweiterungen aktivieren. Im Allgemeinen funktioniert das Setup jedoch nicht in der Box, sobald Sie von einem Entwicklerserver dienen.

Das ist im Grunde genommen es - wenn das Debuggen nach dem Konfigurieren zur zweiten Natur wird. Es ist nicht kompliziert, erfordert w?hrend des Setups jedoch Liebe zum Detail.

Das obige ist der detaillierte Inhalt vonWie debugge ich JavaScript -Code in einem Browser mit VS -Code?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!