Freigeben über

Experimentelle Features in Microsoft Edge DevTools

  • Artikel

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:

In Microsoft Edge Stable 129 standardmäßig aktiviert:

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:

  1. 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.

  2. Klicken Sie in DevTools auf der Symbolleiste Standard auf die Schaltfläche DevTools anpassen und steuern (DevTools-Symbol anpassen und steuern) und dann auf die Schaltfläche Einstellungen (Symbol Einstellungen). Oder drücken Sie UMSCHALT+?.

  3. Wählen Sie auf der linken Seite des Bereichs Einstellungen die Seite Experimente aus:

    Seite

  4. Aktivieren oder deaktivieren Sie das Kontrollkästchen für ein Experiment. Einige Experimente sind standardmäßig ausgewählt.

  5. Klicken Sie in der oberen rechten Ecke der DevTools-Einstellungen auf Schließen (Das Symbol Schließen in den DevTools-Einstellungen>).

  6. 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:

  1. 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.

  2. Klicken Sie in DevTools auf der Symbolleiste Standard auf die Schaltfläche Einstellungen (Symbol Einstellungen). Oder drücken Sie UMSCHALT+?. Der Bereich Einstellungen wird geöffnet, wobei die Seite Einstellungen ausgewählt ist.

  3. Klicken Sie unten auf der Seite Einstellungen auf die Schaltfläche Standardwerte wiederherstellen und aktualisieren, und klicken Sie dann auf Schließen (Das Symbol Schließen in den DevTools-Einstellungen>).

Filtern der Experimente

Sie können die experimentellen Features nach Text filtern, der im Titel enthalten ist.

  1. 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.

  2. Klicken Sie in DevTools auf der Symbolleiste Standard auf die Schaltfläche Einstellungen (Symbol Einstellungen). Oder drücken Sie UMSCHALT+?. Der Bereich Einstellungen wird geöffnet, wobei die Seite Einstellungen ausgewählt ist.

  3. Wählen Sie auf der linken Seite des Bereichs Einstellungen die Seite Experimente aus.

  4. 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.

  5. 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.

Siehe auch:

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 :

Registerkarte

Nachdem Sie das Experiment aktiviert haben, können Sie es wie folgt testen:

  1. Ö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.
  2. Erstellen Sie auf der gerenderten Demoseite ein neues Todo-Element.
  3. 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.
  4. 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 Tool

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 :

  1. Aktivieren Sie dieses Protokollmonitor-Kontrollkästchen wie oben unter Aktivieren oder Deaktivieren eines Experiments beschrieben.

  2. 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:

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:

Das Quellentool mit Einzugsmarkierungen

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:

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:

Das Elementtool ohne die Schaltfläche

Wenn dieses Kontrollkästchen Experiment aktiviert ist, verfügt das Tool Elemente über die Schaltfläche:

Das Elementtool mit der Schaltfläche

Die Ansicht "Barrierefreiheitsstruktur" im Tool "Elemente ":

Die Ansicht

Siehe auch:

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

  1. 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.

  2. 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 (Symbol weitere Registerkarten) oder auf die Schaltfläche Weitere Tools (Weitere Tools Symbol).

  3. Wählen Sie auf der Registerkarte Formatvorlagen das Symbol Schriftart Editor aus.

    Der Visuelle Editor bereich

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.

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:

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:

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:

  1. 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.

  2. 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:

  1. Öffnen Sie eine .js Datei.

  2. Legen Sie einen Haltepunkt für eine Codezeile in der .js Datei fest.

  3. 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:

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 deaktiviertem Kontrollkästchen

Filterleiste mit diesem Kontrollkästchen:

Filterleiste mit aktiviertem Kontrollkästchen

Siehe auch:

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.

Das AutoAusfüllen-Tool

Siehe auch:

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:

Pfeile, die Dispatchereignisse mit Handlerereignissen verknüpfen

Siehe auch:

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:

Webhint-Feedback 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.

Anzeigen von Problemen in Elementen

Zeigt Syntaxfehler als wellenförmige Unterstreichungen unter DOM-Knoten im Tool Elemente an.

Siehe auch:

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.

Durch Auswählen eines Dateilinks im Formatvorlagentool wird die Datei in Visual Studio Code 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:

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:

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.

Copilot-Symbol im Tool

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:

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:

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:

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:

Aktivieren von Instrumentierungshaltepunkten

Gibt an, ob an Testhaltepunkten angehalten werden soll. Dieses Experiment macht Breakpoints zuverlässiger.

Siehe auch:

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:

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":

Seite

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.