Neuigkeiten in DevTools (Microsoft Edge 114)

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

Tipp

Die Microsoft Build 2023-Konferenz fand vom 23. bis 25. Mai 2023 statt. Weitere Informationen zu neuen Features für Speicher-, Leistungs- und Produktionsdebugging in DevTools sowie zu neuen Funktionen für PWAs in der Randleiste, WebView2 und Chat-Plug-Ins finden Sie in den folgenden Videos:

Video: Neuerungen in DevTools 113 und 114

Miniaturbild für das Video

Aggregieren von Selektorstatistiken im Leistungstool

Microsoft Edge 109 hat dem Leistungstool das Feature "Auswahlstatistiken" hinzugefügt. Sie können die Daten aus den Selektorstatistiken verwenden, um zu verstehen, welche CSS-Selektoren die meiste Zeit bei "Stil neu berechnen "-Ereignissen im Leistungstool in Anspruch nehmen und zu einer langsameren Leistung beitragen.

In Microsoft Edge 114 müssen Sie kein einzelnes Ereignis "Stil neu berechnen " auswählen, um die Selektoren anzuzeigen, die während dieses Ereignisses neu berechnet wurden. Stattdessen aggregiert die Registerkarte "Auswahlstatistiken" im unteren Bereich des Leistungstools automatisch die Daten für alle "Stil neu berechnen "-Ereignisse im aufgezeichneten Profil. Wenn Sie in bestimmte Teile des Profils hineinzoomen, wird die Registerkarte "Auswahlstatistiken" so aktualisiert, dass nur Daten aus dem Teil des Profils angezeigt werden, den Sie gerade analysieren.

Außerdem wurde der Registerkarte "Selektorstatistiken" eine neue Stylesheet-Spalte hinzugefügt. Die Stylesheet-Spalte enthält für jeden Selektor einen Link zurück zu dem Stylesheet, in dem der Selektor definiert ist.

Selektorstatistiken werden jetzt für alle

Vielen Dank, dass Sie das Feature "Selector Stats" verwenden und Ihr Feedback mit uns in GitHub teilen Issue #98: [Feedback] Selector Performance Tracing Explainer!

Siehe auch:

Das Tool "Probleme" und der Bereich "Formatvorlagen" warnen vor CSS-Eigenschaften, die das Layout

DevTools erkennt und warnt nun vor CSS-Eigenschaften, die bei der Verwendung von CSS-Animationen auf der Webseite zu layoutbasierten Leistungsproblemen führen können, z. B. Bewegungstext. Layout ist das Webbrowser-Verfahren zum Neuberechnen der Positionen und Geometrien von Elementen im Dokument, um einen Teil oder das gesamte Dokument neu zu rendern. Da Layout ein Benutzerblockiervorgang im Browser ist, wird empfohlen, Layout so weit wie möglich einzuschränken, damit Ihre Webinhalte flüssig bleiben und auf Interaktionen reagieren.

Einige CSS-Eigenschaften lösen keinen Layout-Vorgang aus, da sie im Compositor-Thread im Browser ausgeführt werden, z. B. Transformieren und Deckkraft. Aber auch CSS-Eigenschaften, die Layout nicht auslösen, können einen Paint-Vorgang auslösen, der in Kombination mit CSS-Animationen zu einer negativen Leistungsbeeinträchtigung führen kann.

Im Bereich "Formatvorlagen " im Tool "Elemente" wurden eine wellenförmige Unterstreichung und eine QuickInfo für CSS-Eigenschaften hinzugefügt, die Layout- oder Malvorgänge auslösen. Um das Problem in einer QuickInfo anzuzeigen, zeigen Sie auf die wellenförmige Unterstreichung:

CSS-Layoutproblem im Bereich

Im Tool "Probleme " in der Kategorie "Leistung " wird eine neue Art von Problem gemeldet, z. B. "Änderungen an dieser Eigenschaft lösen Folgendes aus: 'Layout', das sich auf die Leistung auswirken kann, wenn es darin @Keyframesverwendet wird." Wenn Sie den Bereich "Formatvorlagen" verwenden und das Problem im Tool "Probleme " öffnen möchten, UMSCHALT+Klicken Sie bei einer solchen Eigenschaft auf die wellenförmige Unterstreichung, oder klicken Sie mit der rechten Maustaste auf die wellenförmige Unterstreichung und wählen Sie dann "Probleme anzeigen" aus. Das Problemtool wird in der Schublade (jetzt Schnellansichtsbereich) am unteren Rand von DevTools geöffnet:

CSS-Layoutproblem im Probleme-Tool

Siehe auch:

Das Speichertool kann erweiterte Ablaufverfolgungen laden, die größer als 1 GB sind

In früheren Versionen von Microsoft Edge ist das Laden einer erweiterten Ablaufverfolgung, die größer als 1 GB ist, fehlgeschlagen. In Microsoft Edge 114 wurde dieses Problem behoben. Sie können jetzt erweiterte Ablaufverfolgungen beliebiger Größe erfolgreich laden.

Erweiterte Ablaufverfolgungen sind ein experimentelles Feature in Microsoft Edge, mit dem Sie ganze DevTools-Instanzen, die als .devtools Dateien gespeichert sind, exportieren und importieren können, wobei so viel Status wie möglich in den Tools Speicher, Leistung, Elemente, Konsole und Quellen beibehalten wird. Eine .devtools Datei wird in einer separaten DevTools-Instance geöffnet und lädt die folgenden Ablaufverfolgungsinformationen, während Verweise auf den Quellcode beibehalten werden:

  • DOM-Momentaufnahmen.
  • Konsolennachrichten.
  • Heap-Momentaufnahmen.
  • Leistungsprofile.

Eine erweiterte Ablaufverfolgung

Siehe auch:

Das Speichertool vergleicht zwei Heapmomentaufnahmen genauer

Im Speichertool können Sie mehrere Heap-Momentaufnahmen erstellen und vergleichen, um Unterschiede in den Objekten im Heap zu finden. In früheren Versionen von Microsoft Edge meldete das Speichertool beim Vergleich von Heapmomentaufnahmen zu viele neue und gelöschte Objekte, da Objekt-IDs vom Tool nicht konsistent nachverfolgt wurden. Tatsächlich sind viele davon wahrscheinlich die gleichen Objekte.

In Microsoft Edge 114 wurde dieses Problem behoben, indem sichergestellt wird, dass konsistente Objekt-IDs über mehrere Momentaufnahmen hinweg nachverfolgt werden.

Vergleichen zweier Heap-Momentaufnahmen in Microsoft Edge 114

Siehe auch:

Verbesserungen der Barrierefreiheit für das CSS-Übersichtstool

In Microsoft Edge 112 wurde das CSS-Übersichtstool aktualisiert, um eine Liste nicht einfacher Selektoren anzuzeigen, wenn eine Übersichts-Momentaufnahme des CSS einer Webseite erstellt wird. In Microsoft Edge 114 ist der Abschnitt "Nicht einfache Selektoren " des CSS-Übersichtstools jetzt einfacher mit Hilfstechnologien wie Sprachausgaben zu verwenden.

Wenn Sie auf einen Selektor klicken oder zu einem Selektor navigieren und dann die EINGABETASTE drücken, kündigen Sprachausgaben jetzt "Kopierter CSS-Selektor" an:

Navigieren im CSS-Übersichtstool mit der Tastatur

Siehe auch:

Die DevTools-Erweiterung für VS Code bietet eine bessere Unterstützung für den Modus für hohen Kontrast

In früheren Versionen der Microsoft Edge DevTools-Erweiterung für Visual Studio Code wurden die Benutzeroberflächensteuerelemente beim Zeigen auf Symbole innerhalb der Tools im Modus für hohen Kontrast nicht mit ausreichendem Kontrast gerendert. Das Problem wurde behoben.

Beispielsweise werden im Bereich "Formatvorlagen " im Tool "Elemente " die Kontrollkästchen zum Anwenden von Formatvorlagen auf Elemente jetzt im Modus für hohen Kontrast korrekt gerendert:

Zeigen auf Kontrollkästchen im Bereich

Außerdem werden im Konsolentool Symbole wie "Konsolen-Randleiste anzeigen " jetzt im Modus für hohen Kontrast korrekt gerendert:

Bewegen des Mauszeigers über die Schaltfläche

Siehe auch:

Ankündigungen aus dem Chromium-Projekt

Microsoft Edge 114 enthält auch die folgenden Updates aus dem Chromium-Projekt:

Siehe auch

  • Zuletzt aktualisiert um