Microsoft Edge DevTools-Erweiterung für Visual Studio Code

Mit der Microsoft Edge DevTools-Erweiterung für Visual Studio Code können Sie das Tool "Elemente" und das Netzwerktool des Browsers in Visual Studio Code verwenden. Ohne Visual Studio Code zu verlassen, verwenden Sie Microsoft Edge DevTools, um eine Verbindung mit einer Instanz von Microsoft Edge mit der folgenden Funktionalität herzustellen:

  • Zeigen Sie die HTML-Laufzeitstruktur an.
  • Ändern sie das Layout.
  • Formatvorlagen ändern (CSS).
  • Konsolenmeldungen lesen.
  • Anzeigen von Netzwerkanforderungen.

Hinweis

Die Microsoft Edge DevTools-Erweiterung erfordert Microsoft Edge. Diese Erweiterung wird in Microsoft Edge Versionen 80.0.361.48 und höher unterstützt.

In Visual Studio Code gibt es mehrere Möglichkeiten, die Microsoft Edge DevTools-Erweiterung zu öffnen:

  • Aus der Aktivitätsleiste.
  • Aus dem JavaScript-Debugger.

In Visual Studio Code wird auf diese Erweiterung durch mehrere Variationen verwiesen:

  • Microsoft Edge Developer Tools for Visual Studio Code – der vollständige Name, wie in den ausführlichen Informationen im Extensions Marketplacedargestellt.
  • Microsoft Edge Tools für VS Code – die Erweiterung wie bei der Suche im Extensions Marketplaceaufgeführt.
  • Microsoft Edge Tools – die Symbol-QuickInfo in der Aktivitätsleiste.
  • Edge DevTools – der Registerkartenname.

In diesem Artikel wird der Name "die Microsoft Edge DevTools-Erweiterung" verwendet, mit Ausnahme von UI-Text.

Installieren der Microsoft Edge DevTools-Erweiterung

Um die Erweiterung in Visual Studio Code zu installieren, navigieren Sie zu the Microsoft Edge DevTools extension for Visual Studio Code.

Sie können auch die Microsoft Edge DevTools-Erweiterung von Visual Studio Marketplace herunterladen. Sie können den Quellcode unter GitHub anzeigen.

Aktualisieren der Erweiterung

Microsoft Visual Studio Code aktualisiert Erweiterungen automatisch. Um die Erweiterung manuell zu aktualisieren, navigieren Sie zu "Erweiterung manuell aktualisieren".

Öffnen von Microsoft Edge DevTools in Visual Studio Code

Um den Toolbereich zu öffnen, wählen Sie in der Aktivitätsleistedas Symbol Microsoft Edge Extras aus.

Mit der Microsoft Edge DevTools-Erweiterung können Sie ganz einfach eine Instanz von Edge starten oder eine launch.json Datei generieren, um den Debugworkflow zu automatisieren.

Microsoft Edge DevTools für Visual Studio Code Erweiterung

Wenn Sie "Startinstanz" auswählen, wird ein Browserfenster geöffnet, und außerdem wird die Registerkarte "Edge DevTools" in Visual Studio Code geöffnet.

Wählen Sie "Startinstanz" aus, um den Browser in Visual Studio Code

Verwenden Sie die Microsoft Edge DevTools-Erweiterung in Visual Studio Code, um ein HTML-Element in Microsoft Edge zu überprüfen. Wählen Sie z. B. "Erfolgreich" aus. Im Browser und beachten Sie, dass das Elementtool mit hervorgehobener HTML geöffnet wird.

Elementtool mit hervorgehobener HTML

Modi für die Verwendung von Microsoft Edge DevTools in Visual Studio Code

Sie können diese Erweiterung in einem von drei Modi verwenden:

  • Starten Sie Microsoft Edge in einem neuen Fenster, und navigieren Sie zu Ihrer Webanwendung.
  • Anfügen an eine ausgeführte Instanz von Microsoft Edge.
  • Öffnen Sie eine neue Instanz von Microsoft Edge innerhalb Visual Studio Code.

Für jeden Modus müssen Sie Ihre Webanwendung von einem lokalen Webserver aus bereitstellen, der entweder von einer Visual Studio Code Aufgabe oder über die Befehlszeile gestartet wird. Verwenden Sie den URL-Parameter in der launch.json Datei, um Visual Studio Code mitzuteilen, welche URL geöffnet werden soll.

Öffnen einer neuen Browserinstanz

So öffnen Sie eine Browserinstanz über Visual Studio Code:

  1. Wählen Sie in der Aktivitätsleiste Microsoft Edge Toolsaus.

  2. Wählen Sie im Bereich "Microsoft Edge Tools: Ziele" die Option "Startinstanz" aus. Microsoft Edge wird geöffnet, und es wird eine Standardseite mit Anleitungen für weitere Informationen angezeigt. Außerdem wird der Edge DevTools-Bereich in Visual Studio Code angezeigt, der die Tools "Willkommen", "Elemente" und "Netzwerk" enthält.

    Microsoft Edge- und DevTools-Bereich in Visual Studio Code geöffnet

  3. Navigieren Sie in der Microsoft Edge Adressleiste zur URL des Projekts, das Sie debuggen möchten.

Ändern der Standardseite zu Ihrer Projektwebsite

Zum Debuggen des Projekts möchten Sie möglicherweise die Standardseite ändern, die in Microsoft Edge in Visual Studio Code geöffnet wird. So ändern Sie die Standardseite in die Website Ihres Projekts:

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

  2. Wählen Sie in der Aktivitätsleiste Microsoft Edge Toolsaus.

  3. Wählen Sie im Bereich Microsoft Edge Tools: Ziele den Link "Ordner öffnen" aus.

  4. Wählen Sie Ihren Projektordner mit der neuen Standardseite aus, die angezeigt werden soll, 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. Sie können auch das Kontrollkästchen "Autoren aller Dateien im übergeordneten Ordner vertrauen" aktivieren.

    Vertrauen Sie den Autoren in den Dateien dieses Ordners?

    Wenn Sie diesen Vorgang zum ersten Mal abschließen, müssen Sie auch Microsoft Edge Tools erneut auswählen.

    Der Bereich Microsoft Edge Tools: Targets zeigt jetzt zwei Schaltflächen an: "Launch Instance" und "launch.json generieren".

    Im Bereich "Microsoft Edge Tools: Targets" werden die Schaltflächen "Launch Instance" und "Generate launch.json" angezeigt.

  5. Wählen Sie "launch.json generieren" aus, um ein launch.json Projekt zu erstellen.

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

  7. Speichern Sie die launch.json.

  8. Wählen Sie "Start Project" aus, um zu überprüfen, ob Microsoft Edge geöffnet wird, und zeigt die eingegebene URL an. Außerdem werden DevTools in Visual Studio Code geöffnet.

Ändern der Erweiterungseinstellungen

In Version 1.1.6 oder höher können Sie DevTools in der erweiterung Visual Studio Code anpassen.

So passen Sie die Einstellungen an:

  1. Wählen Sie in Visual Studio Code in der Aktivitätsleiste Microsoft Edge Toolsaus.

  2. Wählen Sie in Microsoft Edge ToolsTargets rechts neben dem Wort TARGETS weitere > **** Aktionen (...) aus, und wählen Sie dann öffnen Einstellungenaus. **** Hinweis: Wenn Sie eine Maus verwenden, wählen Sie für den Zugriff auf weitere Aktionen (...), den Zielbereich aus, oder zeigen Sie darauf.

    Das Symbol "Weitere Aktionen" im Bereich "Microsoft Edge Tools: Targets", um die Einstellungen der DevTools-Erweiterung zu ändern.

Erneutes Laden der Erweiterung nach dem Ändern der Einstellungen

Einige Einstellungen weisen eine Notiz auf, die gelesen wird (nach dem Ändern neu geladen). Damit eine solche Einstellung wirksam wird:

  1. Schließen Sie den von der Erweiterung geöffneten Browser, oder wählen Sie im Bereich Microsoft Edge Tools > Targets die Option "Instanz schließen" ( X ) aus. Mit dieser Aktion wird auch die Registerkarte "Edge DevTools" automatisch geschlossen.

  2. Wählen Sie im Bereich Microsoft Edge Tools > Targets die Schaltfläche "Instanz starten" aus. Microsoft Edge wird geöffnet, und die Edge DevTools-Registerkarte wird angezeigt.

Anzeigen des Änderungsprotokolls für An der Erweiterung vorgenommene Änderungen

Sie können die an der Erweiterung vorgenommenen Änderungen anzeigen. Führen Sie die folgenden Schritte aus, um das Änderungsprotokoll anzuzeigen.

  1. Wählen Sie in Visual Studio Code in der Aktivitätsleiste Microsoft Edge Toolsaus.

  2. Wählen Sie in Microsoft Edge ToolsTargets rechts neben dem Wort TARGETS weitere > **** Aktionen (...) aus, und wählen Sie dann Änderungsprotokoll anzeigenaus. **** Hinweis: Wenn Sie eine Maus verwenden, wählen Sie für den Zugriff auf weitere Aktionen (...), den Zielbereich aus, oder zeigen Sie darauf.

    Das Menüelement "Änderungsprotokoll anzeigen", um Änderungen anzuzeigen, die an der Erweiterung vorgenommen wurden

Oder navigieren Sie im Browser zur Änderungsprotokolldatei im vscode-edge-devtools Repository.

Wechseln in den Headless-Modus

Standardmäßig wird die Erweiterung Microsoft Edge in einem neuen Fenster gestartet, in dem ein anderes Browsersymbol auf der Taskleiste angezeigt wird.

Wählen Sie "Bildschirmcast umschalten" aus, um den Browser im Editor anzuzeigen, oder blenden Sie den Browser aus, wenn er bereits angezeigt wird.

Umschalten des Screencasts zum Anzeigen des Browsers im Editor

Um nur den Screencast-Browser in Visual Studio Code zu verwenden, wählen Sie Einstellungen > Headless-Modusaus.

Um nur den Screencast-Browser in Visual Studio Code zu verwenden, wählen Sie Einstellungen > Headless-Modus aus.

Öffnen von Quelldateien aus dem Elementtool

Eines der Features **** des Elements-Tools ist, dass es die Quelldatei anzeigt, die Formatvorlagen und Ereignishandler auf einen ausgewählten Knoten in der DOM-Struktur angewendet hat. Quelldateien werden in Form von Links zu einer URL angezeigt. Wenn Sie einen Link auswählen, wird diese Datei im Visual Studio Code-Editor geöffnet.

Öffnen von Quelldateien aus dem Elementtool

Einrichten Ihres Projekts zum Anzeigen von Liveänderungen in der Erweiterung

Standardmäßig verfolgt die Microsoft Edge DevTools-Erweiterung während des Schreibens keine Liveänderungen am Code. Wenn der Browser automatisch aktualisiert werden soll, wenn Sie eine Datei ändern, richten Sie wie folgt eine Live-Neuladeumgebung ein.

Dieses Beispiel zeigt einen Ordner mit Produktionsdateien auf der Festplatte mit dem Namen my-project . Ändern Sie in den folgenden Schritten my-project ihren Ordnernamen, falls er anders ist.

  1. Installieren Sie Node.js und das reload npm-Paket wie folgt:

    1. Laden SieNode.jsherunter, und installieren Sie sie.
    2. Um das npm-Paket erneut zu installieren,öffnen Sie eine Eingabeaufforderung, und führen Sie npm install reload -g diese aus, um das Paket global zu installieren.
  2. Fügen Sie die Erweiterung wie folgt an Ihr Live-Neuladen-Projekt an:

    1. Navigieren Sie zum my-project Ordner im Terminalfenster, und führen Sie reload ihn aus, um den lokalen Server zu starten.
    2. Öffnen Sie in Visual Studio Code den my-project Ordner.
    3. Wechseln Sie zur Erweiterung, und starten Sie eine Microsoft Edge Browserinstanz.
    4. Navigieren Sie in Microsoft Edge zur localhost:8080/{file name you want to open} Erweiterung.

Alle Änderungen, die in diesem Ordner gespeichert werden, lösen jetzt eine Browseraktualisierung aus.

Synchronisieren von Liveänderungen aus dem Formatvorlagentool mithilfe der CSS-Spiegelbearbeitung

Das Formatvorlagentool in Microsoft Edge DevTools eignet sich hervorragend zum Debuggen und Optimieren von CSS-Eigenschaftenstilen. Ein Problem besteht darin, dass diese Änderungen zwar live im Browser angezeigt werden, aber nicht in Ihren Quelldateien widergespiegelt werden. Dies bedeutet, dass Sie am Ende der CSS-Debugsitzung die geänderten Elemente kopieren und in die Quelldateien einfügen müssen.

Die CSS-Spiegelbearbeitung ist ein experimentelles Feature der Microsoft Edge DevTools-Erweiterung, die dieses Problem umgehen kann. Wenn Sie die Spiegelbearbeitung aktivieren, ändert jede Änderung, die im Formatvorlagentool von DevTools vorgenommen wird, auch die Datei, die sich in Ihrem Arbeitsbereich befindet.

Im folgenden Beispiel haben wir index.html derzeit in Visual Studio Code geöffnet, und die Edge DevTools-Erweiterung ist geöffnet. Wenn wir das Flexbox-Symbol in der .searchbar CSS-Auswahl auswählen und flex-direction column ändern, sehen wir nicht nur die Änderung im Browser und in DevTools, sondern VS Code navigiert auch automatisch zur richtigen Stylesheetdatei und der entsprechenden Zeilennummer und fügt den flex-direction: column CSS-Code ein.

Auswählen des Flexbox-Symbols im Formatvorlagentool zum Erstellen einer CSS-Änderung

Durch Ändern der CSS-Einstellung wurde eine neue Codezeile in der richtigen CSS-Quelldatei erstellt.

Sie können alle Selektoren bearbeiten oder neue im Formatvorlagentool erstellen, und alle Änderungen werden in der richtigen CSS-Quelldatei gespiegelt. Die Erweiterung ändert nur die Datei, sie speichert die Änderungen nicht automatisch wieder auf Ihrer Festplatte. Dies ist eine Sicherheitsmaßnahme, um sicherzustellen, dass Sie ihren Code nicht versehentlich überschreiben.

Sie können die CSS-Spiegelbearbeitung über die Schaltfläche im Zielbereich der Erweiterung oder über das Befehlsmenü aktivieren und deaktivieren und nach mirror .

Im Erweiterungsbereich finden Sie eine kurze Erläuterung der CSS-Spiegelbearbeitung, die Schaltfläche zum Aktivieren und Deaktivieren der Funktionalität und einen Link, um uns Feedback zu geben.

Mithilfe des Befehlsmenüs und der Suche nach Spiegelung können Sie die CSS-Spiegelbearbeitungsansicht konzentrieren und die Funktionalität ein- und ausschalten.

Wir werden dieses Feature weiter verbessern und haben ein Nachverfolgungsproblem auf GitHub, CSS-Spiegelbearbeitung,eingerichtet, in dem wir Ihr Feedback freuen.

Browserdebugging mit Microsoft Edge DevTools-Integration in Visual Studio Code

Das JavaScript-Debuggen ist jetzt in Visual Studio Code integriert. Ab Version 1.5.7 von Visual Studio Code können Sie in Chrome, Microsoft Edge oder Node.js debuggen, ohne andere Erweiterungen zu installieren. Wenn Sie mit Microsoft Edge debuggen, können Sie Microsoft Edge DevTools aus dem JavaScript-Debugger starten.

  1. Verwenden Sie zum Starten einer Sitzung eine der folgenden Methoden:

    • Wählen Sie F5aus, oder wählen Sie in der Menüleiste das Symbol "Debuggen" und dann "Ausführen und Debuggen" aus.
    • Öffnen Sie die Visual Studio Code Befehlspalette, und wählen Sie dann Debuggen aus: Link öffnen.

    Starten Microsoft Edge DevTools aus dem JavaScript-Debugger

  2. Wählen Sie "Edge" aus. Beachten Sie auf der Debugsymbolleiste die Schaltfläche "Überprüfen".

    Die Schaltfläche "Überprüfen" auf der Debugsymbolleiste

  3. Wählen Sie "Prüfen" aus, um Microsoft Edge DevTools in Visual Studio Code zu öffnen. Bei der ersten Auswahl von Inspectwerden Sie vom Editor aufgefordert, die Microsoft Edge Developer Tools für Visual Studio Code Erweiterung zu installieren.

    Nachdem die Microsoft Edge DevTools-Erweiterung installiert wurde, wird bei Auswahl von InspectMicrosoft Edge DevTools innerhalb von Visual Studio Code geöffnet.

    The Inspect button opens Microsoft Edge DevTools inside Visual Studio Code

Automatisches Anhängen an Microsoft Edge und Starten von DevTools in Visual Studio Code

  1. Wenn Sie Microsoft Edge automatisch anhängen und Microsoft Edge DevTools in Visual Studio Code starten möchten, führen Sie die oben beschriebenen Schritte aus, und erstellen Sie dann eine launch.json Datei wie unten dargestellt.

    Wählen Sie Microsoft Edge als Debugtyp aus. Geben Sie in Ihrer launch.json Datei als Typ pwa-msedge an:

    {
        "version": "0.2.0",
        "configurations": [
            {
                "type": "pwa-msedge",
                "request": "launch",
                "name": "Launch Edge",
                "url": "http://localhost:8080",
                "webRoot": "${workspaceFolder}"
            }
        ]
    }
    
  2. Ändern Sie http://localhost:8080 den obigen Code, und stellen Sie sicher, dass die Variable {workspaceFolder} aufgelöst wird.

  3. Wählen Sie das Symbol "Überprüfen" aus. Wenn Sie die Microsoft Edge DevTools-Erweiterung für Visual Studio Code nicht installiert haben, wird die Registerkarte "Erweiterungen" geöffnet, und die zu installierende Erweiterung wird automatisch angezeigt.

Weitere Informationen

Konsolenintegration

Wenn Sie die Erweiterung über den Ausführungs- und Debugworkflow starten, erhalten Sie über die Debug-Konsole von Visual Studio Code alle Funktionen der DevTools-Konsole. Sie haben direkten Zugriff auf das Window-Objekt der Edgeinstanz und können alle Konsolendienstprogrammeverwenden.

Die DevTools-Konsole ist verfügbar, wenn die Erweiterung über einen Run- und Debug-Workflow gestartet wird.

Kontakt mit dem Microsoft Edge DevTools-Erweiterungsteam aufnehmen

Senden Sie Ihr Feedback, indem Sie ein Problem im Repository vscode-edge-devtools einreichen.

Wenn Sie die Microsoft Edge DevTools-Erweiterung verbessern möchten, sind Ihre Beiträge willkommen. Suchen Sie alles, was Sie für die ersten Schritte benötigen, im vscode-edge-devtools-Repository.