Aktivieren Sie experimentelle Flags und Quelltests für neue Web-APIs in Edge

Wenn Sie mit neuen Web-APIs arbeiten und stets auf dem neuesten Stand sein möchten, bietet Microsoft Edge verschiedene Möglichkeiten, Funktionen zu aktivieren, die noch nicht im stabilen Kanal verfügbar sind. Dazu gehören Entwicklertools-Experimente, Browser-Flags und Quellcode-Tests . In diesem Leitfaden haben wir alles Wichtige zusammengetragen, damit Sie sicher testen, Ansätze vergleichen und Leistungs- oder Kompatibilitätsprobleme vermeiden können.

Zusätzlich zu den bekannten edge://flags integriert Edge in seine Entwicklertools (DevTools) eine Experimentierseite mit Kontrollkästchen , die Funktionen in der Entwicklung freischalten. Und falls Sie mit echten Nutzern in der Produktionsumgebung testen müssen, stehen Ursprungstests mit zeitlich begrenzten Token zur Verfügung . Wir erklären, wie Sie die einzelnen Optionen aktivieren, welche Risiken damit verbunden sind und wann welche Option sinnvoll ist.

Welche Möglichkeiten haben Sie, experimentelle Funktionen in Edge zu aktivieren?

In Edge können Sie Funktionen je nach Szenario auf drei sich ergänzende Arten aktivieren. Erstens über die Seite „Experimente“ in den Entwicklertools, um das Verhalten der Tools selbst zu ändern . Zweitens mithilfe von Browser-Flags unter edge://flags, um die Chromium-Laufzeitumgebung anzupassen. Und drittens mit Quellcode-Tests, um eine bestimmte API für die Benutzer Ihrer Website mit einem Server-Token oder einem Meta-Tag zu aktivieren.

Es ist wichtig, die Konzepte klar zu unterscheiden: Flags und Experimente wirken sich auf Ihren lokalen Browser aus , während Ursprungstests APIs für Ihre Website-Besucher aktivieren, ohne dass diese ihre Einstellungen ändern müssen. Diese Unterscheidung ist entscheidend, um die Vermischung von Arbeitsabläufen zu vermeiden und für jede Entwicklungsphase die passende Methode auszuwählen.

So aktivieren oder deaktivieren Sie Experimente in DevTools

Die Seite „DevTools-Experimente“ bietet Zugriff auf Funktionen in der Entwicklung, die sich zwischen den Versionen ändern können. Aktivieren Sie diese nur, wenn Sie sie zum Debuggen oder Analysieren benötigen , und beachten Sie, dass möglicherweise ein Neustart der DevTools erforderlich ist.

Kurzanleitung: Öffnen Sie die Entwicklertools, indem Sie mit der rechten Maustaste auf die Seite klicken und „Untersuchen“ auswählen (oder unter Windows/Linux Strg+Umschalt+I, unter macOS Befehl+Wahltaste+I drücken). Gehen Sie in der Symbolleiste der Entwicklertools zu „Einstellungen“ und wählen Sie die Seite „Experimente“. Aktivieren oder deaktivieren Sie die Kontrollkästchen nach Bedarf und klicken Sie auf „Entwicklertools neu laden“, um die Änderungen zu übernehmen.

Experimente auf Standardwerte zurücksetzen

Sollten Sie Instabilität oder Leistungseinbußen feststellen, können Sie den Ausgangszustand wiederherstellen. Öffnen Sie die Entwicklertools, gehen Sie zu „Einstellungen“ und klicken Sie auf der Seite „Voreinstellungen“ auf die Schaltfläche „Standardwerte wiederherstellen und aktualisieren“. Beim Schließen der Entwicklertools werden die Standardeinstellungen des Experiments wiederhergestellt.

Filtern und lokalisieren Sie Experimente in DevTools

Um ein bestimmtes Kontrollkästchen zu finden, verwenden Sie das Filterfeld auf der Seite „Experimente“ . Während der Eingabe werden nur die Optionen angezeigt, die Ihrem Text entsprechen. Löschen Sie den Filter, um die vollständige Liste wieder anzuzeigen.

So senden Sie Feedback an das Edge DevTools-Team

Microsoft bittet um konkretes Feedback zu diesen Funktionen. Sollten Sie auf Probleme stoßen oder Verbesserungsvorschläge haben, kontaktieren Sie bitte das Edge DevTools-Team über die offiziellen Kanäle . Je detaillierter Ihr Bericht ist, desto hilfreicher ist er für die Stabilisierung der Funktion.

Liste der aktuellen Experimente in DevTools

Die folgende Liste fasst die verfügbaren Kontrollkästchen im aktuellen Canary-Kanal und den entsprechenden stabilen Versionen zusammen. In der Regel sind sie in Edge Canary 140 und Edge Stable 138 vorhanden , sofern nicht anders angegeben.

Erfassung von Knotenerstellungsstapeln

Es ermöglicht das Sammeln von JavaScript-Stacktraces, wenn Knoten zur Laufzeit zum DOM hinzugefügt werden. Es fügt den Reiter „Stack Trace“ unter „Elemente“ neben „Stile“ hinzu, um den Ursprung einer Einfügung zu untersuchen.

Protokollmonitor

Aktivieren Sie das Protokollüberwachungstool, um die von den Entwicklertools gesendeten und empfangenen CDP-Nachrichten anzuzeigen . Sie können es über „Weitere Tools“ oder über das Befehlsmenü aufrufen, indem Sie nach „Protokoll“ suchen.

Option zum Freigeben interner Elemente in Heap-Snapshots

Zeigt im Speichertool ein Kontrollkästchen an, um interne Elemente in Heap-Snapshots anzuzeigen und erweiterte Diagnosen zu ermöglichen.

Vertikale Schubladenkonfiguration

Als neu gekennzeichnet seit Edge 139. Hat derzeit keine praktische Auswirkung ; zum Verschieben der Schnellansicht verwenden Sie die zugehörige Dock-Schaltfläche rechts. In Stable 138 ist sie nicht vorhanden.

APCA-Wahrnehmungskontrast im Farbwähler

Es ersetzt die alten AA/AAA-Verhältnisse durch den APCA-Algorithmus , der den Kontrast auf der Grundlage von Kontext, Schriftstärke und -größe sowie Umgebungsbedingungen berechnet.

Vollständige Barrierefreiheits-Strukturansicht in Elements

Fügen Sie im Elements-Tool eine Schaltfläche hinzu, mit der Sie zwischen der DOM-Baumansicht und der Barrierefreiheitsansicht umschalten können, um die Ansicht Ihren Bedürfnissen entsprechend anzupassen.

Neuer visueller Schriftarten-Editor in Styles

Mit dem Schriftarteneditor können Sie Einheiten ändern, Schlüsselwörter umschalten, konvertieren und exaktes CSS für typografische Eigenschaften generieren, ohne die Registerkarte „Stile“ zu verlassen.

Automatische Kontrastberichte im Problembereich

Ermöglicht die automatische Erkennung und Meldung von Kontrastproblemen über das Tool „Probleme“ mit entsprechender Dokumentation und Ressourcen.

Eigenschaften experimenteller Cookies

Es ermöglicht das Testen experimenteller Funktionen im Zusammenhang mit Cookies und ist nützlich, um Plattformänderungen zu validieren, bevor sie veröffentlicht werden.

Markieren Sie den fehlerhaften Knoten oder das fehlerhafte Attribut im DOM

Um problematische Knoten oder Attribute im DOM-Baum zu beschleunigen, sollten diese hervorgehoben werden.

Gruppieren Sie Ursprünge in erstellte und bereitgestellte Bäume

In Origins werden Ressourcen in Autoren- (erstellte) und Produktionsordner (bereitgestellte) unterteilt , um den Originalcode vom verpackten Code zu unterscheiden.

Code aus der Überspringen-Liste in der Quellenansicht ausblenden

Es ermöglicht Ihnen , den im Quellcodebaum als auszulassenden Code auszublenden , wodurch die Navigation zwischen relevanten Dateien erleichtert wird.

Leistung: PostMessage-Streams

Im Hauptpfad werden Schedule postMessage- und On message- Ereignisse unterschieden , die mit Initiator-Pfeilen verknüpft sind, um Warteschlangen und Controller zwischen Threads zu analysieren.

Leistung: Experimental Insights Panel

Fügen Sie der Insights-Seitenleiste weitere Informationen hinzu . Aktivieren Sie zunächst Insights und anschließend die experimentelle Version, um noch mehr Daten anzuzeigen.

Konsole: Nicht abgefangene DevTools-Ausnahmen protokollieren

Steuert, ob interne DevTools-Ausnahmen in der Konsole protokolliert werden , was für das Debuggen der Tools-Umgebung selbst nützlich ist.

Aktivieren Sie den Webhinweis in Problemen

Integrieren Sie webhint, um im Problembereich Vorschläge zu Barrierefreiheit, Kompatibilität, Sicherheit, Leistung und PWA mit Links zu verwandten Tools anzuzeigen .

Probleme in Elements anzeigen

Zeichnet im DOM wellenförmige Unterstreichungen für erkannte Syntaxfehler ein und bietet direkten Zugriff auf die Erklärung des Problems.

Open-Source-Dateien in Visual Studio Code

Ersetzen Sie den Origins-Code-Editor durch VS Code für lokale Dateien. Wenn Sie einen Arbeitsordner auswählen, öffnen die Links die Datei direkt in VS Code , und Änderungen werden live synchronisiert.

Adaptive CPU-Drosselung

Aktiviert eine dynamische CPU-Drosselungsstrategie für Leistungstests unter verschiedenen Bedingungen.

CSS Copilot in die Seitenleiste integriert

Ermöglicht es Ihnen , Copilot nach HTML-Elementen und CSS-Regeln aus Elements zu fragen . Erfordert, dass die Edge-Seitenleiste aktiv ist.

Dynamisches Heap-Profil

Das Heap - Profil wird in Echtzeit aktualisiert, um Speichertrends während der Interaktion mit der Seite zu erkennen.

Heap-Sampler-Zeitskala

Die Leistungsanzeige zeigt eine Zeitleiste des Sampling-Heap-Profilgenerators, um Allokationen und Retentionen im Zeitverlauf zu untersuchen.

Leistung: Ungültigkeitsverfolgung

Fügen Sie der Zusammenfassung „Stil neu berechnen“ einen Abschnitt „Invalidierungen“ hinzu , um zu erfahren, welche Knoten kostspielige Neuberechnungen verursacht haben.

Leistung: Alle Ereignisse anzeigen

Schaltet die Anzeige aller in der Trace-Sitzung aufgezeichneten Ereignisse um; dies ist für gründliche Untersuchungen nützlich.

Leistung: V8-Laufzeitaufrufstatistiken

Das Performance-Tool zeigt interne V8-Engine-Aufrufmetriken an und liefert einen zeitlichen Kontext in JS.

Leistung: Verbesserte Trace-Sammlung v2

Es ermöglicht Performance Capture die Erstellung neuer Trace-Typen für das verbesserte v2-Format, das in Chromium eingeführt wird.

Leistung: Sammeln von Quelltext in kompilierten Skripten

Beim Exportieren der Trace-Datei sollte der Quelltext der in der Trace-Datei kompilierten Skripte zur Offline-Analyse mit einbezogen werden.

Leistung: Trace-Event-Debug-Modus

Fügen Sie der Zusammenfassung einen Abschnitt „Tracking-Ereignis“ mit dem Namen, der Dauer und den Debugging-Informationen für das ausgewählte Ereignis hinzu.

Instrumentierungshaltepunkte

Es verbessert die Zuverlässigkeit durch Stopps an Messpunkten der Instrumentierung und ermöglicht so Inspektionen an kritischen Stellen in der Pipeline.

Verwenden von Bereichsinformationen aus Quellzuordnungen

Es ermöglicht DevTools , den Kontext von Quellzuordnungen zu nutzen, um ein Debugging zu ermöglichen, das dem Originalcode näher kommt.

Origin-Tests: Aktivieren Sie experimentelle APIs auf Ihrer Site

Wenn Sie mit echten Nutzern testen möchten, ohne diese um Änderungen zu bitten, verwenden Sie Quellcode-Tests. Ein Token aktiviert vorübergehend eine experimentelle API für Ihre Domäne in Microsoft Edge , selbst wenn die Funktion im Browser standardmäßig deaktiviert ist.

So funktioniert es: Edge erkennt das Ursprungstest-Token in Ihrem HTML- oder HTTP-Header und aktiviert intern das Flag für diesen Ursprung. Der Benutzer muss weder edge://flags bearbeiten noch etwas installieren.

Registrierung und Erhalt des Tokens

Schritte: Rufen Sie die Microsoft Edge-Quellcode-Testseite auf, wählen Sie einen aktiven Test aus und akzeptieren Sie die Bedingungen . Melden Sie sich gegebenenfalls an (z. B. mit GitHub) und füllen Sie das Formular aus, indem Sie Ihre Domäne oder Subdomäne angeben.

Sie können eine einzelne Domain, eine bestimmte Subdomain oder die Domain mit allen zugehörigen Subdomains registrieren . Pfade und Parameter werden nicht unterstützt; die Registrierung ist auf die Stammdomain beschränkt. Nach dem Absenden wird Ihr Token generiert und im Bereich „Registrierungen“ angezeigt.

So verwenden Sie das Token in der Produktion

Geben Sie den Token ein als Meta-Tag im Kopf oder als Antwortheader. Beispiele: <meta http-equiv='origin-trial' content='EXAMPLE_TOKEN'> die Kopfzeile Origin-Trial: EXAMPLE_TOKEN. Um die Teilnahme zu beenden, entfernen Sie die Metadaten oder den Header.

Funktionen erkennen und Reservierungen vorbereiten

Behandeln Sie Tests als experimentell. Nutzen Sie die Funktionserkennung und fügen Sie Ausweichmechanismen hinzu, falls die API nicht verfügbar ist , das Token abläuft oder das Team das Experiment vorzeitig beendet. Weitere Informationen finden Sie im MDN-Leitfaden zur Funktionserkennung.

Testen auf Localhost und Ablauf

Der Token-Mechanismus funktioniert nicht auf localhost . Um lokal zu entwickeln, aktivieren Sie das entsprechende Flag unter edge://flags. Tokens laufen in der Regel nach 6 Wochen ab ; erneuern Sie sie bei Bedarf auf der Seite „Origin Testing“.

Dauer und vorzeitiges Ende

Eine Testphase kann bis zum geplanten Enddatum dauern oder aus Sicherheits- oder Designgründen vorzeitig beendet werden . Im Falle einer vorzeitigen Beendigung werden die Organisatoren die registrierten Entwickler per E-Mail kontaktieren.

Senden Sie Feedback zu Ihren Erfahrungen

Auf der Testseite können Sie über die Schaltfläche „Kommentare“ den Tab „Probleme“ des Repositorys öffnen und Ihren Anwendungsfall sowie Ihre Ergebnisse dokumentieren. Diese Angaben sind für die Standardisierung unerlässlich.

Browser-Flags: Plattformfunktionen in Edge aktivieren

Flags sind versteckte Schalter in Chromium-basierten Browsern. In Edge können Sie über edge://flags Funktionen aktivieren, die sich noch in der Entwicklung befinden , wie z. B. Webplattform-APIs oder Änderungen im Browserverhalten.

Warnung: Diese Optionen sind experimentell. Es wird nicht empfohlen, sie in Ihrem gewohnten Browser zu ändern ; tun Sie dies nur in Entwicklungskanälen (Beta, Dev oder Canary) und nur, wenn es Ihnen von einem zuverlässigen Experten empfohlen wird.

about://, chrome:// und edge://: der Trick für jedes Chromium

Alle Chromium-Browser lösen interne Schemata auf. Wenn Sie in Edge chrome://flags eingeben, wird dies durch edge://flags ersetzt . Für eine umfassende Dokumentation verwenden Sie about://flags: Jeder Browser überschreibt dies mit seinem korrekten Schema.

Nützliche Flags und praktische Beispiele in Edge

Einige Edge-spezifische Flags sind sehr nützlich. Nachfolgend finden Sie Beispiele, die Sie über edge://flags aktivieren können und die die Arbeit mit diesem Abschnitt veranschaulichen.

Textkontrast verbessern

En Windows, aktiv edge://flags/#edge-enhance-text-contrast die Verwenden Sie beim Rendern von Schriftarten den Systemkontrast und das Gamma, wodurch eine homogenere Lesung erreicht wird.

Blockieren der automatischen Multimediawiedergabe

Mit edge://flags/#edge-autoplay-user-setting-block-option Sie aktivieren die Option zum Blockieren der automatischen Wiedergabe. Gehen Sie dann zu Einstellungen > Cookies & Site-Berechtigungen > Autoplay oder gehen Sie zu edge://settings/content/mediaAutoplay.

Zurück navigieren mit der Backspace-Taste

Die Flagge edge://flags/#edge-backspace-key-navigate-page-back ermöglicht Zurück mit der Rücktaste und vorwärts mit Umschalt+Rücktaste. Dies ist sehr nützlich, wenn Sie hauptsächlich mit einer Tastatur surfen.

Laschen mit abgerundeten Ecken

Wenn Sie einen weicheren Look bevorzugen, edge://flags/#edge-visual-rejuv-rounded-tabs runden Sie die vier Ecken der Laschen ab und trennt sie optisch von der Omnibox.

Reibungsloses Scrollen in PDF-Dateien

Aktivieren edge://flags/#edge-smooth-scrolling-enabled-pdf die flüssigeres Scrollen beim Anzeigen von Dokumenten PDF in den Browser integriert.

Inhalte an Chromecast senden

Wenn die Broadcast-Option nicht funktioniert, aktivieren Sie diese drei Flags: #load-media-router-component-extension, #global-media-controls-for-cast y #mirroring-serviceNach einem Neustart sollten Sie in der Lage sein, Tabs, Desktops oder Dateien zu senden.

Tabs in den Ruhezustand versetzen, um Ressourcen zu sparen

In den Entwicklerkanälen von Edge können Sie die Funktion „Ruhezustand“ aktivieren, um inaktive Tabs in den Ruhezustand zu versetzen und so den RAM-Verbrauch zu reduzieren . Suchen Sie nach der Option, aktivieren Sie sie und passen Sie das Timeout unter „Einstellungen“ > „System“ > „Ressourcen sparen“ an. Sie können auch eine Whitelist mit Websites erstellen, die nicht in den Ruhezustand versetzt werden sollen.

Gute Praktiken beim Experimentieren

Bevor Sie irgendetwas ändern, bereiten Sie Ihre Umgebung vor. Verwenden Sie Edge Canary oder Dev zum Testen, behalten Sie die stabile Version für die tägliche Arbeit und dokumentieren Sie, was Sie aktiviert haben und warum. Falls etwas schiefgeht, wissen Sie, was Sie rückgängig machen müssen.

Bei Quellcode-Tests sollten Sie die Funktionserkennung und alternative Pfade implementieren . APIs können sich ändern, ablaufen oder eingestellt werden; Ihr Produkt sollte nicht fehlerhaft funktionieren, wenn sie wegfallen.

Fordern Sie Ihre Benutzer nicht auf, Browser-Flags zu ändern. Flags sind für Entwicklungsumgebungen, nicht für Produktionsumgebungen vorgesehen . Wenn Sie Benutzertests benötigen, verwenden Sie Quellcode-Testtoken und segmentieren Sie die Bereitstellung.

Abschließend sei darauf hingewiesen, dass experimentelle Funktionen instabil oder unzuverlässig sein können . Sollte die Leistung nachlassen, deaktivieren Sie nicht benötigte Funktionen und stellen Sie gegebenenfalls die Standardwerte in den Entwicklertools wieder her.

Die Erkundung der experimentellen Funktionen von Edge ermöglicht es Ihnen, neue APIs zu validieren, Ihren Debugging-Workflow zu optimieren und sich auf robustere Releases vorzubereiten. Mit DevTools Experiments, den Flags unter edge://flags und Quellcode-Tests steht Ihnen ein umfassendes Toolset für jede Entwicklungsphase zur Verfügung: von lokalen Untersuchungen bis hin zu kontrollierten Tests mit echten Nutzern – stets mit klaren Warnungen, Rollback-Methoden und Richtlinien für wertvolles Feedback an das Microsoft-Team und die Chromium-Community.