Microsoft Edge DevTools-Erweiterung für Visual Studio Code

Mit der Microsoft Edge DevTools-Erweiterung für Visual Studio Code können Sie den Microsoft Edge-Browser und die Entwicklertools direkt in Visual Studio Code verwenden. Visual Studio Code bietet integrierte Unterstützung für JavaScript, TypeScript und Node.js, daher ist es ein großartiges Tool für Webentwickler. Visual Studio Code ist ein einfacher, aber leistungsfähiger Quellcode-Editor, der für Windows, Linux und macOS verfügbar ist.

Die Erweiterung ermöglicht Folgendes:

Aufgabe	Abschnitt
Abrufen einer Liveanalyse von Problemen in Ihrem Quellcode.	Inline- und Live-Problemanalyse
Starten Sie eine neue Browserinstanz mit DevTools für Ihr Projekt.	Öffnen einer Browserinstanz in der Erweiterung
Emulieren Sie verschiedene Geräte, und sehen Sie Ihr Projekt in verschiedenen Anzeigemodi.	Geräte- und Zustandsemulation
Zeigen Sie die Laufzeit-DOM-Struktur und das Layout Ihrer Seite mithilfe des Elements-Tools an .	Öffnen von Quelldateien über das Elementtool
Analysieren und ändern Sie CSS-Formatvorlagen Ihres Projekts mit Livevorschau und Live-Änderungen an den Quelldateien Ihres Projekts.	Synchronisieren von Liveänderungen aus dem Formatvorlagentool mithilfe der CSS-Spiegelbearbeitung
Analysieren Sie den Websitedatenverkehr mithilfe des Netzwerktools .	Netzwerktoolintegration
Protokollieren Sie Informationen, testen Sie JavaScript, und greifen Sie mithilfe des Konsolentools auf das Fenster/DOM zu.	Konsolenintegration
Überprüfen Sie Speicher und Service Worker mithilfe des Anwendungstools .	Integration von Anwendungstools
Verwenden Sie die Erweiterung im Visual Studio Code-Debugworkflow.	Automatisches Öffnen des Browsers und von DevTools beim Debuggen in Visual Studio Code

Installieren der Microsoft Edge DevTools-Erweiterung

So installieren Sie die Microsoft Edge DevTools-Erweiterung aus Visual Studio Code heraus:

1. Navigieren Sie in Visual Studio Code zu Erweiterungen. Dazu können Sie unter Windows/Linux oderX Command++Shiftunter macOS drücken.Ctrl+Shift+X

2. Suchen Sie im Marketplace nach der Erweiterung Microsoft Edge Tools für VS Code, wählen Sie die Erweiterung aus, und wählen Sie dann "Installieren" aus:

   

Sie können auch die Microsoft Edge DevTools-Erweiterung von Visual Studio Marketplace herunterladen.

Inline- und Live-Problemanalyse

Probleme im Quellcode werden mit wellenförmigen Unterstreichungen hervorgehoben. Sie können das Problem untersuchen und detaillierte Informationen dazu erhalten, was das Problem ist, wie sie es beheben können und wo Sie weitere Informationen finden. Um das Problem zu untersuchen, wählen Sie den Code mit der wellenförmigen Unterstreichung aus:

Um alle Probleme in der Datei anzuzeigen, wählen Sie " Problem anzeigen" aus:

Auf der Registerkarte " Probleme " im unteren Bereich werden alle Probleme in den aktuell geöffneten Dateien aufgelistet:

Liveaktualisierung der Problemberichterstattung

Probleme werden live ausgewertet, während Sie Ihren Code bearbeiten. Während der Eingabe erhalten Sie Feedback zu allen gefundenen Problemen und deren Behebung:

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 wechseln Sie zu Ihrer Webanwendung.

• An eine ausgeführte Instanz von Microsoft Edge anfügen.

• Öffnen Sie eine neue Instanz von Microsoft Edge in Visual Studio Code.

Öffnen einer Browserinstanz in der Erweiterung

Es gibt verschiedene Möglichkeiten zum Starten einer neuen Browsersitzung in der Erweiterung, die in den folgenden Unterabschnitten beschrieben wird.

Durch Klicken mit der rechten Maustaste auf eine HTML-Datei im Explorer

Klicken Sie im Explorer von Visual Studio Code mit der rechten Maustaste auf eine HTML-Datei, wählen Sie " Mit Edge öffnen" und dann "Browser öffnen " oder " Browser mit DevTools öffnen" aus:

Durch Klicken auf die Schaltfläche "Instanz starten"

Eine weitere Möglichkeit zum Öffnen einer Browserinstanz:

1. Klicken Sie in der Aktivitätsleiste auf das Symbol "Microsoft Edge-Tools". Auf diese Weise können Sie eine Instanz von Edge starten oder eine launch.json Datei generieren, um den Debugworkflow zu automatisieren:

1. Klicken Sie dann auf die Schaltfläche " Instanz starten ". Sowohl ein Browservorschaufenster als auch die Edge DevTools-Registerkarte werden in Visual Studio Code geöffnet:

Öffnen des Browsers als Teil einer Debugsitzung

Eine weitere Möglichkeit zum Öffnen einer Browserinstanz besteht darin, den Browser im Rahmen einer Debugsitzung zu öffnen. Weitere Informationen finden Sie unten unter Verwenden der Erweiterung mit dem Visual Studio Code-Debugworkflow .

Die Erweiterung öffnet einen neuen Browser als eingebetteten Browser in Visual Studio Code. Diese Devtools: Die Registerkarte "Browservorschau " kann an eine beliebige Stelle im Editor verschoben werden. Sie können diese Registerkarte nebeneinander mit Ihrem Quellcode verwenden oder die Bereiche aufteilen und die Browservorschau unter Ihrem Code anzeigen:

Öffnen eines externen Browserfensters (Headless-Modus)

Wenn Sie über ein externes Browserfenster verfügen möchten, können Sie die Standardeinstellung ändern. Wählen Sie denHeadless-Modus "Einstellungen" > und dann das Kontrollkästchen aus, um den Browser im Headless-Modus zu öffnen:

Geräte- und Zustandsemulation

Auf der Registerkarte "Edge DevTools: Browservorschau" können Sie mithilfe der Emulationssymbolleiste unten verschiedene Umgebungen simulieren:

Dropdownmenü "Geräte emulieren"

Im Dropdownmenü " Emulieren von Geräten " können Sie aus einer Reihe verschiedener Geräte auswählen. Wenn Sie ein Gerät auswählen, ändert sich die Größe des Viewports auf die richtigen Maße und simuliert die Toucheingabeschnittstelle. Es gibt beispielsweise mehrere emulierte iPhone-Layouts:

Dropdownmenüs 'Breite' und 'Höhe'

Klicken Sie auf die Dropdownmenüs "Breite " und " Höhe ", um die Viewportabmessungen zu ändern:

Schaltfläche "Drehen"

Klicken Sie auf die Schaltfläche " Drehen " (, um den Viewport zu drehen.

Schaltfläche "CSS-Medienfeatures emulieren"

Um CSS-Medienabfragen zu emulieren, klicken Sie auf die Schaltfläche " CSS-Medienfeatures emulieren " (). Mit dieser Schaltfläche können Sie testen, wie Ihr Produkt im Druckmodus aussieht. Sie können zwischen dunklem und hellem Modus wechseln und erzwungene Farben emulieren:

Schaltfläche "Emulieren von Sehschwächen"

Klicken Sie auf die Schaltfläche " Emulieren von Sehschwächen " (Emulieren von Sehschwächen"), um die Erfahrung des aktuellen Webprojekts mit unterschiedlichen Sehschwächen zu testen. Mit dieser Schaltfläche können Sie Ihr Produkt in einem verschwommenen Modus oder in unterschiedlichen Farbmängeln testen:

Öffnen von Quelldateien über das Elementtool

Eines der Features des Elements-Tools besteht darin, 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. Durch Klicken auf einen Dateinamenlink wird diese Datei im Visual Studio Code-Editor geöffnet:

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

Das Tool "Formatvorlagen " in Microsoft Edge DevTools eignet sich hervorragend zum Debuggen und Optimieren Von CSS. 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 das, was Sie geändert haben, wieder in Ihre Quelldateien kopieren und einfügen müssen.

Die CSS-Spiegelbearbeitung ist ein Feature der Microsoft Edge DevTools-Erweiterung, das dieses Problem umgehen kann. Alle Änderungen, die im Formatvorlagentool vorgenommen werden, ändern auch die Datei in Ihrem Arbeitsbereich. Die CSS-Spiegelbearbeitung ist in der Erweiterung standardmäßig aktiviert.

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

Beispiel für die Spiegelung von Änderungen vom Formatvorlagentool in eine CSS-Quelldatei

Im folgenden Beispiel sind index.html wir derzeit in Visual Studio Code geöffnet, und die Microsoft Edge DevTools-Erweiterung ist geöffnet. Wir wählen das Flexbox-Symbol in der .searchbar CSS-Auswahl aus, und ändern dann den flex-direction Wert in column. Als Ergebnis sehen wir nicht nur die Änderung im Browser und in DevTools (das erste Bild unten), sondern Visual Studio Code navigiert auch automatisch zur richtigen Stylesheetdatei und der entsprechenden Zeilennummer und fügt den flex-direction: column CSS-Code ein (das zweite Bild unten):

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

Aktivieren der CSS-Spiegelbearbeitung

So aktivieren und deaktivieren Sie die CSS-Spiegelbearbeitung:

1. Wechseln Sie auf der Registerkarte "Edge DevTools " zum Tool "Elemente " und dann zum Bereich " Formatvorlagen ".

2. Aktivieren oder deaktivieren Sie das Bearbeitungskontrollkästchen für CSS-Spiegelung .

Oder öffnen Sie das Befehlsmenü, beginnen Sie mit der Eingabe des Wortspiegels, und wählen Sie dann Microsoft Edge-Tools: Spiegelbearbeitung ein|Off für CSS-Dateien im Arbeitsbereich:

Sourcemap-Unterstützung

Die CSS-Spiegelung unterstützt auch Abstraktionen wie Sass oder CSS-in-JS, wenn Sie Ihr Projekt zum Erstellen von Sourcemaps eingerichtet haben. Wir haben ein Tracking-Problem auf GitHub und freuen uns über Feedback, wie dies verbessert werden könnte: CSS-Spiegelbearbeitung mit Sourcemaps: Bekannte Probleme und Feedback.

Netzwerktoolintegration

Mit dem Netzwerktool können Sie den Netzwerkdatenverkehr überwachen und die Netzwerkbedingungen Ihrer Anwendung direkt in Visual Studio Code ändern.

Verwenden Sie das Netzwerktool für Folgendes:

• Analysieren Sie den Netzwerkdatenverkehr, und ermitteln Sie, warum einige Ressourcen nicht geladen werden.

• Simulieren Sie verschiedene Netzwerkbedingungen, z. B. offline oder mit einer langsamen Verbindung.

• Deaktivieren Sie alle Zwischenspeicherung, die das Debuggen Ihrer Anwendung erschweren könnten.

• Simulieren Sie verschiedene Benutzer-Agents, um zu sehen, wie Ihr Produkt einem Suchmaschinen-Bot oder einem Browser angezeigt wird, in dem Sie nicht testen können.

Konsolenintegration

Das Konsolentool ist in der Erweiterung verfügbar, und Sie können alles tun, was Sie gewohnt sind, wenn Sie DevTools im Browser verwenden.

Sie können Ihre Protokollmeldungen anzeigen, auf das window Objekt zugreifen und die DOM-Interaktionsmethoden verwenden. Sie können auch die Konsole filtern und Liveausdrücke festlegen.

Konsole nebeneinander mit anderen Tools

Sie können die Konsole auch zusammen mit dem Elementtool verwenden, wenn Sie die Konsole im unteren Bereich öffnen:

Konsole während des Ausführens und Debuggens

Wenn Sie die Erweiterung über den Workflow "Ausführen und Debuggen" starten, bietet Ihnen die Debugkonsole von Visual Studio Code die meisten Funktionen der DevTools-Konsole innerhalb von Visual Studio Code, aber keine Filteroptionen und eine einfachere Ergebnisanzeige:

Integration von Anwendungstools

Mit dem Anwendungstool können Sie die verschiedenen Teile Ihrer Anwendung überprüfen.

Verwenden Sie das Anwendungstool für Folgendes:

• Überprüfen Sie verschiedene Speicheroptionen wie Cookies, LocalStorage, SessionStorage und IndexedDB.

• Analysieren Sie den Cache Ihrer Anwendung.

• Analysieren Sie Dienste wie Benachrichtigung, Zahlungshandler oder Hintergrundsynchronisierung.

Verwenden der Erweiterung mit dem Visual Studio Code-Debugworkflow

Das JavaScript-Debuggen ist in Visual Studio Code integriert. Sie können 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 über den JavaScript-Debugger starten.

1. Führen Sie eine der folgenden Aktionen aus, um mit dem Debuggen zu beginnen:

   • Drücken Sie F5.
   • Klicken Sie auf der Menüleiste auf das Symbol "Debuggen ", und klicken Sie dann auf die Schaltfläche " Ausführen und Debuggen ", wie unten dargestellt.
   • Öffnen Sie die Visual Studio Code-Befehlspalette, beginnen Sie mit der Eingabe des Worts "Debuggen", und wählen Sie dann "Debuggen: Link öffnen" aus.

   

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

   

3. Wählen Sie "Überprüfen" aus, um Microsoft Edge DevTools in Visual Studio Code zu öffnen.

   Wenn Sie inspect zum ersten Mal auswählen, werden Sie vom Editor aufgefordert, die Erweiterung Microsoft Edge Developer Tools for Visual Studio Code zu installieren.

   Nachdem die Microsoft Edge DevTools-Erweiterung installiert wurde, wird microsoft Edge DevTools, wenn Sie "Untersuchen" auswählen, in Visual Studio Code geöffnet:

   

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

Um Ihr Projekt zu debuggen, 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 "Neues Fenster speichern" > aus. Beachten Sie, dass kein Ordner geöffnet ist.

2. Wählen Sie auf der Aktivitätsleiste "Microsoft 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 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 " Allen Autoren aller Dateien im übergeordneten Ordner vertrauen" aktivieren:

   

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

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

   

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

6. Fügen launch.jsonSie in die URL Ihres Projekts hinzu. Wenn Sie die URL leer lassen, wird die Standardseite angezeigt.

7. Speichern Sie die launch.json.

Wenn Sie ihr Projekt in Visual Studio Code debuggen, wird automatisch der Browser gestartet und die Entwicklertools mit der url geöffnet, die Sie in Ihrem launch.jsonangegeben haben.

Weitere Informationen

• Starten Sie Konfigurationen im Debugartikel für Visual Studio Code.

Ändern der Erweiterungseinstellungen

Sie können die Visual Studio Code-Erweiterung an Ihre Anforderungen anpassen.

1. Wählen Sie in Visual Studio Code auf der Aktivitätsleiste "Microsoft Edge-Tools" aus.

2. Wählen Sie in Microsoft Edge Tools > Targets (Ziele) rechts neben dem Wort "TARGETS" die Option "Weitere Aktionen (...) " aus, und wählen Sie dann "Einstellungen öffnen" aus.

   Wenn Sie eine Maus verwenden, wählen Sie für den Zugriff auf weitere Aktionen (...) den Bereich "Ziele " aus, oder zeigen Sie darauf:

   

Erneutes Laden der Erweiterung nach änderung der Einstellungen

Some settings have a note that reads (reload required after changing). Damit eine solche Einstellung wirksam wird:

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

2. Klicken Sie im Bereich "Ziele" der Microsoft Edge-Tools > auf die Schaltfläche "Instanz starten". Microsoft Edge wird geöffnet, und die Registerkarte "Edge DevTools " wird angezeigt.

Kontakt mit dem Microsoft Edge DevTools-Erweiterungsteam aufnehmen

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

Ihre Beiträge sind willkommen, um die Microsoft Edge DevTools-Erweiterung zu verbessern. Finden Sie alles, was Sie für die ersten Schritte benötigen, im Repository "vscode-edge-devtools ".

Weitere Informationen

• vscode-edge-devtools repository – Quellcode für die Microsoft Edge Developer Tools-Erweiterung für Visual Studio Code auf GitHub.
• Visual Studio Code herunterladen
• Erste Schritte – Dokumentation für Visual Studio Code.