Experimentelle Features in Microsoft Edge DevTools
Microsoft Edge DevTools bieten Zugriff auf experimentelle Features, die sich noch in der Entwicklung befinden. In diesem Artikel werden die experimentellen Features aufgelistet und beschrieben, die in den folgenden Funktionen enthalten sind:
- Die neueste Version des Canary-Vorschaukanals von Microsoft Edge.
- Die neueste Version der stabilen Version von Microsoft Edge.
Alle Kanäle von Microsoft Edge verfügen über experimentelle Features. Sie können die neuesten experimentellen Features mithilfe der Microsoft Edge Canary Channel abrufen. Die vollständige Liste der Experimente, die in Ihrer Version von Microsoft Edge verfügbar sind, finden Sie auf der Seite "Settings>Experiments" in DevTools.
Diese Experimente können instabil oder unzuverlässig sein und erfordern möglicherweise einen Neustart von DevTools.
Experimente, die standardmäßig aktiviert sind
Die folgenden experimentellen Features sind standardmäßig aktiviert. Sie können diese Features sofort verwenden, ohne einstellungen zu ändern. Sie können diese experimentellen Standardfeatures bei Bedarf deaktivieren.
In Microsoft Edge Canary 131 standardmäßig aktiviert:
- Neugestaltung der Filterleiste im Bereich "Netzwerk"
- Bereich "AutoAusfüllen"
- Leistungsbereich: Landing Page für Livemetriken aktivieren
- Enable webhint
- Anzeigen von Problemen in Elementen
- Quelldateien in Visual Studio Code öffnen
In Microsoft Edge Stable 129 standardmäßig aktiviert:
- Aktivieren der Hintergrundseitenauswahl (zum Vorabrendern)
- Bereich "AutoAusfüllen"
- Enable webhint
- Anzeigen von Problemen in Elementen
- Quelldateien in Visual Studio Code öffnen
- Bereich "Spekulatives Laden aktivieren" im Bereich "Anwendung"
Aktivieren oder Deaktivieren eines Experiments
Experimentelle Features werden ständig aktualisiert und können Leistungsprobleme verursachen. Dies ist ein Grund, warum Sie ein Experiment deaktivieren möchten.
So aktivieren oder deaktivieren Sie ein Experiment in Microsoft Edge:
Klicken Sie zum Öffnen von DevTools mit der rechten Maustaste auf die Webseite, und wählen Sie dann Untersuchen aus. Oder drücken Sie STRG+UMSCHALT+I (Windows, Linux) oder BEFEHL+WAHL+I (macOS). DevTools wird geöffnet.
Klicken Sie in DevTools auf der Symbolleiste Standard auf die Schaltfläche DevTools anpassen und steuern () und dann auf die Schaltfläche Einstellungen (). Oder drücken Sie UMSCHALT+?.
Wählen Sie auf der linken Seite des Bereichs Einstellungen die Seite Experimente aus:
Aktivieren oder deaktivieren Sie das Kontrollkästchen für ein Experiment. Einige Experimente sind standardmäßig ausgewählt.
Klicken Sie in der oberen rechten Ecke der ).
Klicken Sie auf die Schaltfläche DevTools neu laden .
Wiederherstellen von Standardwerten, für die Experimente ausgewählt sind
So stellen Sie die Standardeinstellungen wieder her, für die experimentelle Features aktiviert sind:
Klicken Sie zum Öffnen von DevTools mit der rechten Maustaste auf die Webseite, und wählen Sie dann Untersuchen aus. Oder drücken Sie STRG+UMSCHALT+I (Windows, Linux) oder BEFEHL+WAHL+I (macOS). DevTools wird geöffnet.
Klicken Sie in DevTools auf der Symbolleiste Standard auf die Schaltfläche Einstellungen (). Oder drücken Sie UMSCHALT+?. Der Bereich Einstellungen wird geöffnet, wobei die Seite Einstellungen ausgewählt ist.
Klicken Sie unten auf der Seite Einstellungen auf die Schaltfläche Standardwerte wiederherstellen und aktualisieren, und klicken Sie dann auf Schließen ().
Filtern der Experimente
Sie können die experimentellen Features nach Text filtern, der im Titel enthalten ist.
Klicken Sie zum Öffnen von DevTools mit der rechten Maustaste auf die Webseite, und wählen Sie dann Untersuchen aus. Oder drücken Sie STRG+UMSCHALT+I (Windows, Linux) oder BEFEHL+WAHL+I (macOS). DevTools wird geöffnet.
Klicken Sie in DevTools auf der Symbolleiste Standard auf die Schaltfläche Einstellungen (). Oder drücken Sie UMSCHALT+?. Der Bereich Einstellungen wird geöffnet, wobei die Seite Einstellungen ausgewählt ist.
Wählen Sie auf der linken Seite des Bereichs Einstellungen die Seite Experimente aus.
Klicken Sie in das Textfeld Filter, und geben Sie Text ein, z. B. Zeitleiste. Während der Eingabe werden nur die übereinstimmenden Kontrollkästchen auf der Seite Experimente angezeigt.
Um die Filterung zu beenden, deaktivieren Sie das Textfeld Filter .
Feedback zu den Experimenten
Wir freuen uns auf Ihr Feedback zu experimentellen Features. Wenden Sie sich an das Microsoft Edge DevTools-Team, um Feedback mit uns zu teilen.
Liste der Experimente
Die Kontrollkästchen für Experimente, die in der neuesten Version des Canary-Vorschaukanals von Microsoft Edge angezeigt werden, sind unten aufgeführt. Das Stable-Release wird ebenfalls beachtet, nachdem die Kontrollkästchen in Canary hinzugefügt oder entfernt wurden.
Laden benutzerdefinierter Stylesheets durch Erweiterungen zulassen
Einige Microsoft Edge-Add-Ons können benutzerdefinierte Farbdesigns für DevTools definieren. Wenn Sie ein Add-On installieren, das ein benutzerdefiniertes Farbdesign für DevTools definiert, müssen Sie das Experiment Erweiterungen das Laden benutzerdefinierter Stylesheets erlauben aktivieren, um die Add-On-Designs anzuzeigen.
Status:
- Dieses Kontrollkästchen ist in Microsoft Edge Canary 131 vorhanden.
- Dieses Kontrollkästchen ist in Microsoft Edge Stable 129 vorhanden.
Erfassen von Knotenerstellungsstapeln
Um JavaScript-Stapelablaufverfolgungen zu erfassen, wenn DOM-Knoten zur Laufzeit dem DOM hinzugefügt werden, aktivieren Sie dieses Experiment. Dieses Experiment fügt die Registerkarte Stapelüberwachung im Tool Elemente hinzu, gruppiert mit der Registerkarte Formatvorlagen :
Nachdem Sie das Experiment aktiviert haben, können Sie es wie folgt testen:
- Öffnen Sie in einem neuen Fenster oder einer neuen Registerkarte eine Webseite, die DOM-Knoten dynamisch über JavaScript erstellt, z. B. die TODO-Demo-App.
- Erstellen Sie auf der gerenderten Demoseite ein neues Todo-Element.
- Klicken Sie auf der gerenderten Demoseite mit der rechten Maustaste auf das neue Aufgabenelement, und wählen Sie dann Untersuchen aus. DevTools wird geöffnet und zeigt das Tool Elemente an.
- Klicken Sie auf die Registerkarte Stapelüberwachung , die mit der Registerkarte Formatvorlagen gruppiert ist.
Siehe auch:
Status:
- Dieses Kontrollkästchen ist in Microsoft Edge Canary 131 vorhanden.
- Dieses Kontrollkästchen ist in Microsoft Edge Stable 129 vorhanden.
Protokollmonitor
Stellt das Protokollüberwachungstool in DevTools zur Verfügung:
Das Protokollüberwachungstool zeigt die nachrichten an, die von DevTools gesendet und empfangen werden, um die überprüfte Seite zu debuggen. DevTools kommuniziert mit der überprüften Seite mithilfe des Chrome DevTools-Protokolls (CDP).
So aktivieren Sie dieses Kontrollkästchen, und öffnen Sie dann das Protokollüberwachungstool :
Aktivieren Sie dieses Protokollmonitor-Kontrollkästchen wie oben unter Aktivieren oder Deaktivieren eines Experiments beschrieben.
Klicken Sie in der Schnellansicht unten in DevTools auf die Schaltfläche Weitere Tools (+), und wählen Sie dann Protokollmonitor aus.
Oder öffnen Sie das Befehlsmenü, z. B. durch Drücken von STRG+UMSCHALT+P (Windows/Linux) oder BEFEHL+UMSCHALT+P (macOS), und geben Sie dann Protokoll in das Textfeld ein. Wählen Sie dann Protokollmonitor anzeigen aus.
Das Protokollmonitortool wird im Bereich Schnellansicht am unteren Rand von DevTools angezeigt.
Siehe auch:
- Verwenden des Chrome DevTools-Protokolls (CDP) in WebView2-Apps
- [Experimentell] Protokollmonitor in Neuerungen in DevTools (Chrome 92).
Status:
- Dieses Kontrollkästchen ist in Microsoft Edge Canary 131 vorhanden.
- Dieses Kontrollkästchen ist in Microsoft Edge Stable 129 vorhanden.
Option anzeigen, um Interne in Heapmomentaufnahmen verfügbar zu machen
neu ab Microsoft Edge 105
Gibt an, ob ein Kontrollkästchen angezeigt werden soll, um Internes in Heapmomentaufnahmen im Speichertool verfügbar zu machen.
Siehe auch:
Status:
- Dieses Kontrollkästchen ist in Microsoft Edge Canary 131 vorhanden.
- Dieses Kontrollkästchen ist in Microsoft Edge Stable 129 vorhanden.
Vorübergehendes Deaktivieren von Einzugsmarkierungen
neu ab Microsoft Edge 122
Deaktiviert vorübergehend die Einzugsmarkierungen im Tool Quellen . Die Einzugsmarkierungen sind die vertikalen Linien, die die Einzugsebene des Codes angeben:
Siehe auch:
Status:
- Dieses Kontrollkästchen ist in Microsoft Edge Canary 131 vorhanden.
- Dieses Kontrollkästchen ist in Microsoft Edge Stable 129 vorhanden.
Aktivieren Sie den neuen Advanced Perceptual Contrast Algorithm (APCA), der frühere Kontrastverhältnis und AA/AAA-Richtlinien ersetzt.
Der Advanced Perceptual Contrast Algorithm (APCA) ersetzt die AA/AAA-Richtlinien für das Kontrastverhältnis im Farbwähler. Die Farbwähler wird auf der Registerkarte Formatvorlagen im Tool Elemente verwendet.
APCA ist eine neue Methode zum Berechnen des Kontrasts. Sie basiert auf modernen Forschungen zur Farbwahrnehmung. Im Vergleich zu AA/AAA-Richtlinien ist APCA kontextabhängiger. Der Kontrast wird basierend auf den folgenden räumlichen Eigenschaften des Texts, der Farbe und des Kontexts berechnet.
- Räumliche Eigenschaften von Text, die Schriftbreite und Schriftgröße enthalten.
- Räumliche Eigenschaften der Farbe, die wahrgenommenen Kontrast zwischen Text und Hintergrund enthalten.
- Räumliche Eigenschaften des Kontexts, die Umgebungslicht, Umgebung und beabsichtigten Zweck enthalten.
Siehe auch:
- Neue Farbkontrastberechnung – Advanced Perceptual Contrast Algorithm (APCA) in What's New in DevTools (Microsoft Edge 89).
- Farben mit dem Farbwähler ändern in Verweis auf CSS-Features.
- Testen Sie den Kontrast von Text und Farbe mithilfe des Farbwählers
Status:
- Dieses Kontrollkästchen ist in Microsoft Edge Canary 131 vorhanden.
- Dieses Kontrollkästchen ist in Microsoft Edge Stable 129 vorhanden.
Aktivieren der vollständigen Strukturansicht für Barrierefreiheit im Bereich "Elemente"
Fügt im Tool Elemente eine Schaltfläche Zur Barrierefreiheitsstruktur wechseln hinzu, die zwischen der DOM-Struktur und der Barrierefreiheitsstruktur umgeschaltet wird. Die Schaltflächenbezeichnung schaltet zur DOM-Strukturansicht wechseln um.
Wenn dieses Kontrollkästchen Experiment deaktiviert ist, fehlt im Tool Elemente die Schaltfläche:
Wenn dieses Kontrollkästchen Experiment aktiviert ist, verfügt das Tool Elemente über die Schaltfläche:
Die Ansicht "Barrierefreiheitsstruktur" im Tool "Elemente ":
Siehe auch:
- Testen Sie die Barrierefreiheit mithilfe der Registerkarte "Barrierefreiheit"
- Vollständige Barrierefreiheitsstrukturansicht im Elementtool in Neuerungen in DevTools (Microsoft Edge 90).
Status:
- Dieses Kontrollkästchen ist in Microsoft Edge Canary 131 vorhanden.
- Dieses Kontrollkästchen ist in Microsoft Edge Stable 129 vorhanden.
Aktivieren des Editors für neue Schriftarten im Bereich "Formatvorlagen"
Sie können die visuelle Schriftart Editor verwenden, um Schriftarten zu bearbeiten. Verwenden Sie es, um Schriftarten und Schriftartmerkmale zu definieren. Die visuelle Schriftart Editor unterstützt Sie bei folgenden Aktionen:
- Wechseln zwischen Einheiten für unterschiedliche Schriftarteigenschaften
- Wechseln zwischen Schlüsselwörtern für unterschiedliche Schriftarteigenschaften
- Konvertieren von Einheiten
- Generieren von genauem CSS-Code
So verwenden Sie die visuelle Schriftart Editor
Klicken Sie zum Öffnen von DevTools mit der rechten Maustaste auf die Webseite, und wählen Sie dann Untersuchen aus. Oder drücken Sie STRG+UMSCHALT+I (Windows, Linux) oder BEFEHL+WAHL+I (macOS). DevTools wird geöffnet.
Wählen Sie in DevTools auf der Symbolleiste Standard die Registerkarte Elemente aus. Wenn die Registerkarte Elemente nicht angezeigt wird, klicken Sie auf die Schaltfläche Weitere Registerkarten () oder auf die Schaltfläche Weitere Tools ().
Wählen Sie auf der Registerkarte Formatvorlagen das Symbol Schriftart Editor aus.
Einige Browserkanäle weisen das Kontrollkästchen Neue Schriftart aktivieren Editor Tool im Bereich Formatvorlagen auf.
Siehe auch:
Status:
- Dieses Kontrollkästchen ist in Microsoft Edge Canary 131 vorhanden.
- Dieses Kontrollkästchen ist in Microsoft Edge Stable 129 vorhanden.
Aktivieren der automatischen Berichterstellung für Kontrastprobleme über den Bereich "Probleme"
Aktiviert die automatische Berichterstellung für Kontrastprobleme im Problemtool .
Siehe auch:
Status:
- Dieses Kontrollkästchen ist in Microsoft Edge Canary 131 vorhanden.
- Dieses Kontrollkästchen ist in Microsoft Edge Stable 129 vorhanden.
Aktivieren experimenteller Cookiefeatures
Aktiviert experimentelle Cookiefeatures.
Siehe auch:
Status:
- Dieses Kontrollkästchen ist in Microsoft Edge Canary 131 vorhanden.
- Dieses Kontrollkästchen ist in Microsoft Edge Stable 129 vorhanden.
Css-Längenerstellungstool <> auf der Registerkarte Formatvorlagen als veraltet kennzeichnen
Gilt nicht für Microsoft Edge. Das Aktivieren oder Deaktivieren dieses Kontrollkästchens hat keine Auswirkungen.
Status:
- Dieses Kontrollkästchen ist in Microsoft Edge Canary 131 vorhanden.
- Dieses Kontrollkästchen ist in Microsoft Edge Stable 129 vorhanden.
Synchronisieren von CSS-Änderungen auf der Registerkarte "Formatvorlagen"
Gibt an, ob CSS-Änderungen auf der Registerkarte Formatvorlagen im Tool Elemente synchronisiert werden sollen.
Siehe auch:
Status:
- Dieses Kontrollkästchen ist in Microsoft Edge Canary 131 vorhanden.
- Dieses Kontrollkästchen ist in Microsoft Edge Stable 129 vorhanden.
Hebt einen verletzende Knoten oder Attribut in der DOM-Struktur des Elementpanels hervor.
neu ab Microsoft Edge 106
Hebt einen verletzende Knoten oder Ein attribut in der DOM-Struktur des Elements-Tools hervor.
Siehe auch:
Status:
- Dieses Kontrollkästchen ist in Microsoft Edge Canary 131 vorhanden.
- Dieses Kontrollkästchen ist in Microsoft Edge Stable 129 vorhanden.
Gruppieren von Quellen in erstellten und bereitgestellten Strukturen
neu ab Microsoft Edge 104
Steuert, ob Ressourcen auf der Registerkarte Seite des Quellentools in separaten erstellten und bereitgestellten Strukturen gruppiert werden sollen. Mit diesem Feature im Quellentool können Sie Quelldateien in zwei Ordnern gruppieren, je nachdem, ob dies der Fall ist:
- Ursprüngliche Quelldateien (erstellt, d. a. Dateien mit Ihren lokalen Bearbeitungen).
- Produktionsdateien (bereitgestellte Dateien, die sich auf dem Webserver befinden, nachdem die Quelldateien kompiliert und bündelt wurden).
Siehe auch:
- Verwenden sie die Registerkarte Seite, um Ressourcen zu untersuchen, die die aktuelle Webseite in derÜbersicht über das Quellentool erstellen.
Status:
- Dieses Kontrollkästchen ist in Microsoft Edge Canary 131 vorhanden.
- Dieses Kontrollkästchen ist in Microsoft Edge Stable 129 vorhanden.
Ausblenden von nicht aufgelisteten Code in der Strukturansicht "Quellen"
neu ab Microsoft Edge 106
In der Strukturansicht des Quellentools wird Code ausgelassen, der in der Liste Ignorieren enthalten ist.
Siehe auch:
- Hinzufügen von Inhaltsskripts zur Liste "Ignorieren"
- Erweitertes Ignorieren der Auflistung
- Verbesserte Einstellung "Liste ignorieren"
Status:
- Dieses Kontrollkästchen ist in Microsoft Edge Canary 131 vorhanden.
- Dieses Kontrollkästchen ist in Microsoft Edge Stable 129 vorhanden.
Hervorheben wichtiger DOM-Eigenschaften auf der Registerkarte "Eigenschaften"
neu ab Microsoft Edge 105
Wenn Sie dieses Kontrollkästchen aktivieren, werden wichtige DOM-Eigenschaften auf der Registerkarte Eigenschaften in Tools wie dem Tool Elemente für das derzeit ausgewählte DOM-Strukturelement hervorgehoben. Dieses neue Experiment erleichtert die Anzeige wichtiger Eigenschaften. Einige Eigenschaften werden fett formatiert angezeigt, andere fett und haben ein star Symbol daneben.
Diese Hervorhebung ist nützlich, da objekte in JavaScript von übergeordneten Objekten erben, die selbst von anderen Vorgängern erben, manchmal hunderte von Eigenschaften. Dieses Experiment hilft Ihnen, die Standard Eigenschaften zu finden.
Der Objekteigenschaften-Viewer ist in mehreren Tools enthalten, darunter Elemente, Quellen, Konsole und Netzwerk. Es stellt eine Strukturansicht der Eigenschaften von -Objekten bereit.
Im Tool Elemente
So zeigen Sie den Objekteigenschaften-Viewer im Tool Elemente an:
Klicken Sie mit der rechten Maustaste auf ein Element auf einer Webseite, und wählen Sie dann Untersuchen aus. DevTools wird geöffnet, wobei das Seitenelement in der DOM-Struktur des Elements-Tools ausgewählt ist.
Wählen Sie im Tool Elemente die Registerkarte Eigenschaften aus, die mit der Registerkarte Formatvorlagen gruppiert ist.
Die Registerkarte Eigenschaften enthält die Liste der Eigenschaften für das ausgewählte Element.
Siehe auch:
Im Tool "Quellen"
So zeigen Sie den Objekteigenschaften-Viewer im Tool Quellen an:
Öffnen Sie eine
.js
Datei.Legen Sie einen Haltepunkt für eine Codezeile in der
.js
Datei fest.Halten Sie den Debugger in dieser Zeile an, indem Sie den Code auf der Webseite ausführen.
Objekteigenschaften werden im Abschnitt Bereich auf der rechten Randleiste angezeigt. Weitere Informationen finden Sie unter Anzeigen und Bearbeiten von Eigenschaften und Variablen in JavaScript-Debugfeatures.
Siehe auch:
Status:
- Dieses Kontrollkästchen ist in Microsoft Edge Canary 131 nicht vorhanden.
- Dieses Kontrollkästchen ist in Microsoft Edge Stable 129 vorhanden.
Aktivieren der Hintergrundseitenauswahl (zum Vorabrendern)
neu ab Microsoft Edge 114, neue Bezeichnung für Kontrollkästchen ab Microsoft Edge 128
Aktiviert die Hintergrundseitenauswahl, z. B. für das Vorabrendering des Debuggens.
Siehe auch:
- Übersicht und Zeitachsen für die Migration zu Manifest V3 – Service Worker anstelle von Hintergrundseiten für Microsoft Edge-Erweiterungen.
- chrome.runtime : Ruft die Hintergrundseite ab.
Status:
- Dieses Kontrollkästchen ist in Microsoft Edge Canary 131 nicht vorhanden.
- Dieses Kontrollkästchen ist in Microsoft Edge Stable 129 vorhanden.
Neugestaltung der Filterleiste im Bereich "Netzwerk"
neu ab Microsoft Edge 120
Im Netzwerktool wurde die Filterleiste neu gestaltet:
- Die Schaltflächen werden durch eine Dropdownliste Anforderungstypen ersetzt.
- Die Kontrollkästchen werden durch eine Dropdownliste Weitere Filter ersetzt.
Filterleiste mit deaktiviertem Kontrollkästchen:
Filterleiste mit diesem Kontrollkästchen:
Siehe auch:
- Filtern Sie Ressourcen unter Netzwerkaktivität überprüfen.
- Filtern von Anforderungen in der Referenz zu Netzwerkfeatures.
Status:
- Dieses Kontrollkästchen ist in Microsoft Edge Canary 131 vorhanden.
- Dieses Kontrollkästchen ist in Microsoft Edge Stable 129 vorhanden.
Bereich "AutoAusfüllen"
neu ab Microsoft Edge 125
Fügt DevTools ein AutoAusfüllen-Tool hinzu, um verschiedene Ereignisse aufzuzeichnen, die der Browser auslöst, wenn ein Benutzer ein Formular mithilfe der Funktion zum automatischen Ausfüllen des Browsers ausfüllt. Beispielsweise, wenn sich der Browser Ihre Adresse speichert und sie automatisch in einem Adressfeld ausfüllt.
Siehe auch:
- Automatisches Ausfüllen im Microsoft Edge-Whitepaper zum Datenschutz.
- AutoAusfüllen in Der Übersicht über WebView2-Features und -APIs.
Status:
- Dieses Kontrollkästchen ist in Microsoft Edge Canary 131 vorhanden.
- Dieses Kontrollkästchen ist in Microsoft Edge Stable 123 als AutoAusfüllen-Ansicht aktivieren vorhanden.
Leistungsbereich: PostMessage-Verteilungs- und -Verarbeitungsflows anzeigen
neu ab Microsoft Edge 124
Dieses Experiment verbessert den Hauptabschnitt des Leistungstools, sodass Sie Ereignisse und Handler schnell identifizieren postMessage
können, indem Ereignisse, die von der postMessage
-Methode ausgelöst werden, von anderen Ereignissen unterschieden werden, die im Leistungstool angezeigt werden. Dieses Experiment hilft Ihnen, Leistungsprobleme zu untersuchen, die sich auf das Veröffentlichen von Nachrichten in verschiedenen Threads einer Anwendung beziehen, um Nachrichten zwischen Fenstern, iFrames und dedizierten Workern anzuzeigen.
Ohne dieses Experiment werden Ereignisse, die durch das Verteilen und Behandeln von Nachrichten zwischen Threads einer Anwendung ausgelöst werden, als generische Skriptfunktionsaufrufereignisse angezeigt. Wenn dieses Experiment aktiviert ist:
-
postMessage
dispatch-Ereignisse werden als Schedule postMessage angezeigt. -
postMessage
Handlerereignisse werden als On Message angezeigt:
Mit diesem Experiment können Sie untersuchen, wann ein postMessage
Aufruf stattgefunden hat und wie lange die Nachricht in die Warteschlange eingereiht wurde, bevor der postMessage
Handler gestartet wird. Die Dispatchereignisse werden mit Handlerereignissen durch Initiatorpfeile verknüpft, die angezeigt werden, wenn Sie auf einen der Ereignistypen klicken:
Siehe auch:
- Anzeigen von Nachrichten zwischen Fenstern, iFrames und dedizierten Workern in der Referenz zu Leistungsfeatures.
- Referenz zu Leistungsaufzeichnungsereignissen
- Demo zu postMessage-Ablaufverfolgungsereignissen (gerendert)
- Demo zu postMessage-Ablaufverfolgungsereignissen (Quellcode)
- PostMessage-Ereignisse und -Handler werden von anderen Ereignissen in What's New in DevTools (Microsoft Edge 124) unterschieden.
Status:
- Dieses Kontrollkästchen ist in Microsoft Edge Canary 131 vorhanden.
- Dieses Kontrollkästchen ist in Microsoft Edge Stable 129 vorhanden.
Leistungsbereich: Landing Page für Livemetriken aktivieren
neu ab Microsoft Edge 127
Fügt im Leistungstool eine Landing Page hinzu, die angezeigt wird, wenn noch keine Leistungsablaufverfolgungen aufgezeichnet wurden. Auf der Startseite werden Leistungsmetriken zur gerenderten Seite angezeigt, die live aktualisiert werden, z. B.:
- Größter inhaltsbehafteter Paint (LCP)
- Kumulative Layoutverschiebung (CLS)
- Interaktion mit nächstem Paint (INP)
Siehe auch:
Status:
- Dieses Kontrollkästchen ist in Microsoft Edge Canary 131 vorhanden.
- Dieses Kontrollkästchen ist in Microsoft Edge Stable 129 vorhanden.
Leistungsbereich: Aktivieren von Serverzeitangaben im Zeitleiste
neu ab Microsoft Edge Stable 129
Zeigt im Hauptabschnitt des Leistungstools eine Spur für Serverdauern an, um serverzeitrelevante Ereignisse anzuzeigen, die von Ihrem HTTP-Server gesendet werden. Weitere Informationen finden Sie unter Serverzeitsteuerung bei MDN Web Docs.
Siehe auch:
Status:
- Dieses Kontrollkästchen ist in Microsoft Edge Canary 131 vorhanden.
- Dieses Kontrollkästchen ist in Microsoft Edge Stable 129 vorhanden.
Protokollieren von nicht abgefangenen DevTools-Ausnahmen in der Konsole
Steuert, ob nicht abgefangene DevTools-Ausnahmen im Konsolentool protokolliert werden sollen.
Siehe auch:
Status:
- Dieses Kontrollkästchen ist in Microsoft Edge Canary 131 vorhanden.
- Dieses Kontrollkästchen ist in Microsoft Edge Stable 129 vorhanden.
Enable webhint
Webhint ist ein Open-Source-Tool, das Echtzeitfeedback für Websites und lokale Webseiten bietet. Die Art des Feedbacks, das von webhint bereitgestellt wird, umfasst Folgendes:
- Barrierefreiheit
- Browserübergreifende Kompatibilität
- Sicherheit
- Leistung
- Progressive Web-Apps (PWAs)
- Andere häufige Probleme bei der Webentwicklung
Das Webhint-Experiment zeigt Webhint-Feedback im Tool Probleme an. Wählen Sie ein Problem aus, um Dokumentation zur Lösung und eine Liste der betroffenen Ressourcen auf Ihrer Website anzuzeigen. Wählen Sie einen Ressourcenlink aus, um das entsprechende Tool wie Netzwerk, Quellen oder Elemente zu öffnen:
Siehe auch:
Status:
- Dieses Kontrollkästchen ist in Microsoft Edge Canary 131 vorhanden.
- Dieses Kontrollkästchen ist in Microsoft Edge Stable 129 vorhanden.
Anzeigen von Problemen in Elementen
Zeigt Syntaxfehler als wellenförmige Unterstreichungen unter DOM-Knoten im Tool Elemente an.
Siehe auch:
- Wavy unterstreicht Codeprobleme und Verbesserungen im Elementtool in Neuerungen in DevTools (Microsoft Edge 91).
Status:
- Dieses Kontrollkästchen ist in Microsoft Edge Canary 131 vorhanden.
- Dieses Kontrollkästchen ist in Microsoft Edge Stable 129 vorhanden.
Quelldateien in Visual Studio Code öffnen
Das Experiment Open Source-Dateien in Visual Studio Code ersetzt den Code-Editor des Tools Quellen durch Visual Studio Code zum Bearbeiten lokaler Dateien. Wenn Sie dieses Experiment aktivieren, erkennt die Entwicklertools, wenn Sie eine lokale Datei bearbeiten, und fordert Sie auf, einen Ordner auszuwählen, der als Arbeitsbereich verwendet werden soll.
Wenn Sie einen Ordner auswählen, der als Arbeitsbereich verwendet werden soll, wird die Datei in Visual Studio Code durch Auswählen eines beliebigen Links zu einer Datei in DevTools geöffnet. In früheren Versionen von Microsoft Edge wurde mit dieser Aktion die Datei im Code-Editor des Tools Quellen in DevTools geöffnet.
Alle Änderungen, die Sie in DevTools vornehmen, ändern jetzt die Datei auf der Festplatte und werden live mit Visual Studio Code synchronisiert.
Siehe auch:
- Öffnen von Quelldateien in Visual Studio Code : Einrichten Ihres Arbeitsbereichs.
Status:
- Dieses Kontrollkästchen ist in Microsoft Edge Canary 131 vorhanden.
- Dieses Kontrollkästchen ist in Microsoft Edge Stable 129 vorhanden.
Aktivieren der adaptiven CPU-Drosselung
neu ab Microsoft Edge 114
Aktiviert die adaptive CPU-Drosselung.
Siehe auch:
- Drosseln sie die CPU während der Aufzeichnung in der Referenz zu Leistungsfeatures.
Status:
- Dieses Kontrollkästchen ist in Microsoft Edge Canary 131 vorhanden.
- Dieses Kontrollkästchen ist in Microsoft Edge Stable 129 vorhanden.
Aktivieren von CSS Copilot
Ermöglicht die Verwendung von Copilot in der Microsoft Edge-Randleiste, um HTML-Elemente und CSS-Stile zu erläutern, damit Sie ein bestimmtes Element oder eine Formatregel besser verstehen können, die im Tool Elemente angezeigt wird. Um Copilot nach einem Element oder einer Stilregel zu fragen, klicken Sie daneben auf die Schaltfläche Copilot , und stellen Sie dann Folgefragen.
Dieses Experiment ist nicht verfügbar, wenn die Randleiste deaktiviert ist.
Siehe auch:
Status:
- Dieses Kontrollkästchen ist in Microsoft Edge Canary 131 vorhanden.
- Dieses Kontrollkästchen ist in Microsoft Edge Stable 129 vorhanden.
Liveheapprofil
Steuert, ob das Heapprofil live aktualisiert werden soll.
Siehe auch:
Status:
- Dieses Kontrollkästchen ist in Microsoft Edge Canary 131 vorhanden.
- Dieses Kontrollkästchen ist in Microsoft Edge Stable 129 vorhanden.
Sampling heap profiler Zeitleiste
Steuert, ob der Samplingheap-Profiler Zeitleiste im Leistungstool angezeigt werden soll.
Siehe auch:
- Einführung in das Leistungstool
- Aufzeichnen von Heapmomentaufnahmen mithilfe des Speichertools ("Profilerstellungstyp "Heap Momentaufnahme")
Status:
- Dieses Kontrollkästchen ist in Microsoft Edge Canary 131 vorhanden.
- Dieses Kontrollkästchen ist in Microsoft Edge Stable 129 vorhanden.
Leistungsbereich: Nachverfolgung von Ungültigen
Fügt auf der Registerkarte Zusammenfassung des Leistungstools einen Abschnitt Invalidations für Die Neuberechnung von Formatvorlagenereignissen hinzu. Der Abschnitt Invalidations enthält Informationen zur Grundursache für ein Recalculate Style-Ereignis , das bei der Untersuchung von Zeitintensiven Recalculate Style-Ereignissen , die Leistungsprobleme verursachen, hilfreich sein kann.
Im Abschnitt Invalidations werden die DOM-Knoten aufgelistet, die aufgrund einer Änderung auf der Webseite, z. B. einer DOM-Mutation, für ungültig erklärt wurden und die die Browser-Engine während des Recalculate Style-Ereignisses neu formatieren musste.
Siehe auch:
Status:
- Dieses Kontrollkästchen ist in Microsoft Edge Canary 131 vorhanden.
- Dieses Kontrollkästchen ist in Microsoft Edge Stable 129 vorhanden.
Leistungsbereich: Alle Ereignisse anzeigen
Steuert, ob alle Ereignisse im Leistungstool angezeigt werden sollen.
Siehe auch:
Status:
- Dieses Kontrollkästchen ist in Microsoft Edge Canary 131 vorhanden.
- Dieses Kontrollkästchen ist in Microsoft Edge Stable 129 vorhanden.
Leistungsbereich: V8-Laufzeitaufrufstatistiken
Steuert, ob V8-Laufzeitaufrufstatistiken im Leistungstool angezeigt werden sollen. V8 ist die JavaScript-Engine, die von Microsoft Edge verwendet wird.
Siehe auch:
Status:
- Dieses Kontrollkästchen ist in Microsoft Edge Canary 131 vorhanden.
- Dieses Kontrollkästchen ist in Microsoft Edge Stable 129 vorhanden.
Leistungsbereich: Aktivieren des Sammelns erweiterter Ablaufverfolgungen
neu ab Microsoft Edge 128
Mit diesem Experiment erfasst das Leistungstool neu hinzugefügte Ablaufverfolgungen, um erweiterte Ablaufverfolgungen v2 zu unterstützen. Dieses Feature wird im projekt Upstream Chromium implementiert. Dieses Experiment wirkt sich nicht auf die Funktionen von Microsoft Edge zum Erfassen erweiterter Ablaufverfolgungen aus und wirkt sich nicht auf die Benutzererfahrung von DevTools aus.
Status:
- Dieses Kontrollkästchen ist in Microsoft Edge Canary 131 vorhanden.
- Dieses Kontrollkästchen ist in Microsoft Edge Stable 129 vorhanden.
Siehe auch:
- Gemeinsame Nutzung verbesserter Leistungs- und Speicherablaufverfolgungen
- Referenz zu Leistungsfeatures
- Referenz zu Leistungsaufzeichnungsereignissen
Leistungsbereich: Aktivieren des Sammelns von Quelltext für kompilierte Skripts
neu ab Microsoft Edge 128
Speichert im Leistungstool beim Exportieren der Ablaufverfolgungsdatei den Quellcode der kompilierten Skripts in der Ablaufverfolgungsdatei.
Mit diesem Experiment zeichnet das Leistungstool skriptquelltext in Ablaufverfolgungen auf. Dieses Feature wird im projekt Upstream Chromium implementiert.
Status:
- Dieses Kontrollkästchen ist in Microsoft Edge Canary 131 vorhanden.
- Dieses Kontrollkästchen ist in Microsoft Edge Stable 129 vorhanden.
Siehe auch:
- Gemeinsame Nutzung verbesserter Leistungs- und Speicherablaufverfolgungen
- Referenz zu Leistungsfeatures
- Referenz zu Leistungsaufzeichnungsereignissen
Leistungsbereich: Aktivieren des Debugmodus (Ablaufverfolgungsereignisdetails usw.)
neu ab Microsoft Edge 128
Fügt der Registerkarte Zusammenfassung des Leistungstools einen Abschnitt "Ablaufverfolgungsereignis" hinzu. Der Abschnitt Ablaufverfolgungsereignis wird angezeigt, wenn Sie ein Ereignis in einer aufgezeichneten Leistungsablaufverfolgung auswählen. Im Abschnitt Ablaufverfolgungsereignis werden Debuginformationen zum ausgewählten Ablaufverfolgungsereignis angezeigt, z. B. Name und Dauer.
Status:
- Dieses Kontrollkästchen ist in Microsoft Edge Canary 131 vorhanden.
- Dieses Kontrollkästchen ist in Microsoft Edge Stable 129 vorhanden.
Siehe auch:
- Gemeinsame Nutzung verbesserter Leistungs- und Speicherablaufverfolgungen
- Referenz zu Leistungsfeatures
- Referenz zu Leistungsaufzeichnungsereignissen
Aktivieren von Instrumentierungshaltepunkten
Gibt an, ob an Testhaltepunkten angehalten werden soll. Dieses Experiment macht Breakpoints zuverlässiger.
Siehe auch:
- Aktivieren der Synchronisierung an Instrumentierungshaltepunkten
- Wenn Quelldateien zum ersten Mal geladen werden, werden Haltepunkte möglicherweise nicht ausgelöst.
Status:
- Dieses Kontrollkästchen ist in Microsoft Edge Canary 131 vorhanden.
- Dieses Kontrollkästchen ist in Microsoft Edge Stable 129 vorhanden.
Verwenden von Bereichsinformationen aus Quellzuordnungen
neu ab Microsoft Edge 118
Gibt an, ob Bereichsinformationen aus Quellzuordnungen verwendet werden sollen.
Siehe auch:
- Zuordnen des verarbeiteten Codes zu Ihrem ursprünglichen Quellcode zum Debuggen
- Zuordnen von minimiertem Code zu Ihrem Quellcode, um lesbaren Code in der Übersicht über das Quellentool anzuzeigen.
Status:
- Dieses Kontrollkästchen ist in Microsoft Edge Canary 131 vorhanden.
- Dieses Kontrollkästchen ist in Microsoft Edge Stable 129 vorhanden.
Bereich "Spekulatives Laden aktivieren" im Bereich "Anwendung"
neu ab Microsoft Edge 121
Fügt im Abschnitt Hintergrunddienste des Anwendungstools eine Seite "Spekulatives Laden" hinzu, einschließlich einer Seite "Regeln" und einer Seite "Spekulationen":
Die Spekulationsregeln-API kann verwendet werden, um Microsoft Edge programmgesteuert anzuweisen, bestimmte Seiten vorab zu rendern. Dies ist nützlich, da vorab gerenderte Seiten fast sofort zu navigiert werden können. Der Browser rendert auf ausgeblendete Weise die nächsten Seiten, zu denen ein Benutzer wahrscheinlich navigieren wird, vorab, während sich der Benutzer noch auf der aktuellen Seite befindet.
Auf der Seite Spekulative Ladevorgänge werden die Spekulationsregeln aufgelistet, die der Webautor auf der Webseite definiert hat. Die Seite enthält Debuginformationen, die zeigen, ob eine Regel tatsächlich verwendet wurde, und zeigt an, ob eine bestimmte Seite vorab gerendert wurde.
Die Seite Regeln enthält Spalten:
- Regelsatz
- Status
Die Seite Spekulationen enthält Spalten:
- URL
- Aktion
- Regelsatz
- Status
Siehe auch:
Status:
- Dieses Kontrollkästchen ist in Microsoft Edge Canary 131 nicht vorhanden.
- Dieses Kontrollkästchen ist in Microsoft Edge Stable 129 vorhanden.
Leistungsbereich: Aktivieren von Anmerkungen
neu ab Microsoft Edge Canary 129
Aktiviert Anmerkungen im Leistungstool.
Siehe auch:
Status:
- Dieses Kontrollkästchen ist in Microsoft Edge Canary 131 vorhanden.
- Dieses Kontrollkästchen ist in Microsoft Edge Stable 129 vorhanden.
Leistungsbereich: Aktivieren von Leistungserkenntnissen
neu ab Microsoft Edge Stable 129
Fügt im Leistungstool die Registerkarte Insights-Randleiste hinzu, wenn ein aufgezeichnetes Leistungsprofil angezeigt wird. Die Registerkarte "Insights "-Randleiste enthält nützliche Informationen zum Profil, z. B. die verschiedenen Phasen des größten inhaltsreichen Malens und die Liste der render blockierenden Anforderungen.
Siehe auch:
Status:
- Dieses Kontrollkästchen ist in Microsoft Edge Canary 131 vorhanden.
- Dieses Kontrollkästchen ist in Microsoft Edge Stable 129 vorhanden.
Leistungsbereich: Neue Zusammenfassungsdetailsansicht für Layoutverschiebungsereignisse aktivieren
neu ab Microsoft Edge Canary 131
Zeigt eine Layoutverschiebungsspur im Hauptabschnitt des Leistungstools an, wenn ein aufgezeichnetes Profil angezeigt wird. Die Spur Layoutverschiebungen zeigt Informationen dazu an, wann Layoutverschiebungen auftreten und welche Elemente verschoben werden. Unerwartete Layoutverschiebungen können sich negativ auf die Benutzererfahrung auf einer Webseite auswirken.
Siehe auch:
Status:
- Dieses Kontrollkästchen ist in Microsoft Edge Canary 131 vorhanden.
- Dieses Kontrollkästchen ist in Microsoft Edge Stable 129 nicht vorhanden.