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 125 standardmäßig aktiviert:

• Auflösen von Variablennamen in Ausdrücken mithilfe von Quellzuordnungen
• Festlegen aller Haltepunkte beim Start
• Aktivieren der Hintergrundseitenauswahl (z. B. zum Vorabrendern des Debuggens)
• Bereich "AutoAusfüllen"
• Enable webhint
• Anzeigen von Problemen in Elementen
• Quelldateien in Visual Studio Code öffnen
• Aktivieren des Bereichs "Spekulatives Laden" im Anwendungsbereich

In Microsoft Edge Stable 123 standardmäßig aktiviert:

• Auflösen von Variablennamen in Ausdrücken mithilfe von Quellzuordnungen
• Festlegen aller Haltepunkte beim Start
• Aktivieren der Hintergrundseitenauswahl (z. B. zum Vorabrendern des Debuggens)
• Warnung zu Self-XSS beim Einfügen von Code anzeigen
• Enable webhint
• Anzeigen von Problemen in Elementen
• Quelldateien in Visual Studio Code öffnen
• Anzeigen der ergebnisse von console.profile() im Leistungsbereich für Node.js
• Aktivieren des Bereichs "Spekulatives Laden" im Anwendungsbereich

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 () und dann auf die Schaltfläche Einstellungen (). Oder drücken Sie UMSCHALT+?.

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

   

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

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 (). 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 ().

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 (). 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:

• Anwenden eines Farbdesigns auf DevTools

Status:

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

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:

• Erste Schritte beim Anzeigen und Ändern des DOM

Status:

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

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:

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

• Aufzeichnen von Heap-Momentaufnahmen mithilfe des Speichertools

Status:

• Dieses Kontrollkästchen ist in Microsoft Edge Canary 125 vorhanden.
• Dieses Kontrollkästchen ist in Microsoft Edge Stable 123 vorhanden.

Behandeln Sie in Heapmomentaufnahmen die Größe des Sicherungsspeichers als Teil des enthaltenden Objekts.

neu ab Microsoft Edge 124

Konfiguriert die Spalte Flache Größe im Speichertool , um die gesamte Größe von Objekten zu melden, einschließlich der Größe des Sicherungsspeichers des Objekts. Wenn dieses Experiment aktiviert ist und Sie einen neuen Heap Momentaufnahme, enthält die Spalte Flache Größe jetzt die gesamte Größe der Objekte:

Standardmäßig enthält die Spalte Flache Größe im Speichertool nur die Größe des Objekts selbst. Die flache Größe ist die Größe des JavaScript-Heaps, der direkt von einem -Objekt gehalten wird. Die flache Größe eines Objekts ist normalerweise klein, da ein JavaScript-Objekt häufig nur seine Beschreibung des Objekts und nicht die Werte im direkt gehaltenen Speicher des Objekts speichert. Die meisten JavaScript-Objekte speichern ihre Werte in einem Sicherungsspeicher , der sich an anderer Stelle im JavaScript-Heap befindet, und machen nur ein kleines Wrapperobjekt auf dem Teil des JavaScript-Heaps verfügbar, der sich direkt im Besitz des Objekts befindet. JavaScript-Instanzen Array speichern beispielsweise den Inhalt des Arrays in einem Sicherungsspeicher, bei dem es sich um einen separaten Speicherort handelt, der nicht in der flachen Größe des Arrays enthalten ist.

Siehe auch:

• Konfigurieren Sie die Spalte Flache Größe mithilfe des Speichertools so, dass die Größe eines gesamten Objekts in Aufzeichnungsheapmomentaufnahmen eingeschlossen wird.

Status:

• Dieses Kontrollkästchen ist in Microsoft Edge Canary 125 vorhanden.
• Dieses Kontrollkästchen ist in Microsoft Edge Stable 123 vorhanden.

Vorübergehendes Aktivieren von JavaScript Profiler

neu ab Microsoft Edge 114

Aktiviert vorübergehend das JavaScript Profiler-Tool (Registerkarte) in DevTools. Das JavaScript Profiler-Tool ist veraltet. Verwenden Sie zum Aufzeichnen von JavaScript-CPU-Profilen stattdessen das Leistungstool .

Siehe auch:

• Einführung in das Leistungstool

Status:

• Dieses Kontrollkästchen ist in Microsoft Edge Canary 125 nicht vorhanden.
• Dieses Kontrollkästchen ist in Microsoft Edge Stable 123 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:

• Übersicht über das Tool „Quellen“

Status:

• Dieses Kontrollkästchen ist in Microsoft Edge Canary 125 vorhanden.
• Dieses Kontrollkästchen ist in Microsoft Edge Stable 123 vorhanden.

Auflösen von Variablennamen in Ausdrücken mithilfe von Quellzuordnungen

Verwendet Quellzuordnungen, um beim Auswerten von Ausdrücken automatisch ursprüngliche Variablennamen zu verknemten Variablennamen zuzuordnen.

Dieses Kontrollkästchen wirkt sich auf die Konsole und die Registerkarte Seitenleiste überwachen im Tool Quellen aus.

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

Festlegen aller Haltepunkte beim Start

Legt alle möglichen definierten Haltepunkte beim Start fest.

Siehe auch:

• Anhalten von Code mit Haltepunkten

Status:

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

Aktivieren Sie das neue Tool schriftarten Editor im Bereich Formatvorlagen.

Weitere Informationen finden Sie unter Aktivieren des Tools für schriftarten Editor im Bereich Formatvorlagen unten.

Aktivieren des Tools "Schriftarten Editor" 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 () oder auf die Schaltfläche Weitere Tools ().

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

• Bearbeiten von CSS-Schriftschnitten und -Einstellungen im Bereich "Formatvorlagen"

Status:

• Dieses Kontrollkästchen ist in Microsoft Edge Canary 125 vorhanden.
• Dieses Kontrollkästchen ist in Microsoft Edge Stable 123 vorhanden.

Aktivieren der automatischen Berichterstellung für Kontrastprobleme über den Bereich "Probleme"

Aktiviert die automatische Berichterstellung für Kontrastprobleme im Problemtool .

Siehe auch:

• Suchen und Beheben von Problemen mit dem Problemtool

Status:

• Dieses Kontrollkästchen ist in Microsoft Edge Canary 125 vorhanden.
• Dieses Kontrollkästchen ist in Microsoft Edge Stable 123 vorhanden.

Aktivieren experimenteller Cookiefeatures

Aktiviert experimentelle Cookiefeatures.

Siehe auch:

• Anzeigen, Bearbeiten und Löschen von Cookies

Status:

• Dieses Kontrollkästchen ist in Microsoft Edge Canary 125 vorhanden.
• Dieses Kontrollkästchen ist in Microsoft Edge Stable 123 vorhanden.

Synchronisieren von CSS-Änderungen im Bereich "Formatvorlagen"

Gibt an, ob CSS-Änderungen auf der Registerkarte Formatvorlagen im Tool Elemente synchronisiert werden sollen.

Siehe auch:

• Bearbeiten von CSS-Schriftschnitten und -Einstellungen im Bereich "Formatvorlagen"

Status:

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

• Untersuchen, Bearbeiten und Debuggen von HTML und CSS mit dem Elemente-Tool

Status:

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

Ausblenden von nicht aufgelisteten Code in der Quellenstrukturansicht

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

Hervorheben wichtiger DOM-Eigenschaften im Objekteigenschaften-Viewer

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:

• Untersuchen, Bearbeiten und Debuggen von HTML und CSS mit dem Elemente-Tool

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:

• Übersicht über das Tool „Quellen“

Status:

• Dieses Kontrollkästchen ist in Microsoft Edge Canary 125 vorhanden.
• Dieses Kontrollkästchen ist in Microsoft Edge Stable 123 vorhanden.

Aktivieren der Hintergrundseitenauswahl (z. B. zum Vorabrendern des Debuggens)

neu ab Microsoft Edge 114

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

Warnung zu Self-XSS beim Einfügen von Code anzeigen

neu ab Microsoft Edge 117

Zeigt eine Warnung zur websiteübergreifenden Selbstskripterstellung an, wenn Code in die Konsole eingefügt wird. Wenn dieses Kontrollkästchen aktiviert ist, wird beim ersten Versuch, Code in das Konsolentool einzufügen, eine Warnmeldung angezeigt:

"Warnung: Fügen Sie keinen Code ein, den Sie nicht verstehen, oder haben Sie sich nicht selbst in die DevTools-Konsole eingecheckt. Dies könnte es Angreifern ermöglichen, Ihre Identität zu stehlen oder die Kontrolle über Ihren Computer zu übernehmen. Geben Sie unten 'Allow pasteing' (Einfügen zulassen) ein, um das Einfügen zuzulassen."

Nachdem Sie in der Konsole eingegeben haben allow pasting , können Sie Code in der aktuellen DevTools-Sitzung und in zukünftigen Sitzungen einfügen.

Siehe auch:

• Self-XSS bei Wikipedia.

Status:

• Dieses Kontrollkästchen ist in Microsoft Edge Canary 125 nicht vorhanden.
• Dieses Kontrollkästchen ist in Microsoft Edge Stable 123 vorhanden.

Neugestaltung der Filterleiste im Netzwerkbereich

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

AutoAusfüllen-Ansicht aktivieren

neu ab Microsoft Edge 121

Diese Kontrollkästchenbezeichnung wurde von Ansicht "AutoAusfüllen aktivieren " in "AutoAusfüllen" geändert. Weitere Informationen finden Sie weiter unten im Bereich "AutoAusfüllen".

Status:

• Dieses Kontrollkästchen ist in Microsoft Edge Canary 125 nicht vorhanden.
• Dieses Kontrollkästchen ist in Microsoft Edge Stable 123 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 125 vorhanden.
• Dieses Kontrollkästchen ist in Microsoft Edge Stable 123 als AutoAusfüllen-Ansicht aktivieren vorhanden.

Zeitachse: PostMessage-Dispatch- 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:

• Referenz zu Leistungsfeatures
• Referenz zu Leistungsaufzeichnungsereignissen
• Demo zu postMessage-Ablaufverfolgungsereignissen (gerendert)
• Demo zu postMessage-Ablaufverfolgungsereignissen (Quellcode)

Status:

• Dieses Kontrollkästchen ist in Microsoft Edge Canary 125 vorhanden.
• Dieses Kontrollkästchen ist in Microsoft Edge Stable 123 nicht vorhanden.

Aktivieren des Speicherns und Ladens der Ablaufverfolgung mit Anmerkungen im Leistungsbereich

neu ab Microsoft Edge 125

Fügt die Möglichkeit hinzu, die folgenden Änderungen, die an Ablaufverfolgungsdateien im Leistungstool vorgenommen wurden, beizubehalten und beim Importieren von Ablaufverfolgungen erneut zu übernehmen:

• Änderungen, die mithilfe der Breadcrumbs vorgenommen werden. Mit diesem Feature können Sie die relevanteren Teile einer Ablaufverfolgung zuschneiden und sich darauf konzentrieren. Weitere Informationen finden Sie unter Breadcrumbs auf der Zeitachse in Neuigkeiten in DevTools (Chrome 122).

• Änderungen, die durch Klicken mit der rechten Maustaste auf einen Titel vorgenommen werden. Mit diesem Feature können Sie überflüssige oder irrelevante Einträge einer Spur zusammenführen und ausblenden und so die Flammendiagramme und Bäume bereinigen. Weitere Informationen finden Sie unter Ausblenden von Funktionen und deren untergeordneten Elementen im Flammendiagramm in Neuigkeiten in DevTools (Chrome 124).

Siehe auch:

• Einführung in das Leistungstool

Status:

• Dieses Kontrollkästchen ist in Microsoft Edge Canary 125 vorhanden.
• Dieses Kontrollkästchen ist in Microsoft Edge Stable 123 nicht vorhanden.

Protokollieren von nicht abgefangenen DevTools-Ausnahmen in der Konsole

Steuert, ob nicht abgefangene DevTools-Ausnahmen im Konsolentool protokolliert werden sollen.

Siehe auch:

• Konsole – Übersicht

Status:

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

• Suchen und Beheben von Problemen mit dem Problemtool

Status:

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

Liste für JavaScript-Frames auf der Zeitachse ignorieren

Gibt an, ob Code, der in der Liste Ignorieren in JavaScript-Frames enthalten ist, im Leistungstool enthalten sein soll.

Siehe auch:

• Einführung in das Leistungstool
• Hinzufügen von Inhaltsskripts zur Liste "Ignorieren"
• Erweitertes Ignorieren der Auflistung
• Verbesserte Einstellung "Liste ignorieren"

Status:

• Dieses Kontrollkästchen ist in Microsoft Edge Canary 125 vorhanden.
• Dieses Kontrollkästchen ist in Microsoft Edge Stable 123 vorhanden.

Liveheapprofil

Steuert, ob das Heapprofil live aktualisiert werden soll.

Siehe auch:

• Aufzeichnen von Heap-Momentaufnahmen mithilfe des Speichertools

Status:

• Dieses Kontrollkästchen ist in Microsoft Edge Canary 125 vorhanden.
• Dieses Kontrollkästchen ist in Microsoft Edge Stable 123 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 Heap-Momentaufnahmen mithilfe des Speichertools

Status:

• Dieses Kontrollkästchen ist in Microsoft Edge Canary 125 vorhanden.
• Dieses Kontrollkästchen ist in Microsoft Edge Stable 123 vorhanden.

Zeitachse: Nachverfolgung der Ungültigkeit

Steuert, ob die Nachverfolgung der Ungültigkeit im Leistungstool angezeigt werden soll.

Siehe auch:

• Einführung in das Leistungstool

Status:

• Dieses Kontrollkästchen ist in Microsoft Edge Canary 125 vorhanden.
• Dieses Kontrollkästchen ist in Microsoft Edge Stable 123 vorhanden.

Zeitachse: Alle Ereignisse anzeigen

Steuert, ob alle Ereignisse im Leistungstool angezeigt werden sollen.

Siehe auch:

• Einführung in das Leistungstool

Status:

• Dieses Kontrollkästchen ist in Microsoft Edge Canary 125 vorhanden.
• Dieses Kontrollkästchen ist in Microsoft Edge Stable 123 vorhanden.

Zeitachse: V8-Laufzeitaufrufstatistiken auf der Zeitachse

Steuert, ob V8-Laufzeitaufrufstatistiken im Leistungstool angezeigt werden sollen. V8 ist die JavaScript-Engine, die von Microsoft Edge verwendet wird.

Siehe auch:

• Einführung in das Leistungstool

Status:

• Dieses Kontrollkästchen ist in Microsoft Edge Canary 125 vorhanden.
• Dieses Kontrollkästchen ist in Microsoft Edge Stable 123 vorhanden.

Anzeigen der ergebnisse von console.profile() im Leistungsbereich für Node.js

neu ab Microsoft Edge 109

Zeigt console.profile() Ergebnisse im Leistungstool für Node.js an.

console.profile() kann in der DevTools-Konsole (oder in Ihrem Code) verwendet werden, um ein JavaScript-Profil zu starten. Anschließend können Sie es mit console.profileEnd() beenden. Anschließend können Sie Ihre Profilaufzeichnung im JavaScript Profiler-Tool anzeigen.

Dies ist eine programmgesteuerte Methode zum Aufzeichnen der JavaScript-Ausführung, die in bestimmten Leistungsdebuggensituationen nützlich sein kann.

Wenn DevTools zum Debuggen von Prozessen verwendet wird, die in Node.js ausgeführt werden, stellt dieses Experiment alles, was console.profile generiert wird, für das Leistungstool zur Verfügung.

Siehe auch:

• JavaScript-Profilertool

Status:

• Dieses Kontrollkästchen ist in Microsoft Edge Canary 125 nicht vorhanden.
• Dieses Kontrollkästchen ist in Microsoft Edge Stable 123 vorhanden.

Zeitachse: Aktivieren sie das Feature für die Nachverfolgungskonfiguration, das eine Spur im Flammendiagramm neu anordnen oder ausblenden kann.

neu ab Microsoft Edge 125

Aktiviert das Feature für die Nachverfolgungskonfiguration, mit dem Sie auswählen können, welche Spuren im Leistungstool angezeigt werden und in welcher Reihenfolge sie angezeigt werden:

So konfigurieren Sie Spuren:

1. Aktivieren Sie dieses Experiment.
2. Wechseln Sie zu einer Webseite in einem neuen Fenster oder einer neuen Registerkarte, z https://microsoftedge.github.io/Demos/demo-to-do/. B. .
3. Klicken Sie im Leistungstool oben links auf die Schaltfläche Aufzeichnen , um eine neue Leistungsaufzeichnung zu starten.
4. Interaktion mit der Webseite; Fügen Sie beispielsweise in der Todo-Demo eine neue Aufgabe hinzu.
5. Beenden Sie die Aufzeichnung.
6. Zeigen Sie im Leistungstool auf einen Titel, z. B. Netzwerk, Interaktionen oder Main. Die Schaltfläche "Konfiguration nachverfolgen " (Stiftsymbol) wird links neben dem darauf gezeigten Titel angezeigt.
7. Klicken Sie auf die Schaltfläche Konfiguration nachverfolgen (Stiftsymbol). Der Bildschirm für die Nachverfolgungskonfiguration wird geöffnet.
8. Um die Reihenfolge der Spuren zu ändern, klicken Sie auf dem Bildschirm für die Titelkonfiguration auf ein Nach-oben- oder nach-unten-Pfeilsymbol. Wenn Sie einen Titel ein- oder ausblenden möchten, klicken Sie auf das Augensymbol eines Titels, um ihn umzuschalten.
9. Klicken Sie rechts neben einem Titel auf das Häkchensymbol, um die neue Trackkonfiguration zu bestätigen. Die Leistungsaufzeichnung wird mit der neuen Trackkonfiguration angezeigt.

Siehe auch:

• Einführung in das Leistungstool

Status:

• Dieses Kontrollkästchen ist in Microsoft Edge Canary 125 vorhanden.
• Dieses Kontrollkästchen ist in Microsoft Edge Stable 123 nicht vorhanden.

Zeitachse: Auf Benutzerdauern basierende Erweiterungen aktivieren

neu ab Microsoft Edge 125

Aktiviert Erweiterungen, die die Darstellung von Benutzerzeitsteuerungsereignissen im Leistungstool anpassen.

Siehe auch:

• Referenz zu Leistungsfeatures
• Referenz zu Leistungsaufzeichnungsereignissen

Status:

• Dieses Kontrollkästchen ist in Microsoft Edge Canary 125 vorhanden.
• Dieses Kontrollkästchen ist in Microsoft Edge Stable 123 nicht vorhanden.

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

Aktivieren des Bereichs "Spekulatives Laden" im Anwendungsbereich

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:

• Anwendungstool, um Speicher zu verwalten

Status:

• Dieses Kontrollkästchen ist in Microsoft Edge Canary 125 vorhanden.
• Dieses Kontrollkästchen ist in Microsoft Edge Stable 123 vorhanden.

Struktur "Speicherbuckets aktivieren" im Bereich "Anwendung"

neu ab Microsoft Edge 118

Gibt an, ob die Speicherbucketsstruktur im Anwendungstool aktiviert werden soll.

Siehe auch:

• Anwendungstool, um Speicher zu verwalten

Status:

• Dieses Kontrollkästchen ist in Microsoft Edge Canary 125 vorhanden.
• Dieses Kontrollkästchen ist in Microsoft Edge Stable 123 vorhanden.

Kontextmenü aktivieren, das das Ändern von Strukturen im Flammendiagramm ermöglicht

neu ab Microsoft Edge 121

Fügt ein Kontextmenü hinzu, das das Ändern von Strukturen im Flammendiagramm im Leistungstool ermöglicht. Wenn dieses Experiment aktiviert ist, können Sie im Flammendiagramm des Leistungstools mit der rechten Maustaste auf Ereignisse klicken und das Diagramm an dieser Stelle ändern:

Das Kontextmenü verfügt je nach Kontext möglicherweise über die folgenden Menüelemente:

• Merge-Funktion
• Funktion reduzieren
• Reduzieren sich wiederholender Nachfolger
• Rückgängigmachen der Funktion "Reduzieren"
• Rückgängigmachen des Reduzierens von wiederholten Nachfolgern
• Rückgängigmachen aller Aktionen
• Profil laden
• Profil speichern

Siehe auch:

• Den Engpass finden Sie unter Einführung in das Leistungstool.
• Zeigen Sie Standard Threadaktivität in der Referenz zu Leistungsfeatures an.

Status:

• Dieses Kontrollkästchen ist in Microsoft Edge Canary 125 nicht vorhanden.
• Dieses Kontrollkästchen ist in Microsoft Edge Stable 123 vorhanden.