Microsoft Edge DevTools-Erweiterung für Visual Studio Code

Mit der Microsoft Edge DevTools-Erweiterung für Visual Studio Code können Sie Microsoft Edge DevTools und eine eingebettete Version des Microsoft Edge-Browsers einschließlich Geräteemulation direkt in Visual Studio Code verwenden. Die DevTools-Erweiterung bietet viele der gleichen Tools wie auch in den DevTools, die sich im Microsoft Edge-Browser in Visual Studio Code befinden.

Microsoft Edge-Entwicklungstools und Browservorschau in Visual Studio Code

Visual Studio Code ist ein einfacher, aber leistungsstarker Quellcode-Editor für Windows, Linux und macOS. Visual Studio Code ist eine vollständige IDE (Integrated Development Environment), die leistungsstarke Features für die Webentwicklung bietet. Visual Studio Code enthält integrierte Unterstützung für JavaScript, TypeScript und Node.js und ist daher ein großartiges Tool für Webentwickler, insbesondere mit dieser DevTools-Erweiterung.

Die DevTools-Erweiterung für Visual Studio Code ermöglicht Folgendes:

  • Entwickeln Sie Webseiten, und verwenden Sie DevTools, ohne Visual Studio Code zu verlassen. Diese Erweiterung bietet Ihnen eine Alternative zur Verwendung von DevTools für die Webseitenentwicklung im Browserfenster.

  • Emulieren Sie Geräte, z. B. indem Sie Ihre Webseite während der Entwicklung in verschiedenen Viewportgrößen anzeigen.

  • Testen Sie die Barrierefreiheit Ihrer Webseiten in Visual Studio Code.

  • Bearbeiten Sie CSS und SASS live und sehen Sie, wie Ihre Änderungen sofort in einer Browser-Instance widergespiegelt werden, während Sie Ihre eigentlichen Quelldateien bearbeiten. Mit der Bearbeitung von CSS-Spiegeln können Sie steuern, ob Änderungen an Ihrer .css Datei gespeichert werden sollen. DevTools öffnet und bearbeitet Ihre .css Dateien, ohne die Dateien jedoch automatisch zu speichern, sodass Sie entscheiden und steuern können, ob die Änderungen gespeichert werden sollen, die Sie auf der Registerkarte Formatvorlagen des Tools "Elemente" vorgenommen haben.

Ansätze im Vergleich

Die DevTools-Erweiterung für Visual Studio Code ist eine von mehreren verschiedenen Möglichkeiten, DevTools zum Ändern Ihrer lokalen Dateien zu verwenden.

Ansatz Vor- und Nachteile Artikel
Browser-DevTools-Elementtool>> Sie müssen Änderungen aus DevTools manuell in Ihre Quelldateien kopieren. Untersuchen, Bearbeiten und Debuggen von HTML und CSS mit dem Elemente-Tool
Browser>, DevTools>, Quellentool>, Registerkarte "Arbeitsbereich" zum Definieren eines Arbeitsbereichs Speichert immer die Änderungen, was vom Experimentieren abhalten könnte Wählen Sie einen lokalen Arbeitsbereich aus, um DevTools zum Bearbeiten von Dateien und Speichern von Änderungen auf der Festplatte in der Übersicht über das Tool "Quellen" zu verwenden.
> Experimente>mit Browser-DevTools-Einstellungen>>Quelldateien in Visual Studio Code öffnen Speichert immer die Änderungen, was vom Experimentieren abhalten könnte Öffnen von Quelldateien in Visual Studio Code
Microsoft Edge DevTools-Erweiterung für Visual Studio Code Öffnet und bearbeitet automatisch die CSS-Quelldatei, speichert die Datei jedoch nicht automatisch, sodass Sie auswählen können, ob die Änderungen gespeichert werden sollen. Der vorliegende Artikel.

Zwei-Wege-Bearbeitung

Änderungen werden zwischen den Quelldateien im geöffneten Ordner, auf der Registerkarte " Edge DevTools " und auf der Registerkarte " Edge DevTools: Browser ", wie folgt widergespiegelt.

CSS

Durch CSS-Spiegel-Bearbeitung können Sie CSS auf der Registerkarte Edge DevTools ändern, und es ändert sich automatisch in der .html.css Quelldatei und wird auf der Registerkarte Edge DevTools: Browser widergespiegelt. In DevTools können Sie entscheiden, ob die Änderung gespeichert werden soll, sodass Sie experimentieren können.

Sie können CSS in der .css.html Quelldatei ändern, die Änderung speichern und dann die Webseite auf der Registerkarte Edge DevTools: Browser neu laden, wodurch auch die Registerkarte Edge DevTools aktualisiert wird.

HTML

Sie können die DOM-Struktur auf der Registerkarte " Edge DevTools" bearbeiten (z. B. in <h2>Success!</h2><h2>CSS Success!</h2>Microsoft Edge wechseln), dann die EINGABETASTE drücken und dann die Registerkarte Edge DevTools: Browser aktualisieren, um die Änderung anzuzeigen. (Die Quelldatei wird nicht automatisch bearbeitet .html .)

Sie können HTML in der .html Quelldatei ändern, die Änderung speichern und dann die Webseite auf der Registerkarte Edge DevTools: Browser neu laden, wodurch auch die Registerkarte Edge DevTools aktualisiert wird.

Von den Entwicklertools unterstützte Aufgaben

Die DevTools-Erweiterung für Visual Studio Code ermöglicht Folgendes:

Aufgabe Artikel
Starten Sie eine neue Browser-instance mit DevTools für Ihr Projekt. Öffnen von DevTools und dem DevTools-Browser
Emulieren Sie verschiedene Geräte, und zeigen Sie Ihr Projekt in verschiedenen Anzeigemodi an. Geräteemulation
Zeigen Sie die Laufzeit-DOM-Struktur und das Layout Ihrer Seite mithilfe des Tools "Elemente " an. Öffnen von Quelldateien mit dem Tool "Elemente"
Analysieren und ändern Sie CSS-Stile Ihres Projekts mit Livevorschau und Liveänderungen an den Quelldateien Ihres Projekts. Aktualisieren .css Dateien im Formatvorlagentool (CSS Spiegel Bearbeitung)
Analysieren des Websitedatenverkehrs mithilfe des Netzwerktools . Integration von Netzwerktools
Protokollieren Sie Informationen, probieren Sie JavaScript aus, und greifen Sie über das Konsolentool auf das Fenster/DOM zu. Konsolenintegration
Untersuchen Sie Lager- und Service Worker mithilfe des Anwendungstools . Integration von Anwendungstools
Verwenden Sie die Erweiterung im Visual Studio Code-Debugworkflows. Integration mit Visual Studio Code-Debugging

Übersicht über die Tools in der DevTools-Erweiterung

Die folgenden Tools sind in der DevTools-Erweiterung für Visual Studio Code enthalten. Die folgenden Artikel konzentrieren sich nicht speziell auf die DevTools-Erweiterung für Visual Studio Code, sondern beziehen sich auf die DevTools des Microsoft Edge-Browsers.

Tool Zweck Artikel
Elementtool Untersuchen, bearbeiten und debuggen Sie Ihren HTML- und CSS-Code. Sie können im Tool bearbeiten, während die Änderungen live im Browser angezeigt werden. Debuggen Sie Ihren HTML-Code mithilfe der DOM-Struktur, und untersuchen und bearbeiten Sie das CSS für Ihre Webseite. Untersuchen, Bearbeiten und Debuggen von HTML und CSS mit dem Elemente-Tool
Konsolentool Eine intelligente, umfangreiche Befehlszeile in DevTools. Ein großartiges Begleitwerkzeug für andere Tools. Bietet eine leistungsstarke Möglichkeit, Funktionen zu skripten, die aktuelle Webseite zu überprüfen und die aktuelle Webseite mit JavaScript zu bearbeiten. Konsole – Übersicht
Network-Tool Verwenden Sie das Netzwerktool , um sicherzustellen, dass Ressourcen wie erwartet heruntergeladen oder hochgeladen werden. Überprüfen Sie die Eigenschaften einer einzelnen Ressource, z. B. die HTTP-Header, den Inhalt oder die Größe. Überprüfen der Netzwerkaktivität
Anwendungstool Verwenden Sie das Anwendungstool , um Speicher für Web-App-Seiten zu verwalten, einschließlich Manifest, Service Worker, lokaler Speicher, Cookies, Cachespeicher und Hintergrunddienste. Das Anwendungstool, um Speicher zu verwalten
Probleme-Tool Das Problemtool analysiert automatisch die aktuelle Webseite, meldet nach Typ gruppierte Probleme und stellt Dokumentationen bereit, die bei der Erläuterung und Behebung der Probleme helfen. Suchen und Beheben von Problemen mit dem Problemtool
Tool für Netzwerkbedingungen Verwenden Sie das Tool "Netzwerkbedingungen ", um den Browsercache zu deaktivieren, die Netzwerkdrosselung festzulegen, die Zeichenfolge des Benutzeragenten festzulegen und Inhaltscodierungen wie deflate, gzip und br festzulegen. Tool für Netzwerkbedingungen
Blockierungstool für Netzwerkanforderungen Verwenden Sie das Tool zum Blockieren von Netzwerkanforderungen , um das Blockieren von Netzwerkanforderungen für ein bestimmtes URL-Muster zu testen und das Verhalten einer Webseite zu beobachten. Blockierungstool für Netzwerkanforderungen
Inspect-Tool Verwenden Sie das Untersuchungstool, um Informationen zu einem Element auf einer gerenderten Webseite anzuzeigen. Wenn das Untersuchungstool aktiv ist, zeigen Sie mit der Maus auf Elemente auf der Webseite, und DevTools fügt eine Informationsüberlagerung und eine Rasterhervorhebung auf der Webseite hinzu. Analysieren von Seiten mit dem Tool "Überprüfen"
Geräteemulation Verwenden Sie das Geräteemulationstool , auch als Gerätesimulationsmodus oder Gerätemodus bezeichnet, um anzunähern, wie Ihre Seite auf einem mobilen Gerät aussieht und reagiert. Emulieren mobiler Geräte (Geräteemulation)

Eine Liste aller Tools, die in der Microsoft Edge-Browserversion von DevTools enthalten sind, finden Sie unter Informationen zur Liste der Tools.

Siehe auch

Externe Seiten:

  • Zuletzt aktualisiert um