Integration in Visual Studio Code–Debuggen

Um DevTools in Visual Studio Code im Debugmodus mithilfe der DevTools-Benutzeroberfläche zu öffnen, klicken Sie mit der rechten Maustaste auf eine .html Datei, oder klicken Sie auf die Schaltfläche Projekt starten , wie unter Öffnen von DevTools und dem DevTools-Browser beschrieben. Sie können auch die Visual Studio Code-Benutzeroberfläche zum Starten des Debuggers verwenden, z. B. F5, um auch die Registerkarten DevTools zu öffnen, wenn Sie eine DevTools-kompatible launch.json Datei definieren, indem Sie auf der Seitenleiste der Microsoft Edge-Tools auf die Schaltfläche launch.json generieren klicken.

Wenn Sie DevTools in Visual Studio Code im Debugmodus öffnen, werden die folgenden Ui-Komponenten geöffnet:

• Die Registerkarte Edge DevTools .
• Die Registerkarte Edge DevTools: Browser .
• Die Symbolleiste Debuggen.
• Die Seitenleiste "Ausführen (Debugger)", einschließlich des Bereichs "Überwachen ".
• Die Debugkonsole am unteren Rand des Fensters.

Weitere Informationen finden Sie unter Schritt 5: Schrittweises Durchlaufen von JavaScript-Code im Debugger unter Erste Schritte durch Klicken mit der rechten Maustaste auf eine HTML-Datei.

Möglichkeiten zum Starten des Debuggers zusammen mit den DevTools-Registerkarten

Die meisten dieser Ansätze erfordern eine von DevTools generierte launch.json Datei, die Ihre URL enthält.

Features der DevTools-Benutzeroberfläche zum Öffnen von DevTools im Debugmodus

• Klicken Sie mit der rechten Maustaste auf eine .html Datei in Explorer>Mit Edge öffnen. Bei diesem Ansatz wird im Wesentlichen ein Dateipfad anstelle einer URL verwendet, und Sie müssen keine Datei generieren launch.json .

• Aktivitätsleiste>Microsoft Edge-Tools> klicken Sie auf die Schaltfläche Projekt starten .

Visual Studio Code-Benutzeroberflächenfeatures zum Öffnen von DevTools im Debugmodus

• Drücken Sie F5.

• Klicken Sie auf der Aktivitätsleiste auf das Symbol Ausführen und Debuggen (), und klicken Sie dann in der Seitenleiste Ausführen und Debuggen auf die Schaltfläche Ausführen und Debuggen .

• Öffnen Sie die Visual Studio Code-Befehlspalette, beginnen Sie mit der Eingabe des Worts debug nach >, und wählen Sie dann Debuggen: Link öffnen aus. Weitere Informationen finden Sie unter Open Link-Befehl im Browserdebuggen in VS Code.

Öffnen des Browsers als Teil einer Debugsitzung

Sie können die Registerkarte Edge DevTools: Browser (der eingebettete DevTools-Browser) als Teil einer Debugsitzung öffnen. Die DevTools-Erweiterung öffnet einen neuen Browser als eingebetteten Browser in Visual Studio Code. Diese Registerkarte Devtools: Browser kann innerhalb des Editors an eine beliebige Stelle verschoben werden. Sie können diese Registerkarte parallel zum Quellcode verwenden oder die Bereiche aufteilen und die Browservorschau unter Ihrem Code anzeigen:

Sie können die DevTools-Erweiterung wie folgt mit der üblichen Visual Studio Code-Debugbenutzeroberfläche/-workflow verwenden. Bei diesem Ansatz verwenden wir nicht die DevTools-Benutzeroberfläche, um in den Debugmodus zu wechseln. Wir klicken nicht mit der rechten Maustaste auf eine .html Datei, um Mit Edge öffnen auszuwählen, und wir klicken nicht auf die Schaltfläche Aktivitätsleiste>Microsoft Edge Tools>Projekt starten .

JavaScript-Debuggen ist in Visual Studio Code integriert. Sie können in Chrome, Microsoft Edge oder Node.js debuggen, ohne Erweiterungen zu installieren. Wenn Sie das Debuggen mithilfe der Microsoft Edge-Option mit den Debugfeatures und der Benutzeroberfläche von Visual Studio Code ausführen, können Sie Microsoft Edge DevTools über den JavaScript-Debugger starten. Wenn die DevTools-Erweiterung nicht installiert ist, werden Sie aufgefordert, sie optional zu installieren.

Die DevTools-Erweiterung bietet zusätzliche Funktionen, z. B. den eingebetteten DevTools-Browser, der über eine Symbolleiste für die Geräteemulation verfügt, und bietet zusätzliche Möglichkeiten, in Visual Studio Code in den Debugmodus zu wechseln.

Siehe auch:

• Einschränkungen des eingebetteten DevTools-Browsers in Verwenden eines externen Browserfensters.

Starten des Debuggers

So starten Sie den Visual Studio Code-Debugger zusammen mit DevTools mithilfe der üblichen Benutzeroberfläche von Visual Studio Code:

1. Öffnen Sie ein neues Visual Studio Code-Fenster. Kein Ordner (Arbeitsbereich) ist geöffnet, und die Registerkarten DevTools sind nicht geöffnet.

2. Öffnen Sie einen Ordner (Arbeitsbereich). Wählen Sie z. B. Datei>zuletzt geöffnet aus>C:\Users\username\Documents\GitHub\Demos\demo-to-do. Die Registerkarten DevTools sind nicht geöffnet.

3. Öffnen Sie eine .html Datei.

4. Klicken Sie im Editor auf die .html Datei, und führen Sie dann eine der folgenden Ui-Aktionen aus, die den Visual Studio Code-Debugger wie gewohnt starten:

   • Drücken Sie F5.

   • Klicken Sie auf der Aktivitätsleiste auf das Symbol Ausführen und Debuggen ("), und klicken Sie dann auf der Seitenleiste Ausführen und Debuggen auf die Schaltfläche Ausführen und Debuggen , wie unten gezeigt.

   • Öffnen Sie die Visual Studio Code-Befehlspalette, beginnen Sie mit der Eingabe des Worts debug, und wählen Sie dann Debuggen: Link öffnen aus.

   

   Microsoft Edge Tools wird im obigen Screenshot nicht angezeigt, da für diesen Screenshot DevTools deinstalliert wurde.

5. Wählen Sie Web-App (Edge) aus.

6. Klicken Sie auf der Symbolleiste Debuggen auf die Schaltfläche Überprüfen , die eine QuickInfo von Open browser DevTools enthält:

   

   Wenn Sie zum ersten Mal auf die Schaltfläche Überprüfen auf der Symbolleiste Debuggen klicken, wird die Seitenleiste Erweiterungen: Marketplace geöffnet, die Microsoft Edge-Tools für VS Code enthält:

   

7. Klicken Sie auf Microsoft Edge-Tools für VS Code>Installieren.

8. Schließen Sie DevTools per schließende DevTools.

9. Öffnen Sie einen Ordner und eine .html Datei.

Fahren Sie weiter unten fort.

Generieren eines DevTools-orientierten launch.json

Angenommen, der geöffnete Ordner enthält .vscode keinen Ordner, der bereits eine launch.json Datei enthält:

1. Wählen Sie Aktivitätsleiste>Microsoft Edge Tools> klicken Sie auf die Schaltfläche Launch.json generieren , und drücken Sie dann F5. Weitere Informationen finden Sie unter Öffnen von DevTools und dem DevTools-Browser.

   Wenn Sie nach der Installation der DevTools-Erweiterung eine .html Datei öffnen und dann auf der Symbolleiste Debuggen auf die Schaltfläche Untersuchen klicken, werden die Registerkarten Edge DevTools in Visual Studio Code geöffnet:

   

   Im obigen Screenshot befinden sich eine launch.json Datei in Explorer im .vscode Ordner und eine Zeichenfolge aus dieser Datei, Edge headless starten und DevTools anfügen, am unteren Rand des Fensters, da DevTools von einer Visual Studio Code-Funktion wie F5 geöffnet wurde, die die von DevTools generierte launch.json Datei verwendet hat.

2. Klicken Sie bei Bedarf oben links auf der Registerkarte Edge DevTools auf die Schaltfläche Screencast umschalten:

   

   Die Registerkarte Edge DevTools: Browser wird geöffnet.

   Im obigen Screenshot ist keine launch.json Datei in Explorer im .vscode Ordner und keine Zeichenfolge wie Launch Edge Headless und Attach DevTools am unteren Rand des Fensters vorhanden, da DevTools durch Klicken mit der rechten Maustaste auf die .html Datei in Explorer geöffnet wurde.

Weitere Schritte und Screenshots der Benutzeroberfläche finden Sie unter Wo die Namenszeichenfolgen auf der Benutzeroberfläche angezeigt werden. In den meisten Fällen müssen Sie nur über den Inhalt der von DevTools generierten launch.json Datei wissen, dass Sie ihre gewünschte URL an mehreren Stellen in die "url" Zeichenfolge eingeben müssen.

Automatisches Öffnen des Browsers und von DevTools beim Debuggen in Visual Studio Code

Zum Debuggen Ihres Projekts können Sie die Standardseite ändern, die in Microsoft Edge in Visual Studio Code geöffnet wird. So ändern Sie die Standardseite zur Website Ihres Projekts:

1. Wählen Sie in Visual Studio Code Datei>Neues Fenster aus. Beachten Sie, dass kein Ordner geöffnet ist.

2. Wählen Sie auf der AktivitätsleisteMicrosoft Edge-Tools aus.

3. Klicken Sie im Bereich Microsoft Edge-Tools: Ziele auf den Link Ordner öffnen .

4. Wählen Sie Ihren Projektordner mit der neuen Standardseite aus, die angezeigt wird, wenn Sie mit dem Debuggen in Visual Studio Code beginnen.

   Wenn Sie einen Ordner zum ersten Mal öffnen, müssen Sie bestätigen, dass Sie den Autoren von Dateien in diesem Ordner vertrauen:

   

5. Aktivieren Sie optional das Kontrollkästchen Den Autoren aller Dateien im übergeordneten Ordner vertrauen, und klicken Sie dann auf die Schaltfläche Ja, ich vertraue den Autoren :

   Wenn Sie diesen Vorgang zum ersten Mal ausführen, müssen Sie auch wieder Aktivitätsleiste>Microsoft Edge-Tools auswählen.

   Im Bereich Microsoft Edge-Tools: Ziele werden jetzt zwei Schaltflächen angezeigt: Instanz starten und launch.json generieren:

   

Generieren eines DevTools-orientierten launch.json

1. Wählen Sie launch.json generieren aus, um eine launch.json in Ihrem Projekt zu erstellen. Dies muss eine längere Datei sein, die von DevTools erstellt wird, wie unter Die launch.json-Datei für die DevTools-Erweiterung gezeigt, und nicht eine kurze, generischere Datei, die von Visual Studio Code erstellt wurde. Weitere Informationen finden Sie unter Löschen oder erneutes Erstellen von launch.json unter Problembehandlung für die DevTools-Erweiterung.

2. launch.jsonFügen Sie in die URL Ihres Projekts hinzu. Wenn Sie die URL leer lassen, wird die Standardseite angezeigt.

3. Speichern Sie launch.json.

Wenn Sie Sich entscheiden, Ihr Projekt in Visual Studio Code zu debuggen, wird automatisch der Browser gestartet und die Entwicklertools geöffnet, unabhängig davon, ob Sie DevTools-UI-Features oder die üblichen Visual Studio Code-Ui-Features verwenden. Dabei wird die URL angezeigt, die Sie in Ihrer launch.json Datei angegeben haben.

Wenn die Seite "Erfolg" angezeigt wird, sie aber stattdessen eine eigene Webseite wünschen

Welche Webseite in DevTools geöffnet wird, wird von launch.json festgelegt, wenn diese Datei in Ihrem Arbeitsbereich (Ihrem geöffneten Ordner) vorhanden ist. Daher können Sie F5 drücken, während Ihre eigene .html Datei geöffnet ist, und dennoch wird die Standardseite Erfolg auf den Registerkarten DevTools angezeigt. In diesem Fall sind folgende Optionen verfügbar:

• Bearbeiten Sie launch.json in Ihrem geöffneten Ordner, um auf eine URL (normalerweise) oder möglicherweise auf einen Dateipfad zu verweisen. Anschließend können Sie den Workflow/die Benutzeroberfläche des Visual Studio Code-Debuggers verwenden, z. B. F5.

• Oder löschen Sie launch.json, dann Aktivitätsleiste>Explorer> klicken Sie mit der rechten Maustaste auf Ihre .html Datei>, und wählen Sie Mit Edge öffnen aus. Bei diesem Ansatz wird nicht der Workflow/die Benutzeroberfläche des Visual Studio Code-Debuggers verwendet, z. B. F5.

Siehe auch

• Die launch.json-Datei für die DevTools-Erweiterung
• Debuggen von Microsoft Edge in Visual Studio Code
• Microsoft Edge DevTools-Erweiterung für Visual Studio Code
• Der Visual Studio Code-Debugger ist jetzt in die DevTools-Erweiterung in Neuerungen in DevTools (Microsoft Edge 93) integriert.

Externe Seiten:

• Starten Sie Konfigurationen im Artikel Debuggen für Visual Studio Code.
• Browserdebuggen in VS Code