Freigeben über


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.

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

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 144 vorhanden.
  • Dieses Kontrollkästchen ist in Microsoft Edge Stable 142 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 144 vorhanden.
  • Dieses Kontrollkästchen ist in Microsoft Edge Stable 142 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 144 vorhanden.
  • Dieses Kontrollkästchen ist in Microsoft Edge Stable 142 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 144 vorhanden.
  • Dieses Kontrollkästchen ist in Microsoft Edge Stable 142 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 144 vorhanden.
  • Dieses Kontrollkästchen ist in Microsoft Edge Stable 142 vorhanden.

Aktivieren des Editors für neue Schriftarten auf der Registerkarte "Formatvorlagen"

Sie können den visuellen Schriftarten-Editor verwenden, um Schriftarten zu bearbeiten. Verwenden Sie es, um Schriftarten und Schriftartmerkmale zu definieren. Mit dem visuellen Schriftarten-Editor können Sie die folgenden Schritte ausführen:

  • 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 den visuellen Schriftarten-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 Hauptsymbolleiste 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 Schriftarten-Editor aus.

    Der Visuelle Schriftart-Editor-Bereich ist hervorgehoben.

Einige Browserkanäle verfügen im Bereich Formatvorlagen über das Kontrollkästchen Neues Tool für schriftarten-Editor aktivieren.

Siehe auch:

Status:

  • Dieses Kontrollkästchen ist in Microsoft Edge Canary 144 vorhanden.
  • Dieses Kontrollkästchen ist in Microsoft Edge Stable 142 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 144 vorhanden.
  • Dieses Kontrollkästchen ist in Microsoft Edge Stable 142 vorhanden.

Aktiviert experimentelle Cookiefeatures.

Siehe auch:

Status:

  • Dieses Kontrollkästchen ist in Microsoft Edge Canary 144 vorhanden.
  • Dieses Kontrollkästchen ist in Microsoft Edge Stable 142 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 144 vorhanden.
  • Dieses Kontrollkästchen ist in Microsoft Edge Stable 142 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 144 vorhanden.
  • Dieses Kontrollkästchen ist in Microsoft Edge Stable 142 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 144 vorhanden.
  • Dieses Kontrollkästchen ist in Microsoft Edge Stable 142 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 144 vorhanden.
  • Dieses Kontrollkästchen ist in Microsoft Edge Stable 142 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 144 vorhanden.
  • Dieses Kontrollkästchen ist in Microsoft Edge Stable 142 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 144 vorhanden.
  • Dieses Kontrollkästchen ist in Microsoft Edge Stable 142 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 144 vorhanden.
  • Dieses Kontrollkästchen ist in Microsoft Edge Stable 142 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 144 vorhanden.
  • Dieses Kontrollkästchen ist in Microsoft Edge Stable 142 vorhanden.

Liveheapprofil

Steuert, ob das Heapprofil live aktualisiert werden soll.

Siehe auch:

Status:

  • Dieses Kontrollkästchen ist in Microsoft Edge Canary 144 vorhanden.
  • Dieses Kontrollkästchen ist in Microsoft Edge Stable 142 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 144 vorhanden.
  • Dieses Kontrollkästchen ist in Microsoft Edge Stable 142 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 144 vorhanden.
  • Dieses Kontrollkästchen ist in Microsoft Edge Stable 142 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 144 vorhanden.
  • Dieses Kontrollkästchen ist in Microsoft Edge Stable 142 vorhanden.

Leistungsbereich: V8-Laufzeitaufrufstatistiken

Zeigt im Leistungstool V8-JavaScript-Browsermodul-Laufzeitaufrufstatistiken an.

Status:

  • Dieses Kontrollkästchen ist in Microsoft Edge Canary 144 vorhanden.
  • Dieses Kontrollkästchen ist in Microsoft Edge Stable 142 vorhanden.

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 144 vorhanden.
  • Dieses Kontrollkästchen ist in Microsoft Edge Stable 142 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 144 vorhanden.
  • Dieses Kontrollkästchen ist in Microsoft Edge Stable 142 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 144 vorhanden.
  • Dieses Kontrollkästchen ist in Microsoft Edge Stable 142 vorhanden.

Weitere Informationen