Neuerungen in DevTools (Microsoft Edge 92)

Lesen Sie diese Ankündigungen, um die neuesten Features von Microsoft Edge DevTools und die Microsoft Edge DevTools-Erweiterung für Microsoft Visual Studio Code und Visual Studio zu testen.

Um auf dem Laufenden zu bleiben und die neuesten DevTools-Features zu erhalten, laden Sie eine Insider Preview-Version von Microsoft Edge herunter. Unabhängig davon, ob Sie Windows, Linux oder macOS verwenden, sollten Sie Canary (oder einen anderen Vorschaukanal) als Standardentwicklungsbrowser verwenden. Die Beta-, Dev- und Canary-Versionen von Microsoft Edge werden als separate Apps parallel zur stabilen, veröffentlichten Version von Microsoft Edge ausgeführt. Siehe Microsoft Edge Insider Channels.

Die neuesten Ankündigungen finden Sie, wenn Sie dem Microsoft Edge-Team auf Twitter folgen. Wenn Sie ein Problem mit DevTools melden oder nach einem neuen Feature fragen möchten, melden Sie ein Problem im Repository MicrosoftEdge/DevTools.

Tipp

Die Microsoft Build 2021-Konferenz fand am 25.-27. Mai. Hier ist ein Video von Build zu den Updates für DevTools: Microsoft Edge | Status der Plattform : Microsoft Edge bietet eine überzeugende und konsistente Plattform mit Tools für Entwickler. Da unsere Legacybrowser nicht mehr unterstützt werden, wird Edge bald der einzige unterstützte Browser von Microsoft unter Windows 10 oder höher sein. Nehmen Sie an uns teil, um mehr über die neuesten Edge-Plattformen, Tools und Web-Apps zu erfahren.

Die Schaltfläche Schließen ist nicht mehr ausgeblendet, wenn DevTools schmal ist

In Microsoft Edge Version 91 oder früher wird die Schaltfläche Schließen zum Schließen von DevTools nicht angezeigt, wenn der DevTools-Viewport schmal ist. In Microsoft Edge Version 92 ist die Schaltfläche Schließen in den DevTools immer vorhanden, unabhängig von der Breite des DevTools-Viewports.

Schnelles Hinzufügen von Tools mit der neuen Schaltfläche "Weitere Tools"

Es gibt eine neue Möglichkeit, weitere Tools in Microsoft Edge DevTools zu öffnen: das Menü Weitere Tools (+). Das Menü Weitere Tools wird auf der Symbolleiste im Hauptbereich und auf der Symbolleiste der Schublade (jetzt Bereich Schnellansicht ) angezeigt. Wenn Sie ein Tool aus dem Menü Weitere Tools auswählen, wird das Tool der Symbolleiste hinzugefügt.

Wenn Sie die Registerkarten auf einer der Symbolleisten neu anordnen möchten, wählen Sie die Registerkarten aus, und ziehen Sie sie.

Das Menü Weitere Tools war als Experiment in Microsoft Edge Version 89 verfügbar und ist jetzt immer verfügbar.

Siehe auch:

• Die Menüs "Weitere Tools" unter Informationen zur Liste der Tools

Verbesserungen beim Zeigen, Auswählen und Schließen von Tools

Die Registerkarten für jedes Tool wurden neu formatiert, um die Wahrscheinlichkeit zu verringern, dass ein Tool versehentlich geschlossen wird. Auf jeder Registerkarte in der Hauptsymbolleiste und in der Symbolleiste der Drawer (jetzt Bereich Schnellansicht ) wurden Folgende hinzugefügt:

• Abstand um die Registerkarte.
• Abstand um die Schaltfläche zum Schließen (x) auf der Registerkarte.
• Eine Hintergrundfarbe, wenn Sie mit dem Mauszeiger auf die Registerkarte zeigen.
• Eine QuickInfo für die Schaltfläche zum Schließen (x) der Registerkarte.
• Höherer Kontrast für die Schaltfläche zum Schließen (x) der Registerkarte.

Wenn Sie sich beispielsweise im Leistungstool befinden und mit dem Mauszeiger auf die Registerkarte Netzwerktool zeigen, können Diese Verbesserungen verhindern, dass das Netzwerktool versehentlich geschlossen wird.

Registerkarten vor der Neuformatierung:

Registerkarten nach der Neuformatierung:

Diese Verbesserungen sind besonders für Benutzer lokalisierter DevTools relevant, bei denen die Registerkarten möglicherweise schmaler sind und leichter versehentlich geschlossen werden können:

Es ist jetzt einfacher, ein Tool, das Sie geschlossen haben, erneut hinzuzufügen: Der Hauptsymbolleiste und der Drawer-Symbolleiste (jetzt Schnellansicht) wurde ein Menü Weitere Tools hinzugefügt.

Siehe auch:

• Informationen zur Liste der Tools

Bessere Unterstützung für Sprachausgaben in der Konsole

Vor Version 92 von Microsoft Edge haben Hilfstechnologien wie Sprachausgaben in der Konsole keine Vorschläge zur automatischen Vervollständigung oder die Ergebnisse ausgewerteter Ausdrücke angekündigt. Dies wurde jetzt behoben.

In der Konsole kündigen Sprachausgaben jetzt den aktuell ausgewählten Vorschlag für die automatische Vervollständigung an:

In der Konsole kündigen Sprachausgaben jetzt das Ergebnis eines ausgewerteten Ausdrucks an:

Siehe auch:

• Navigieren in DevTools mit Hilfstechnologie

Quellreihenfolge-Viewer

Sie können jetzt die Reihenfolge der Quellelemente anzeigen, die auf der gerenderten Webseite überlagert sind, um die Barrierefreiheit besser zu überprüfen.

Die Reihenfolge der Inhalte in einem HTML-Dokument ist wichtig für die Suchmaschinenoptimierung und Barrierefreiheit. CSS ermöglicht Entwicklern das Erstellen von Inhalten, die in der Reihenfolge auf dem Bildschirm anders aussehen als in der Reihenfolge im HTML-Quelldokument. Dies ist ein Problem mit der Barrierefreiheit, da Benutzer der Sprachausgabe eine verwirrende Erfahrung haben könnten.

Weitere Informationen finden Sie unter Testen der Tastaturunterstützung mithilfe des Quellreihenfolge-Viewers.

Den Verlauf dieses Features im Chromium-Open-Source-Projekt finden Sie unter Problem 1094406.

User-Agent Clienthinweise für Geräte auf der Registerkarte Netzwerkbedingungen

User-Agent Clienthinweise werden jetzt im Tool für Netzwerkbedingungen im Feld Benutzer-Agent auf Geräte angewendet. User-Agent Clienthinweise sind eine neue Erweiterung der Clienthinweis-API, mit der Sie auf ergonomische Weise auf Informationen über den Browser eines Benutzers zugreifen können, sodass die Privatsphäre gewahrt bleibt.

Weitere Informationen finden Sie unter Benutzer-Agent-Clienthinweise.

Den Verlauf dieses Features im Chromium-Open-Source-Projekt finden Sie unter Problem 1174299.

Microsoft Edge Developer Tools für Visual Studio Code, Version 1.1.8

Die Erweiterungsversion 1.1.8 der Microsoft Edge-Entwicklertools für Visual Studio Code für Microsoft Visual Studio Code weist seit der vorherigen Version die folgenden Änderungen auf. Microsoft Visual Studio Code aktualisiert Erweiterungen automatisch. Informationen zum manuellen Update auf Version 1.1.8 finden Sie unter Manuelles Aktualisieren einer Erweiterung.

Sie können Im GitHub-Repository vscode-edge-devtools Probleme melden und zur Erweiterung beitragen.

Kontextbezogene Dokumentation und Benutzeroberfläche zur Vereinfachung der Verwendung der DevTools-Erweiterung

Version 1.1.8 der Erweiterung Microsoft Edge Developer Tools für Visual Studio Code bietet jetzt eine einfachere Möglichkeit, eine neue Instanz von Microsoft Edge zu starten, indem Sie Anweisungen, Schaltflächen, Links und eine Dokumentationsseite als Leitfaden präsentieren.

• Wenn Sie auf der Aktivitätsleiste von Visual Studio Code auf die Schaltfläche Microsoft Edge-Tools klicken, werden im Bereich Microsoft Edge-Tools: Ziele anstelle eines leeren Bereichs nun erläuternder Text, Schaltflächen und Links angezeigt, die Sie unterstützen.

• Wenn Sie eine neue Instanz von Microsoft Edge in Visual Studio Code öffnen, zeigt Microsoft Edge jetzt eine Startseite an, auf der anstelle einer leeren Seite erläutert wird, wie die Entwicklertools-Erweiterung verwendet wird.

• Der Bereich Microsoft Edge-Tools: Ziele verfügt jetzt über die Schaltfläche Launch.json generieren und Anweisungen, um Ihr Projekt für das Debuggen in Microsoft Edge zu starten.

Siehe auch:

• Microsoft Edge DevTools-Erweiterung für Visual Studio Code

Ankündigungen aus dem Chromium-Projekt

In den folgenden Abschnitten werden zusätzliche Features angekündigt, die in Microsoft Edge verfügbar sind und zum Open-Source-Chromium-Projekt beigetragen wurden.

CSS Grid-Editor

Sie können nun CSS Grid-Layouts in der Vorschau anzeigen und erstellen, indem Sie den neuen CSS Grid-Editor verwenden.

Wenn ein HTML-Element auf Ihrer Seite darauf angewendet oder display: inline-grid angewendet wurdedisplay: grid, wird daneben auf der Registerkarte Formatvorlagen ein Rastersymbol angezeigt. Klicken Sie auf das Rastersymbol, um den CSS-Raster-Editor anzuzeigen oder auszublenden. Wählen Sie im CSS-Raster-Editor eines der Symbole (z justify-content: space-around. B. ) aus, um eine Vorschau des Layouts auf der gerenderten Seite anzuzeigen. Flex-Layout funktioniert ähnlich.

Informationen zum Verlauf dieses Features im Chromium-Open-Source-Projekt finden Sie unter Problem 1203241.

Siehe auch:

• Untersuchen des CSS-Rasters

Unterstützung für const-Neudeklarationen in der Konsole

Die Konsole unterstützt jetzt die Neudeklaration von const Variablen über separate REPL-Skripts hinweg (z. B. wenn Sie eine Anweisung in der Konsole ausführen), zusätzlich zu den vorhandenen let und class Neudeklarationen. Diese Unterstützung ermöglicht es Ihnen, mit verschiedenen Deklarationen für const Variablen zu experimentieren, ohne die Seite zu aktualisieren. Zuvor hat DevTools einen Syntaxfehler ausgelöst, wenn Sie eine const Bindung neu deklariert haben.

Weitere Informationen finden Sie im folgenden Beispiel. const Die Neudeklaration wird für separate REPL-Skripts unterstützt (siehe Variable a). Beachten Sie, dass die folgenden Szenarien standardmäßig nicht unterstützt werden:

• const Die Erneute Deklaration von Seitenskripts ist in REPL-Skripts nicht zulässig.
• const Die Neudeklaration innerhalb desselben REPL-Skripts ist nicht zulässig (siehe Variable b).

Informationen zum Ausführen eines einzelnen REPL-Skripts oder eines mehrzeiligen REPL-Skripts finden Sie unter Ausführen von JavaScript in der Konsole.

Informationen zum Verlauf dieses Features im Chromium-Open-Source-Projekt finden Sie unter Problem 1076427.

Neue Verknüpfung zum Anzeigen von iframe-Details

Zum schnellen Anzeigen von iframe Details können Sie jetzt im Tool Elemente mit der rechten Maustaste auf ein iframe Element klicken und dann iframe-Details anzeigen auswählen.

Dadurch werden die Details zu im iframeAnwendungstool angezeigt. Im Anwendungstool können Sie Dokumentdetails, Sicherheits- und Isolationsstatus, Berechtigungsrichtlinien und vieles mehr untersuchen, um potenzielle Probleme zu debuggen.

Siehe auch:

• Anwendungstool zum Verwalten des Speichers
• Untersuchen, Bearbeiten und Debuggen von HTML und CSS mit dem Elementtool

Informationen zum Verlauf dieses Features im Chromium-Open-Source-Projekt finden Sie unter Problem 1192084.

Erweiterte Unterstützung für DAS CORS-Debuggen

CORS-Fehler (Cross-Origin Resource Sharing) werden jetzt im Tool Probleme angezeigt. Es gibt verschiedene mögliche Ursachen für CORS-Fehler. Klicken Sie auf jedes Problem, um es zu erweitern und mögliche Ursachen und Lösungen anzuzeigen.

Siehe auch:

• Melden von CORS-Fehlern im Netzwerktool in Neuigkeiten in DevTools (Microsoft Edge 88)
• Suchen und Beheben von Problemen mit dem Tool "Probleme"

Den Verlauf dieses Features im Chromium-Open-Source-Projekt finden Sie unter Problem 1141824.

Umbenannter XHR-Filter in Fetch/XHR

Im Netzwerktool wird der XHR-Filter jetzt in Fetch/XHR umbenannt. Durch diese Änderung wird deutlicher, dass dieser Filter sowohl als Fetch auch XMLHttpRequest API-Netzwerkanforderungen enthält.

Siehe auch:

• Untersuchen der Netzwerkaktivität
• XMLHttpRequest-Spezifikation
• Abrufen der Spezifikation

Den Verlauf dieses Features im Chromium-Open-Source-Projekt finden Sie unter Problem 1201398.

Filtern des Wasm-Ressourcentyps im Netzwerktool

Im Netzwerktool können Sie nun den neuen Wasm-Filter auswählen, um die WebAssembly-Netzwerkanforderungen zu filtern.

Siehe auch:

• Filtern von Ressourcen in Der Netzwerkaktivität überprüfen

Den Verlauf dieses Features im Chromium-Open-Source-Projekt finden Sie unter Problem 1103638.

Compute-Schnittmengen sind jetzt im Leistungstool enthalten.

Im Leistungstool zeigt DevTools jetzt Compute-Schnittmengen im Flammendiagramm an. Diese Änderungen helfen Ihnen, Ereignisse von Schnittmengenbeobachtern zu identifizieren und den potenziellen Leistungsmehraufwand von Schnittmengenbeobachtern zu debuggen.

Siehe auch:

• Vertrauen ist gut, Beobachtung ist besser: Intersection Observer v2
• Analysieren einer Leistungsaufzeichnung

Informationen zum Verlauf dieses Features im Chromium-Open-Source-Projekt finden Sie unter Problem 1199137.

Hinweis

Teile dieser Seite sind Änderungen, die auf Arbeiten basieren, die von Google erstellt und geteilt und gemäß den in der Creative Commons Attribution 4.0 International License beschriebenen Bedingungen verwendet werden. Die originale Seite finden Sie hier und wird von Jecelyn Yeen (Developer Advocate, Chrome DevTools) verfasst.

Dieses Werk ist unter einer Creative Commons Attribution 4.0 International License lizenziert.