Die launch.json-Datei für die DevTools-Erweiterung

Artikel
03/29/2023

Visual Studio Code verwendet eine launch.json Datei, um Debugkonfigurationen zu definieren. Um die DevTools-Erweiterung zu verwenden, ist eine launch.json Datei nur erforderlich, wenn Sie den Debugger verwenden möchten und Ihre Webseite auf einem Webserver und nicht nur auf einem lokalen Dateisystem ausgeführt werden muss. In den meisten Fällen müssen Sie nur über den Inhalt der von DevTools generierten launch.json Datei wissen (wenn Sie sie verwenden möchten), dass Sie ihre gewünschte URL an mehreren Stellen in die "url" Zeichenfolge eingeben müssen. Lesen Sie diesen Artikel, wenn Sie benutzerdefinierte, erweiterte Debugkonfigurationen verwenden möchten.

Wenn Sie die Benutzeroberfläche von Visual Studio Code wie F5 verwenden möchten, um die DevTools-Registerkarten zusammen mit dem Debugmodus zu starten, muss Der geöffnete Ordner (Arbeitsbereich) eine von DevTools generierte (DevTools-kompatible) launch.json Datei im .vscode Verzeichnis enthalten.

Details zum launch.json Dateiformat finden Sie unten. Normalerweise müssen Sie nichts in der Datei ändern, außer mehrere Instanzen der URL-Zeichenfolge zu ersetzen, wie unter Öffnen von DevTools durch Klicken auf die Schaltfläche Projekt starten unter Öffnen von DevTools und dem DevTools-Browser erläutert.

Wo die Namenszeichenfolgen auf der Benutzeroberfläche angezeigt werden

Die "name" Zeichenfolge jeder Debugkonfiguration füllt Dropdownlisten an mehreren Stellen auf.

Wählen Sie Datei>Ordner schließen aus.
Wählen Sie Datei>zuletzt geöffnet>C:\Users\username\Documents\GitHub\Demos\demo-to-do\index.html aus, geklont gemäß Schritt 5: Klonen des Demos-Repositorys unter Installieren der DevTools-Erweiterung für Visual Studio Code.

Angenommen, es ist keine launch.json Datei im .vscode Verzeichnis vorhanden.
Wählen Sie Aktivitätsleiste>Microsoft Edge Tools> klicken Sie auf die Schaltfläche launch.json generieren .
Doppelklicken Sie index.html in der Aktivitätsleiste>Explorer, um sie zu öffnen.
Wählen Sie Aktivitätsleiste>Ausführen und Debuggen> aus, klicken Sie auf die Schaltfläche Ausführen und Debuggen .

In der Seitenleiste "Ausführen und Debuggen " oben links sind die Zeichenfolgen "Edge headless starten" und "DevTools anfügen ", "Edge starten" und "DevTools anfügen". Am unteren Rand des Visual Studio Code-Fensters lautet die Zeichenfolge Launch Edge Headless and attach DevTools (DevTools anfügen). Dies sind Namen von Verbundkonfigurationen in der .json Datei, die den Visual Studio Code-Debugger anweisen, die beiden DevTools-Registerkarten oder die Registerkarte DevTools und einen externen Browser zu öffnen:
```
 "compounds": [
     {
         "name": "Launch Edge Headless and attach DevTools",
         "configurations": [
             "Launch Microsoft Edge in headless mode",
             "Open Edge DevTools"
         ]
     },
     {
         "name": "Launch Edge and attach DevTools",
         "configurations": [
             "Launch Microsoft Edge",
             "Open Edge DevTools"
         ]
     }
 ]
```
In der Debugkonsole unten rechts lautet die Zeichenfolge Microsoft Edge im headless-Modus starten. Dies ist eine Zeichenfolge, die nicht über die Registerkarte Edge DevTools , sondern über die Registerkarte Edge DevTools: Browser handelt. Dies ist der Name einer einzelnen Konfiguration, nicht einer Verbundkonfiguration:
```
    "configurations": [
     ...
     {
         "type": "pwa-msedge",
         "name": "Launch Microsoft Edge in headless mode",
         "request": "launch",
         "runtimeArgs": [
             "--headless",
             "--remote-debugging-port=9222"
         ],
         "url": "file://c:\\Users\\collabera\\Documents\\GitHub\\Demos\\demo-to-do\\index.html",
         "presentation": {
             "hidden": true
         }
     },
```
Klicken Sie in der Seitenleiste Ausführen und Debuggen auf Debuggen starten. Die beiden DevTools-Registerkarten werden geöffnet, und Visual Studio Code wechselt in den Debugmodus. Dieser Ansatz ist die integrierte Visual Studio Code-Benutzeroberfläche zum Starten des Debuggers und nicht die DevTools-Benutzeroberfläche, die unter Öffnen von DevTools und dem DevTools-Browser beschrieben wird.

Speicherort der launch.json-Datei

Im Explorer Bereich von Visual Studio Code wird die launch.json Datei in einem .vscode Ordner im Stammverzeichnis des Ordners abgelegt, den Sie geöffnet haben.
- Wenn Sie für ein Repository, z. B. das Demos-Repository, den gesamten Repositoryordner öffnen, erstellt die Schaltfläche Launch.json generieren eine \.vscode\launch.json Datei in der Nähe des Stammverzeichnisses für das gesamte Repositoryverzeichnis.
- Wenn Sie einen bestimmten, kleineren Ordner wie öffnen, legt \Demos\demo-to-do\die Schaltfläche Launch.json generieren eine launch.json Datei nur in diesem Ordner ab.

Visual Studio Code verwendet eine launch.json Datei zum Konfigurieren und Anpassen des Debuggers. launch.json ist eine Debuggerkonfigurationsdatei. Diese Datei steuert auch, welcher Webbrowser in Verbindung mit dem Debugger verwendet werden soll. Wenn Sie ihre Webseite beispielsweise testen, indem Sie auf eine Schaltfläche auf der Webseite klicken, um die Ausführung Ihres JavaScript-Codes zu veranlassen, lauscht der Visual Studio Code-Debugger auf den Browser und durchläuft den JavaScript-Code der Webseite.

Im Folgenden finden Sie eine Kopie von , launch.json nachdem Sie in der Erweiterung auf die Schaltfläche Launch.json erstellen geklickt haben.

Es gibt drei Konfigurationen und zwei Verbindungen , die anfänglich standardmäßig definiert sind:

configurations – In der Visual Studio Code-Benutzeroberfläche werden diese Konfigurationsnamen in der Debuggerbenutzeroberfläche angezeigt:
- Microsoft Edge starten : Dies ist eine Konfiguration vom Typ "launch".
- Starten Sie Microsoft Edge im headless-Modus – dies ist eine Konfiguration vom Typ "launch".
- Open Edge DevTools : Dies ist eine Konfiguration vom Typ "debug" (oder "attach"-type).
compounds – In der Visual Studio Code-Benutzeroberfläche werden diese auf der Symbolleiste Debuggen angezeigt:
- Starten Sie Edge Headless, und fügen Sie DevTools an.
- Starten von Edge und Anfügen von DevTools

IntelliSense und AutoVervollständigen

Zeigen Sie auf einen JSON-Namen oder -Wert, um eine QuickInfo anzuzeigen:

IntelliSense-QuickInfo beim Zeigen auf einen JSON-Namen oder -Wert

Beginnen Sie mit der Eingabe von doppelten Anführungszeichen, um die AutoVervollständigen-Liste der verfügbaren JSON-Eigenschaften und Beschreibungen anzuzeigen:

AutoVervollständigen für launch.json

Stellen Sie beim Speichern der Datei sicher, dass Sie wohlgeformten JSON-Code einschließlich Kommas bereitstellen.

Konfigurationstypen: Start im Vergleich zum Debuggen

Diese beiden unterschiedlichen Arten von Konfigurationen sind beide in dieser .json Datei für den Visual Studio Code-Debugger definiert.

Konfigurationen

Die folgenden Abschnitte der launch.json Datei stammen aus v2.1.1 der Erweiterung und befinden sich an einem Standardinstallationsspeicherort für Visual Studio Code unter Windows.

Konfiguration 1: Starten von Microsoft Edge

Dies ist eine Konfiguration vom Typ "Browser starten". Diese Konfiguration steuert die Browserkomponente, z. B. welche .html Datei angezeigt werden soll, wenn in der Benutzeroberfläche nicht headless ausgewählt ist.

Dieser Konfigurationsname wird nicht direkt auf der Benutzeroberfläche angezeigt. Diese Konfiguration wird unten von einer Verbundkonfiguration verwendet.

        {
            "type": "pwa-msedge",
            "name": "Launch Microsoft Edge",
            "request": "launch",
            "runtimeArgs": [
                "--remote-debugging-port=9222"
            ],
            "url": "c:\\Users\\username\\.vscode\\extensions\\ms-edgedevtools.vscode-edge-devtools-2.1.1\\out\\startpage\\index.html", // Provide your project's url to finish configuring
            "presentation": {
                "hidden": true
            }
        },

Konfiguration 2: Starten von Microsoft Edge im headless-Modus

Dies ist eine Konfiguration vom Typ "Browser starten". Diese Konfiguration steuert die Browserkomponente, z. B. welche .html Datei angezeigt werden soll, wenn auf der Seite Edge DevTools-Einstellungen> die Option Headless ausgewählt ist, wie dies standardmäßig der Fall ist.

Dieser Konfigurationsname Microsoft Edge im headless-Modus starten wird auf der Benutzeroberfläche angezeigt, z. B. auf der Symbolleiste Debuggen und in der Debugkonsole. Wenn Sie mehrere Instanzen starten, wird eine Zahl an die zusätzlichen Instanzen in der Benutzeroberfläche angefügt, z. B. Starten Sie Microsoft Edge im headless-Modus 2. Diese Konfiguration wird unten von einer Verbundkonfiguration verwendet.

        {
            "type": "pwa-msedge",
            "name": "Launch Microsoft Edge in headless mode",
            "request": "launch",
            "runtimeArgs": [
                "--headless",
                "--remote-debugging-port=9222"
            ],
            "url": "c:\\Users\\username\\.vscode\\extensions\\ms-edgedevtools.vscode-edge-devtools-2.1.1\\out\\startpage\\index.html", // Provide your project's url to finish configuring
            "presentation": {
                "hidden": true
            }
        },

Konfiguration 3: Open Edge DevTools

Dies ist eine Konfiguration vom Typ "Debugger anfügen". Diese Konfiguration steuert die Edge DevTools-Registerkarte (Bereich), z. B. welche .html Datei das Tool Elemente auffüllt.

Dieser Konfigurationsname wird nicht direkt auf der Benutzeroberfläche angezeigt. Diese Konfiguration wird unten von einer Verbundkonfiguration verwendet.

        {
            "type": "vscode-edge-devtools.debug",
            "name": "Open Edge DevTools",
            "request": "attach",
            "url": "c:\\Users\\username\\.vscode\\extensions\\ms-edgedevtools.vscode-edge-devtools-2.1.1\\out\\startpage\\index.html", // Provide your project's url to finish configuring
            "presentation": {
                "hidden": true
            }
        }

Verbundkonfigurationen

Im compounds Abschnitt von launch.json werden Verbundkonfigurationen definiert.

Jede zusammengesetzte Konfiguration bezieht sich auf zwei Konfigurationen: eine Konfiguration zum Öffnen der Registerkarte Edge DevTools in Visual Studio Code und die andere Konfiguration zum Öffnen der Registerkarte Edge DevTools: Browser (manchmal auch als Screencast oder headless-Browser bezeichnet) oder sowohl die Registerkarte Edge DevTools: Browser als auch das gesamte Microsoft Edge-Browserfenster.

Klicken Sie im Bereich Microsoft Edge-Tools im Abschnitt Ziele auf der rechten Seite eines Ziels auf die Schaltfläche Screencast umschalten. Die kopflose eingebettete Edge DevTools: Browser-Registerkarte (Bereich) wird geschlossen oder geöffnet.

Klicken Sie im Bereich Microsoft Edge-Tools im Abschnitt Ziele auf der rechten Seite eines Ziels auf die Schaltfläche Anfügen, und öffnen Sie Microsoft Edge-Tools .

Verbundkonfiguration 1: Starten von Edge Headless und Anfügen von DevTools

Diese Verbundkonfiguration startet die folgenden Komponenten:

Die Registerkarte Edge DevTools: Browser (Bereich) in Visual Studio Code. Dies wird durch die Konfiguration definiert, die oben die name Option "Microsoft Edge im headless-Modus starten" aufweist.
Die Edge DevTools-Registerkarte (Bereich) in Visual Studio Code. Dies wird durch die Konfiguration definiert, die oben über die name "Open Edge DevTools" verfügt.

        {
            "name": "Launch Edge Headless and attach DevTools",
            "configurations": [
                "Launch Microsoft Edge in headless mode",
                "Open Edge DevTools"
            ]
        },

Der Name dieser verbundigen Konfiguration, Launch Edge Headless and Attach DevTools, wird auf der Symbolleiste Debuggen von Visual Studio Code angezeigt.

Verbundkonfiguration 2: Starten von Edge und Anfügen von DevTools

Diese Verbundkonfiguration startet die folgenden Komponenten:

Die Registerkarte Edge DevTools: Browser (Bereich) in Visual Studio Code. Dies wird durch die Konfiguration definiert, die oben über " name Microsoft Edge starten" verfügt.
Das Microsoft Edge-Browserfenster. Dies wird durch die Konfiguration definiert, die oben über " name Microsoft Edge starten" verfügt.
Die Edge DevTools-Registerkarte (Bereich) in Visual Studio Code. Dies wird durch die Konfiguration definiert, die oben über die name "Open Edge DevTools" verfügt.

        {
            "name": "Launch Edge and attach DevTools",
            "configurations": [
                "Launch Microsoft Edge",
                "Open Edge DevTools"
            ]
        }

Der Name dieser zusammengesetzten Konfiguration, Launch Edge and Attach DevTools, wird auf der Benutzeroberfläche auf der Symbolleiste Debuggen von Visual Studio Code angezeigt.

Hinzufügen von Konfigurationen

Sie können eigene, zusätzliche Debugkonfigurationen definieren. Klicken Sie auf die Schaltfläche Konfiguration hinzufügen .

Siehe auch

launch.json für andere Plattformen

Konfigurieren des C/C++-Debuggens in der Visual Studio Code-Dokumentation.
Konfigurieren Sie den Debugger unter Verwenden von React in Visual Studio Code in der Visual Studio Code-Dokumentation.

Freigeben über