Neuigkeiten in DevTools (Microsoft Edge 109)

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

Video: Neuerungen in DevTools 109

Miniaturbild für das Video

Importieren und Exportieren Ihrer DevTools-Instanzen mit dem neuen Feature für erweiterte Ablaufverfolgungen

In Microsoft Edge 109 können Sie neue Einstellungen aktivieren, um erweiterte Ablaufverfolgungen aus den Tools für Leistung und Arbeitsspeicher zu exportieren. Diese erweiterten Ablaufverfolgungen enthalten weitere Informationen, z. B.:

  • In der Konsole protokollierte Nachrichten.
  • Der JavaScript-Code, der zum Zeitpunkt der Aufzeichnung auf der Seite ausgeführt wurde.
  • Momentaufnahmen des DOM.

Beim Speichern von Leistungsprofilen, Heap-Momentaufnahmen, Zuordnungszeitachsen oder Zuordnungsstichproben können Sie jetzt ein neues .devtools Dateiformat exportieren. Wenn Sie dann die .devtools Datei importieren, wird eine neue Instance von DevTools geöffnet, wobei der Status Ihrer Elemente-, Konsolen- und Quellentools beibehalten wird. Diese erweiterten Ablaufverfolgungen bieten eine leistungsstarke neue Möglichkeit zur Zusammenarbeit und zum Freigeben der Informationen in Ihren DevTools.

So testen Sie das Feature für erweiterte Ablaufverfolgungen:

  1. Klicken Sie in DevTools auf die Schaltfläche Einstellungen (Symbol )".

  2. Aktivieren Sie im Abschnitt Persistenz der Einstellungsseite Einstellungen das Kontrollkästchen Erweiterte Leistung und Speicherablaufverfolgungen exportieren:

    Einstellungen > Einstellungen > Kontrollkästchen für Persistenz

  3. Wenn Sie Konsolennachrichten, JavaScript oder DOM-Momentaufnahmen beibehalten möchten, aktivieren Sie die entsprechenden Kontrollkästchen.

  4. Klicken Sie in den DevTools-Einstellungen auf die Schaltfläche Schließen (x).

  5. Erstellen Sie im Tool "Leistung " eine Aufzeichnung.

  6. Klicken Sie auf die Schaltfläche "Profil speichern " (Symbol ").

  7. Speichern Sie im Dialogfeld "Speichern unter " die neue .devtools Datei.

Importieren:

  1. Importieren Sie die .devtools Datei aus dem Leistungstool, indem Sie auf die Schaltfläche Profil laden (Symbol Profil laden) klicken:

    Importieren einer Ablaufverfolgung aus dem Tool

  2. Ein neues DevTools-Fenster wird geöffnet, das eine Teilmenge der Tools enthält, einschließlich des Leistungstools, das mit dem soeben aufgezeichneten Profil geladen wurde. Die Tools "Elemente", "Konsole" und " Quellen " sind ebenfalls vorab mit ihrem erhaltenen Zustand gefüllt:

    Ablaufverfolgungsimportkonsole

Sie können auch aus dem Speichertool mit dem neuen .devtools Dateiformat exportieren. Dies ist ein neues Feature, mit dem das DevTools-Team aktiv experimentiert. Senden Sie uns also Ihr Feedback im [Feedback] Experiment #122 für erweiterte Ablaufverfolgungen.

Siehe auch:

Debuggen von zeitintensiven Style-Ereignissen mit neuen Selektorstatistiken

In Microsoft Edge 109 können Sie im Tool "Leistung " die Einstellung "Erweiterte Renderinginstrumentation aktivieren (langsam)" im Tool "Leistung " aktivieren, um auf das neue Selektorstatistikfeature zuzugreifen.

Wenn diese Einstellung aktiviert ist:

  1. Wählen Sie Aufzeichnen aus, und führen Sie dann das Szenario aus, das Sie auf Ihrer Website oder App verbessern möchten.

  2. Wählen Sie Stopp aus.

  3. Wählen Sie ein Ereignis "Stil neu berechnen " aus. Wählen Sie im unteren Abschnitt des Leistungstools die Registerkarte "Auswahlstatistiken " aus:

    Einstellungen des Leistungstools Kontrollkästchen

Die Registerkarte "Selektorstatistiken " enthält eine Liste aller CSS-Selektoren, die vom Browser-Modul während des Ereignisses "Stil neu berechnen " berechnet wurden. Sie können Selektoren nach der verstrichenen Verarbeitungszeit oder nach der Anzahl der übereinstimmenden Elemente sortieren (die Spalte "Übereinstimmungsanzahl "). Verwenden Sie diese Daten für folgende Zwecke:

  • Suchen Sie Selektoren, deren Verarbeitung vom Browser sehr lange dauert, und vereinfachen Sie diese.
  • Selektoren spezifischer machen, um die Leistung zu verbessern.

Siehe auch:

Nachverfolgen von Objekten, die von der Garbage Collection beim Zuordnungssampling verworfen wurden

In Microsoft Edge 109 verfügt der Profiltyp "Zuordnungsstichling " im Speichertool jetzt über zwei neue Optionen:

  • Schließen Sie Objekte ein, die von Haupt-GC verworfen wurden.

  • Schließt Objekte ein, die von untergeordneter GC verworfen wurden.

Wenn Sie diese Optionen nicht auswählen, funktioniert das Speichertool weiterhin wie zuvor und meldet Zuordnungen, die am Ende der Profilerstellungssitzung noch aktiv sind. In diesem Modus werden Objekte, die generiert und durch Garbage Collected (GC'd) gesammelt werden und dann verschwinden, nicht durch das Zuordnungssampling nachverfolgt.

Wählen Sie beide Optionen aus, wenn Sie den von Ihrer Website oder App generierten Müll nachverfolgen möchten. Im resultierenden Profil können Sie Müll sehen, der von Ihren JavaScript-Funktionen generiert und dann GC gespielt wurde. Verwenden Sie diese Optionen, wenn Sie die Menge an Müll reduzieren möchten, die Ihr Code generiert. Um mehr über die Unterschiede zwischen Major- und Minor-GC zu erfahren, siehe Trash Talk: the Orinoco Garbage Collector.

Optionen für die Profilerstellung für Zuordnungsstichproben

Siehe auch:

Heap Snapshot Visualizer-Erweiterung für DevTools

Fügen Sie Microsoft Edge die neue Heap Snapshot Visualizer-Erweiterung hinzu, um neue Visualisierungen der Daten in Ihren Heap-Momentaufnahme-Dateien zu erhalten. Durch die Installation dieser Erweiterung wird in DevTools ein neues Tool "Heap Snapshot Visualizer" hinzugefügt. Im Tool Heap Snapshot Visualizer können Sie eine Heap-Momentaufnahme-Datei laden, um sie entweder als gerichteten Graphen oder als Baum darzustellen. Mit diesen neuen Visualisierungen können Sie die Aufbewahrungskette vom Garbage-Collection-Stamm (GC) bis zu einem einzelnen Knoten untersuchen.

Diagrammansicht:

Heap Snapshot Visualizer im Graphmodus

Strukturansicht:

Heap Snapshot Visualizer im Strukturmodus

Siehe auch:

Verbesserungen an der Schnellansicht im Fokusmodus

Wir haben auf Ihr Feedback gehört und die Schnellansichtsoptionen im Fokusmodus verbessert. Anstatt nur eine Teilmenge der Tools in einer Dropdownliste für die Schnellansicht anzubieten, können Sie jetzt ein beliebiges DevTools-Tool auswählen, indem Sie auf die Schaltfläche Weitere Tools (Symbol )" klicken, wie in der Hauptsymbolleiste von DevTools. Laden Sie ein beliebiges Tool in den Schnellansichtsbereich von DevTools, um mehrere Tools gleichzeitig anzuzeigen.

Der Status Ihrer Symbolleiste für die Schnellansicht bleibt über mehrere DevTools-Sitzungen hinweg erhalten. Der Schnellansichtsbereich wird automatisch reduziert, wenn Sie dasselbe Tool im oberen Bereich von DevTools öffnen.

Hinzufügen eines Tools zum Schnellansichtsfenster

Es gab ein Problem mit der Barrierefreiheit, bei dem Benutzer von Sprachbefehlen im Tool "Elemente" nicht zur Registerkarte "Formatvorlagen" oder zur Registerkarte "Berechnet" navigieren konnten. Sie können jetzt über zwei neue Befehle im Befehlsmenü auf diese Registerkarten zugreifen:

  • Formatvorlagen anzeigen
  • Computerbasierte Formatvorlagen anzeigen

Befehlsmenü mit den Befehlen

Siehe auch:

Ankündigungen aus dem Chromium-Projekt

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

Siehe auch

  • Zuletzt aktualisiert um