Neuigkeiten in DevTools (Microsoft Edge 85)

Dies sind die neuesten DevTools-Features in der stabilen Version von Microsoft Edge.

Ankündigungen des Microsoft Edge DevTools-Teams

Features für CSS-Rasterdebugging

Das Microsoft Edge DevTools-Team arbeitet mit dem Chrome DevTools-Team und der Chromium-Community zusammen, um DevTools neue Features für CSS-Rasterdebugging hinzuzufügen. Sie können jetzt Rasterliniennummern, Rasterlücken und erweiterte Rasterlinien als On-Page-Überlagerung anzeigen. Außerdem werden in Kürze weitere Verbesserungen an den Rastertools verfügbar sein.

Update: Dieses Feature wurde veröffentlicht und ist nicht mehr experimentell.

Informationen zum Ausprobieren des Experiments mit einem Beispiel finden Sie unter Beispiel für einen CSS-Grid-Planer.

Chromium Problem #1047356

Siehe auch:

• CSS-Rasterlayouts untersuchen

Bearbeiten und Wiedergeben von Anforderungen mit der Netzwerkkonsole

Sie können jetzt "Bearbeiten" und "Wiedergeben " für Anforderungen im Netzwerkprotokoll mithilfe der Netzwerkkonsole verwenden. Öffnen Sie das Netzwerkprotokoll, klicken Sie mit der rechten Maustaste, und wählen Sie dann "Bearbeiten und wiedergeben" aus:

Das neue Netzwerkkonsolentool wird im Schnellansichtsbereich unten in DevTools geöffnet und automatisch mit Informationen für die HTTP-Anforderung aufgefüllt. Um die vom Server zurückgegebene Antwort anzuzeigen, bearbeiten Sie die Anforderung (falls erforderlich), und wählen Sie dann Senden aus.

Sie können die Netzwerkkonsole auch verwenden, um HTTP-Anforderungen direkt aus DevTools zu erstellen und zu senden.

Tipp: Um die Netzwerkkonsole im Hauptbereich (oben) anstelle im Schnellansichtsbereich anzuzeigen, siehe Verschieben von Tools zwischen Bereichen unten.

Update: Dieses Feature wurde veröffentlicht und ist nicht mehr experimentell.

Chromium Problem #1093687

Service Worker respondWith-Ereignisse auf der Registerkarte Timing

Die Registerkarte Timingdes Netzwerktools enthält respondWith jetzt Service Worker-Ereignisse. Das respondWith Service Worker-Ereignis zeigt die Dauer von der Zeit unmittelbar vor der Ausführung des Service Worker-Ereignishandlers fetch bis zu dem Zeitpunkt an, zu dem die respondWith Zusage des fetch Handlers abgerechnet wird.

Erweitern Sie "Antwort erhalten", um zusätzliche Informationen aus der fetch Antwort anzuzeigen, serviceWorkerResponseSourcez. BCacheStorageCacheName. , und ResponseTime.

Chromium Problem #1066579

Siehe auch:

• Zeigt die Timing-Beziehung von Anforderungen in der Referenz zu Netzwerkfeatures an.
• Zeigt die Timing-Aufschlüsselung einer Anforderung in der Netzwerkfeatures-Referenz an.

Webhint-Feedback im Bereich "Probleme"

Update Juli 2026: Webhint wurde in Microsoft Edge 151 entfernt.

Webhint ist ein Open-Source-Tool, das Echtzeitfeedback zu Barrierefreiheit, browserübergreifender Kompatibilität, Sicherheit, Leistung, PWAs und anderen häufigen Webentwicklungsproblemen von Websites bietet. Sie können Webhint-Feedback im Bereich "Probleme " anzeigen.

Informationen zum Aktivieren des Experiments finden Sie unter Aktivieren oder Deaktivieren eines Experiments , und aktivieren Sie das Kontrollkästchen neben Webhint aktivieren. Öffnen Sie den Bereich "Probleme ", um Feedback von Webhint anzuzeigen.

Chromium Problem #1070378

Siehe auch:

• Webhint-Erweiterung für Visual Studio Code

Werkzeuge zwischen Bereichen verschieben

Bisher konnten Tools wie "Elemente " und "Netzwerk " nur im Hauptbereich (oben) von DevTools geöffnet werden. Ebenso konnten Tools wie die 3D-Ansicht und Probleme nur in der Schublade (jetzt Schnellansichtsbereich ) am unteren Rand von DevTools geöffnet werden. Sie können jetzt Ihr DevTools-Layout anpassen, indem Sie Tools zwischen dem oberen und unteren Bereich verschieben.

Update: Dieses Feature wurde veröffentlicht und ist nicht mehr experimentell.

Chromium Problem #897944

Siehe auch:

• Informationen zu Aktivitätsleisten- und Schnellansichtstools in der Übersicht über DevTools.

Verbesserte Initiator-QuickInfo im Netzwerkbereich

In Microsoft Edge 83 und 84 werden QuickInfos für die Initiatorspalte, die die Ursache der Ressourcenanforderung anzeigt, im Netzwerkprotokoll mit einer horizontalen Bildlaufleiste angezeigt. Sie konnten nur den Aufrufstapel anzeigen, der die Anforderung initiiert hat, indem Sie horizontal in der QuickInfo scrollten.

Ab Microsoft Edge 85 können Sie jetzt die Initiator-Aufrufliste in der QuickInfo anzeigen, ohne horizontal scrollen zu müssen.

Chromium Problem #1069404

Ankündigungen aus dem Chromium-Projekt

In den folgenden Abschnitten werden weitere in Microsoft Edge 85 verfügbare Features vorgestellt, die zum Open Source Chromium Projekt beigetragen haben.

Formatvorlagenbearbeitung für CSS-in-JS-Frameworks

Der Bereich "Formatvorlagen" bietet jetzt eine bessere Unterstützung für die Bearbeitung von Formatvorlagen, die mit den CSS Object Model (CSSOM )-APIs erstellt wurden. Viele CSS-in-JS-Frameworks und -Bibliotheken verwenden die CSSOM-APIs unter der Haube, um Stile zu erstellen.

Sie können jetzt Formatvorlagen, die in JavaScript hinzugefügt wurden, mithilfe der CSSStyleSheet Benutzeroberfläche bearbeiten. Dies ist eine neue Möglichkeit zum Erstellen und Verteilen wiederverwendbarer Formatvorlagen bei Verwendung von Shadow DOM. Siehe Die CSSStyleSheet Schnittstelle im CSS-Objektmodell (CSSOM).

Beispielsweise konnten die h1 mit (CSSOM-APIs) hinzugefügten CSSStyleSheet Formatvorlagen zuvor nicht bearbeitet werden. Die Formatvorlagen können jetzt im Bereich "Formatvorlagen" bearbeitet werden.

Probieren Sie diese Funktion mit einem Beispiel aus, das CSS-in-JS verwendet. Siehe Formatvorlagenbearbeitung für CSS-in-JS-Frameworks.

Chromium Problem #946975

Lighthouse 6 im Lighthouse-Panel

Auf dem Lighthouse-Panel wird jetzt Lighthouse 6 ausgeführt. Eine vollständige Liste aller Änderungen finden Sie in den Versionshinweisen zu v6.0.0.

Lighthouse 6.0 führt drei neue Metriken in den Bericht ein: Largest Contentful Paint (LCP), Cumulative Layout Shift (CLS) und Total Blocking Time (TBT).

Die Formel für die Leistungsbewertung wurde ebenfalls neu gewichtet, um die Ladeerfahrung des Benutzers besser widerzuspiegeln.

Chromium Problem #772558

Siehe auch:

• Lighthouse-Tool

Erste bedeutungsvolle Paint-Abschaffung

First Meaningful Paint (FMP) ist in Lighthouse 6.0 veraltet. FMP wurde auch aus dem Leistungstool entfernt. Largest Contentful Paint ist der empfohlene Ersatz für FMP.

Chromium Problem #1096008

Siehe auch:

• First Meaningful Paint (FMP) im Glossar bei MDN.
• Largest Contentful Paint (LCP) in Glossary bei MDN.
• LargestContentfulPaint bei MDN.
• Lighthouse-Tool

Unterstützung für neue JavaScript-Features

DevTools bietet jetzt eine bessere Unterstützung für einige der neuesten JavaScript-Sprachfeatures:

• Optionale automatische Vervollständigung der Verkettungssyntax. Die automatische Vervollständigung von Eigenschaften in der Konsole unterstützt jetzt beispielsweise die optionale Verkettungssyntax name?. und funktioniert jetzt zusätzlich zu name. und name[.

• Syntaxhervorhebung für private Felder. Private Klassenfelder werden im Quellenbedienfeld jetzt ordnungsgemäß syntaxhervorgehoben und hübsch gedruckt.

• Syntaxhervorhebung für Nullish-Koaleszenzoperator DevTools druckt nun den Nullish-Koaleszenzoperator im Quellenbereich ordnungsgemäß aus.

Chromium Probleme #1073903, #1083214, #1083797

Siehe auch:

• Ausführen von JavaScript auf der Konsole
• JavaScript-Debugfeatures

Warnungen zu neuen App-Verknüpfungen im Manifestbereich

Im Anwendungstool helfen App-Verknüpfungen Benutzern dabei, häufige oder empfohlene Aufgaben innerhalb einer Web-App schnell zu starten.

Im Anwendungstool werden im Bereich "Manifest " jetzt Warnungen für die folgenden Bedingungen angezeigt:

• Wenn die Symbole für App-Verknüpfungen kleiner als 96x96 Pixel sind.
• Wenn die Symbole für App-Verknüpfungen und Manifestsymbole nicht quadratisch sind (da die Symbole ignoriert werden).

Chromium Problem #955497

Siehe auch:

• Das Anwendungstool, um Speicher zu verwalten

Einheitliche Anzeige des Bereichs "Berechnet"

Der Bereich "Berechnet" im Tool "Elemente" wird jetzt in allen Viewportgrößen einheitlich als Bereich angezeigt. Zuvor wurde der Bereich "Berechnet" in den Bereich "Formatvorlagen" integriert, als DevTools schmal war.

Chromium Problem #1073899

Siehe auch:

• Zeigen Sie nur das CSS an, das tatsächlich auf ein Element inder Verweis auf CSS-Features angewendet wird

Bytecode-Offsets für WebAssembly-Dateien

Chromium Problem #1071432

Siehe auch:

• Untersuchen eines JavaScript ArrayBuffer mit dem Speicherprüfungstool

Zeilenweises Kopieren und Ausschneiden im Quellenbereich

Beim Kopieren oder Ausschneiden ohne Auswahl im Quellenbereichs-Editor kopiert oder schneidet DevTools die aktuelle Inhaltszeile aus.

Chromium Problem #800028

Updates für Konsoleneinstellungen

Aufheben der Gruppierung derselben Konsolennachrichten

Die Umschaltfläche "Ähnliche Gruppe " in den Konsoleneinstellungen gilt jetzt für doppelte Nachrichten. Zuvor wurde es nur auf ähnliche Nachrichten angewendet.

Zuvor hat DevTools beispielsweise die Gruppierung der hello Nachrichten nicht aufgehoben, obwohl die Option "Ähnlich gruppieren " deaktiviert ist. Jetzt ist die Gruppierung der hello Nachrichten aufgehoben.

Probieren Sie dieses Feature mit einem Beispiel aus, das doppelte Nachrichten an die Konsole sendet.

Chromium Problem #1082963

Siehe auch:

• Deaktivieren der Nachrichtengruppierung in der Referenz zu Konsolenfeatures

Beibehalten von Einstellungen für nur ausgewählten Kontext

Die Einstellungen "Nur Kontext" in den Konsoleneinstellungen werden jetzt beibehalten. Bisher wurden die Einstellungen jedes Mal zurückgesetzt, wenn Sie DevTools schlossen und erneut öffneten. Durch die Änderung wird das Einstellungsverhalten mit anderen Optionen in den Konsoleneinstellungen konsistent.

Chromium Problem #1055875

Siehe auch:

• Nachrichten aus verschiedenen JavaScript-Kontexten herausfiltern – in Referenz zu Konsolenfeatures

Aktualisierungen des Leistungsbereichs

Cacheinformationen zur JavaScript-Kompilierung im Leistungstool

JavaScript-Kompilierungscacheinformationen werden jetzt immer im Zusammenfassungsfensterdes Leistungstools angezeigt. Zuvor hat DevTools nichts im Zusammenhang mit der Codezwischenspeicherung angezeigt, wenn keine Codezwischenspeicherung erfolgte.

Chromium Problem #912581

Siehe auch:

• Referenz zu Leistungsfeatures

Ausrichtung der Navigationszeiten im Bereich "Leistung"

Zuvor zeigte das Leistungstool Zeiten in den Linealen basierend auf dem Beginn der Aufzeichnung an. Die Anzeigedauer für Aufzeichnungen, in denen der Benutzer navigiert, hat sich geändert. DevTools zeigt jetzt Linealzeiten relativ zur Navigation an, anstatt zu Beginn der Aufzeichnung.

Die Zeiten für DOMContentLoadeddie Ereignisse , First Paint, First Contentful Paint und Largest Contentful Paint werden so aktualisiert, dass sie relativ zum Beginn der Navigation sind, was bedeutet, dass das Timing mit den von gemeldeten Timings PerformanceObserverübereinstimmt.

Chromium Problem #974550

Siehe auch:

• Referenz zu Leistungsfeatures

Neue Symbole für Haltepunkte, bedingte Haltepunkte und Protokollpunkte

Update: Ab 2022 werden Haltepunkte jetzt durch ein blaues Rechteck anstelle eines roten Kreises angezeigt.

Der Quellenbereich verfügt über neue Designs für Haltepunkte, bedingte Haltepunkte und Protokollpunkte. Haltepunkte werden durch einen roten Kreis dargestellt, genau wie Visual Studio Code und Visual Studio. Symbole wurden hinzugefügt, um bedingte Haltepunkte und Protokollpunkte zu unterscheiden.

Chromium Problem #1041830

Siehe auch:

• Anhalten von Code mit Haltepunkten

Diese Arbeit ist lizenziert unter einer Creative Commons Attribution 4.0 International License.

Siehe auch

• Neuerungen in den Microsoft Edge-DevTools
• Versionshinweise für die Microsoft Edge-Webplattform