Freigeben über

Neuerungen in DevTools (Microsoft Edge 109)

  • Artikel

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.

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 Leistungs - und Speichertools zu exportieren. Diese erweiterten Ablaufverfolgungen enthalten weitere Informationen, z. B.:

  • In der Konsole protokollierte Meldungen.
  • Das JavaScript, das zum Zeitpunkt der Aufzeichnung auf der Seite ausgeführt wurde.
  • Momentaufnahmen des DOM.

Beim Speichern von Leistungsprofilen, Heapmomentaufnahmen, 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 Tools "Elemente", "Konsole" und "Quellen" beibehalten wird. Diese erweiterten Ablaufverfolgungen bieten eine leistungsstarke neue Möglichkeit, zusammenzuarbeiten und die Informationen in Ihren DevTools freizugeben.

So testen Sie das Feature für erweiterte Ablaufverfolgungen:

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

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

    Einstellungseinstellungen > Persistenz-Kontrollkästchen >

  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. Nehmen Sie im Leistungstool eine Aufzeichnung auf.

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

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

Einführend:

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

    Importieren einer Ablaufverfolgung aus dem Leistungstool

  2. Ein neues DevTools-Fenster wird geöffnet, das eine Teilmenge der Tools enthält, einschließlich des Leistungstools , das mit dem Profil geladen wurde, das Sie gerade aufgezeichnet haben. Die Tools "Elemente", "Konsole" und " Quellen " werden ebenfalls mit ihrem beibehaltenen Zustand bereits ausgefüllt:

    Konsole für den Ablaufverfolgungsimport

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 daher Ihr Feedback unter [Feedback] Enhanced Traces experiment #122.

Siehe auch:

Debuggen von Zeitintensiven Neuberechnungsformatereignissen mit neuen Selektorstatistiken

In Microsoft Edge 109 können Sie im Leistungstool die Einstellung Erweiterte Renderinginstrumentierung (langsam) aktivieren im Leistungstool aktivieren, um auf das neue Feature selector stats 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 Beenden aus.

  3. Wählen Sie ein Format neu berechnen-Ereignis aus. Wählen Sie im unteren Abschnitt des Leistungstools die Registerkarte Selector Stats aus:

    Leistungstool: Kontrollkästchen

Die Registerkarte Selector Stats enthält eine Liste aller CSS-Selektoren, die von der Browser-Engine während des Ereignisses Format neu berechnen berechnet wurden. Sie können Selektoren nach der verstrichenen Verarbeitungszeit oder der Anzahl der übereinstimmenden Elemente (Spalte Übereinstimmungsanzahl ) sortieren. Verwenden Sie diese Daten für Folgendes:

  • Suchen Sie Selektoren, deren Verarbeitung durch den Browser sehr lange dauert, und vereinfachen Sie sie.
  • Machen Sie Selektoren spezifischer, um die Leistung zu verbessern.

Siehe auch:

Nachverfolgen von Objekten, die bei der Zuordnungsstichprobe von der Garbage Collection verworfen wurden

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

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

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

Ohne Auswahl dieser Optionen funktioniert das Speichertool weiterhin wie zuvor und meldet Zuweisungen, die am Ende der Profilerstellungssitzung noch aktiv sind. In diesem Modus werden Objekte, die generiert und garbage-collection (GC'd) und dann ausgeblendet werden, nicht durch die 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 Denkmüll sehen, der von Ihren JavaScript-Funktionen generiert wurde, die dann GC'd war. Verwenden Sie diese Optionen, wenn Sie die Menge an Müll reduzieren möchten, die Ihr Code generiert. Weitere Informationen zu den Unterschieden zwischen Haupt- und Neben-GC finden Sie unter Trash Talk: the Orinoco Garbage Collector.

Profilerstellungsoptionen für die Zuordnungsstichprobe

Siehe auch:

Probieren Sie die neue Heap-Momentaufnahmeschnellansichtserweiterung für DevTools aus.

Fügen Sie microsoft Edge die neue Erweiterung heap snapshot visualizer hinzu, um neue Visualisierungen der Daten zu erhalten, die sich in Ihrem Heap Momentaufnahme-Dateien befinden. Durch die Installation dieser Erweiterung wird ein neues Heap Snapshot Visualizer-Tool in DevTools hinzugefügt. Im Tool Heap Snapshot Visualizer können Sie einen Heap Momentaufnahme Datei laden, um sie entweder als gerichteten Graph oder als Struktur darzustellen. Mit diesen neuen Visualisierungen können Sie die Aufbewahrungskette vom Garbage Collection-Stamm (GC) bis zu einem einzelnen Knoten untersuchen.

Diagrammansicht:

Heapmomentaufnahmeschnellansicht im Graphmodus

Strukturansicht:

Heapmomentaufnahmeschnellansicht im Strukturmodus

Siehe auch:

Verbesserungen an der Schnellansicht im Fokusmodus

Wir haben Uns Ihr Feedback angehört und die Schnellansichtsoptionen im Fokusmodus verbessert. Anstatt nur eine Teilmenge der Tools in einer Schnellansichts-Dropdownliste anzubieten, können Sie jetzt jedes DevTools-Tool auswählen, indem Sie auf die Schaltfläche Weitere Tools (Symbol weitere Tools) klicken, wie in der Standard Symbolleiste von DevTools. Laden Sie ein beliebiges Tool im Bereich Schnellansicht von DevTools, um mehrere Tools gleichzeitig anzuzeigen.

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

Hinzufügen eines Tools zum Bereich

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

  • Formatvorlagen anzeigen
  • Berechnete Stile 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: