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

Wenn Sie mit neuen Web-APIs arbeiten und immer einen Schritt voraus sein müssen, Microsoft Edge bietet mehrere Pfade zum Aktivieren von Funktionen, die noch nicht im stabilen Kanal vorhanden sind. Dazu gehören DevTools-Experimente, Browser-Flags und Quellcodetests.In diesem Handbuch haben wir alles in einer einzigen Ressource zusammengestellt, damit Sie sicher testen, Ansätze vergleichen und Leistungs- oder Kompatibilitätsprobleme vermeiden können.

Zusätzlich zu den bekannten edge://flags, Edge integriert eine Experimentierseite mit Kontrollkästchen in seine Entwicklertools (DevTools) die Funktionen in der Entwicklung freischalten. Und wenn Sie mit echten Benutzern in der Produktion testen müssen, gibt es tokenbegrenzte Quelltests in die zeit. Wir erklären, wie Sie die einzelnen Optionen aktivieren, welche Risiken sie mit sich bringen und wann welche Option sinnvoll ist..

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

In Edge können Sie Funktionen aktivieren von drei komplementäre Formen abhängig vom Szenario. Die erste Möglichkeit besteht darin, auf der Seite „Experimente“ in DevTools das Verhalten der Tools selbst zu ändern.Die zweite Methode verwendet Browser-Flags in edge://flags, um die Chromium-Laufzeit zu ändern. Und die dritte Methode verwendet Quellcodetests. um den Benutzern Ihrer Site mit einem Server-Token oder Meta-Tag eine bestimmte API zu ermöglichen.

Es ist praktisch, die Konzepte gut zu trennen: Flags und Experimente wirken sich auf Ihren lokalen Browser ausWährend Origin-Tests aktivieren APIs für Ihre Website-Besucher ohne dass sie ihre Konfiguration ändern müssen. Diese Unterscheidung ist entscheidend, um eine Vermischung der Abläufe zu vermeiden und für jede Entwicklungsphase die richtige 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 sie nur, wenn Sie diese Funktionen zum Debuggen oder zur Analyse benötigen. und geht davon aus, dass möglicherweise ein Neustart von DevTools erforderlich ist.

Schnelle Schritte: Öffnen Sie DevTools, indem Sie mit der rechten Maustaste auf die Seite klicken und „Untersuchen“ auswählen. (oder verwenden Sie Strg+Umschalt+I unter Windows/Linux, Befehl+Option+I unter macOS). Gehen Sie in der DevTools-Symbolleiste zu Einstellungen und wählen Sie die Seite „Experimente“ aus. Aktivieren oder deaktivieren Sie die gewünschten Kontrollkästchen und klicken Sie auf „DevTools neu laden“. um die Änderungen zu übernehmen.

Experimente auf Standardwerte zurücksetzen

Wenn Sie Instabilität oder Langsamkeit bemerken, können Sie zum Ausgangszustand zurückkehren. Öffnen Sie DevTools, gehen Sie zu Einstellungen und dann zur Seite „Einstellungen“ Verwenden Sie die Schaltfläche „Standardeinstellungen wiederherstellen und aktualisieren“. Wenn Sie DevTools schließen, werden die Standardeinstellungen wiederhergestellt. der Experimente.

Filtern und lokalisieren Sie Experimente in DevTools

Um eine bestimmte Box zu finden, Verwenden Sie das Filtertextfeld auf der Seite „Experimente“Während der Eingabe werden Ihnen nur Optionen angezeigt, die mit diesem Text übereinstimmen. Löschen Sie den Filter, um die vollständige Liste abzurufen.

So senden Sie Feedback an das Edge DevTools-Team

Microsoft bittet um konkretes Feedback zu diesen Funktionen. Wenn Sie auf Probleme stoßen oder Vorschläge haben, wenden Sie sich bitte über die offiziellen Kanäle an das Edge DevTools-Team.Je detaillierter der Bericht ist, desto nützlicher ist er für die Stabilisierung der Funktion.

Liste der aktuellen Experimente in DevTools

Die folgende Liste fasst die im neuesten Canary-Kanal verfügbaren Boxen und ihre stabilen Gegenstücke zusammen. In der Regel sind sie in Edge Canary 140 und Edge Stable 138 vorhanden, sofern in den einzelnen Punkten nichts anderes angegeben ist.

Erfassung von Knotenerstellungsstapeln

Ermöglicht Sammeln Sie JavaScript-Stacktraces, wenn Sie Knoten zum DOM hinzufügen zur Laufzeit. Fügt in „Elements“ neben „Styles“ eine Registerkarte „Stack Trace“ hinzu, um die Quelle einer Einfügung zu überprüfen.

Protokollmonitor

Aktivieren Sie das Werkzeug Protokollmonitor zum Anzeigen von CDP-Nachrichten, die von DevTools gesendet und empfangen werden. Öffnen Sie es über „Weitere Tools“ oder über das Befehlsmenü, indem Sie nach „Protokoll“ suchen.

Option zum Freigeben interner Elemente in Heap-Snapshots

Zeigt ein Kontrollkästchen im Speichertool, um interne Elemente in Heap-Snapshots verfügbar zu machen und ermöglichen erweiterte Diagnosen.

Vertikale Schubladenkonfiguration

Seit Edge 139 als neu gekennzeichnet. Derzeit hat es keine praktische Wirkung; Um Quick Look zu verschieben, verwenden Sie die eigene Dock-Schaltfläche auf der rechten Seite. Erscheint nicht in Stall 138.

APCA-Wahrnehmungskontrast im Farbwähler

ersetzt die alte AA/AAA-Verhältnisse durch den APCA-Algorithmus, das den Kontrast basierend auf Kontext, Schriftstärke und -größe sowie Umgebungsbedingungen berechnet.

Vollständige Barrierefreiheits-Strukturansicht in Elements

Fügen Sie eine Schaltfläche hinzu für Wechseln zwischen dem DOM-Baum und dem Zugänglichkeitsbaum innerhalb des Element-Tools und wechseln Sie die Ansicht entsprechend Ihren Anforderungen.

Neuer visueller Schriftarten-Editor in Styles

Geben Sie die Schriftart-Editor zum Ändern von Einheiten, Umschalten von Schlüsselwörtern, Konvertieren und Generieren von exaktem CSS typografischer Eigenschaften, ohne die Registerkarte „Stile“ zu verlassen.

Automatische Kontrastberichte im Problembereich

Aktivieren Sie die automatische Erkennung und Meldung von Kontrastproblemen über das Problemtool zugänglich, mit zugehöriger Dokumentation und Ressourcen.

Eigenschaften experimenteller Cookies

Ermöglicht das Testen experimentelle Funktionen im Zusammenhang mit Cookies, nützlich zum Validieren von Plattformänderungen vor dem Versand.

Markieren Sie den fehlerhaften Knoten oder das fehlerhafte Attribut im DOM

Unterstreichen Sie im DOM-Baum die problematische Knoten oder Attribute um die Entdeckung von Markup- oder Regelfehlern zu beschleunigen.

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

In Origins trennen Sie die Ressourcen in Authoring- (erstellte) und Produktionsordner (bereitgestellte) um den Originalcode von der Verpackung zu unterscheiden.

Code aus der Überspringen-Liste in der Quellenansicht ausblenden

Ermöglicht im Quellbaum den zum Weglassen markierten Code ausblenden, wodurch die Navigation zwischen relevanten Dateien erleichtert wird.

Leistung: PostMessage-Streams

Auf der Hauptstrecke unterscheiden sich Ereignisse Planen Sie PostMessage und On Message, verknüpft mit Initiatorpfeilen, um Warteschlangen und Controller zwischen Threads zu analysieren.

Leistung: Experimental Insights Panel

Hinzufügen Zusätzliche Informationen im Insights-Seitenbereich. Aktivieren Sie zuerst Insights und dann die experimentelle Variante, um noch mehr Daten anzuzeigen.

Konsole: Nicht abgefangene DevTools-Ausnahmen protokollieren

Überprüfen Sie, ob Interne DevTools-Ausnahmen werden in der Konsole protokolliert, nützlich zum Debuggen der Toolumgebung selbst.

Aktivieren Sie den Webhinweis in Problemen

Integra Webhint zur Anzeige von Zugänglichkeit, Kompatibilität, Sicherheit, Leistung und PWA-Vorschlägen im Bereich „Probleme“ mit Links zu verwandten Tools.

Probleme in Elements anzeigen

Pint wellenförmige Unterstreichungen im DOM aufgrund von Syntaxfehlern erkannt, mit direktem Zugriff auf die Erklärung des Problems.

Open-Source-Dateien in Visual Studio Code

Ersetzen Sie den Quellcode-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

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

CSS Copilot in die Seitenleiste integriert

Ermöglicht fragen Copilot über HTML-Elemente und CSS-Regeln von Elements. Erfordert, dass die Edge-Seitenleiste aktiv ist.

Dynamisches Heap-Profil

Live-Update der Heap-Profil zum Anzeigen von Speichertrends während Sie mit der Seite interagieren.

Heap-Sampler-Zeitskala

In der Performance anzeigen a Sampling Heap Profiler-Zeitleiste um Zuweisungen und Einbehalte im Zeitraum zu untersuchen.

Leistung: Ungültigkeitsverfolgung

Fügen Sie einen Abschnitt von Überschreibungen der Stilzusammenfassung neu berechnen um herauszufinden, welche Knoten teure Neuberechnungen verursacht haben.

Leistung: Alle Ereignisse anzeigen

Schalten Sie den Anzeige aller aufgezeichneten Ereignisse in der Trace-Sitzung, nützlich für gründliche Untersuchungen.

Leistung: V8-Laufzeitaufrufstatistiken

Zeigt im Leistungstool die Interne Anrufmetriken des V8-Motors, Bereitstellung eines Zeitkontexts in JS.

Leistung: Verbesserte Trace-Sammlung v2

Macht Leistung Erfassen Sie neue Ablaufverfolgungstypen für das erweiterte v2-Format das in Chromium bereitgestellt wird.

Leistung: Sammeln von Quelltext in kompilierten Skripten

Beim Exportieren der Trace-Datei enthält den Quelltext der kompilierten Skripte innerhalb der Ablaufverfolgung für die Offline-Analyse.

Leistung: Trace-Event-Debug-Modus

Einen Abschnitt in der Zusammenfassung hinzufügen Trace-Ereignis mit Name, Dauer und Debuginformationen des ausgewählten Ereignisses.

Instrumentierungshaltepunkte

Verbessere die Zuverlässigkeit beim Anhalten an Instrumentierungs-Haltepunkten, wodurch Inspektionen an kritischen Punkten der Pipeline erleichtert werden.

Verwenden von Bereichsinformationen aus Quellzuordnungen

Ermöglicht DevTools Verwenden Sie den Bereichskontext von Quellzuordnungen um ein Debugging anzubieten, das dem Originalcode näher kommt.

Origin-Tests: Aktivieren Sie experimentelle APIs auf Ihrer Site

Wenn Sie mit echten Benutzern testen möchten, ohne dass Änderungen erforderlich sind, verwenden Sie Quelltests. Ein Token aktiviert vorübergehend eine experimentelle API für Ihre Domäne in Microsoft Edge., auch wenn die Funktion im Browser standardmäßig deaktiviert ist.

Operation: Edge erkennt das Ursprungstoken in Ihrem HTML- oder HTTP-Header und setzt intern das Experimentierflag für diesen Ursprung. Der Benutzer muss weder edge://flags berühren noch etwas installieren.

Registrierung und Erhalt des Tokens

Schritte: Gehen Sie zur Microsoft Edge Origin-Testseite. Wählen Sie einen aktiven Test und akzeptieren Sie die BedingungenMelden Sie sich bei entsprechender Aufforderung an (z. B. mit GitHub) und füllen Sie das Formular unter Angabe Ihrer Domäne oder Subdomäne aus.

Sie können sich registrieren: eine einzelne Domäne, eine bestimmte Subdomäne oder die Domäne und alle ihre Subdomänen. Pfade und Parameter werden nicht unterstützt. Sie werden auf die Wurzel gekürzt. Nach der Übermittlung wird Ihr Token generiert und im Abschnitt „Protokolle“ 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. Verwenden Sie die Funktionserkennung und fügen Sie Fallbacks hinzu, wenn die API nicht verfügbar ist, wenn das Token abläuft oder das Team beschließt, das Experiment vorzeitig zu beenden. Weitere Informationen finden Sie im MDN-Leitfaden zur Feature-Erkennung.

Testen auf Localhost und Ablauf

Der Token-Mechanismus funktioniert nicht auf localhost. Um lokal zu entwickeln, aktivieren Sie das entsprechende Flag in edge://flags. Tokens sind in der Regel verfallen nach 6 Wochen; erneuern Sie sie gegebenenfalls auf der Seite „Origin-Tests“.

Dauer und vorzeitiges Ende

Eine Prüfung kann bis zum geplanten Termin dauern oder aus Sicherheits- oder Designgründen früher schließenBei vorzeitigem Ablauf der Frist werden die Entwickler per E-Mail kontaktiert.

Senden Sie Feedback zu Ihren Erfahrungen

Von der Testseite aus Klicken Sie auf die Schaltfläche „Kommentare“, um die Registerkarte „Probleme“ des Repositorys zu öffnen. und dokumentieren Sie Ihren Anwendungsfall und die Ergebnisse. Dieser Input ist für die Standardisierung von entscheidender Bedeutung.

Browser-Flags: Plattformfunktionen in Edge aktivieren

Flags sind versteckte Schalter in Chromium-basierten Browsern. Navigieren Sie in Edge zu edge://flags, um Funktionen in der Entwicklung zu aktivieren wie etwa APIs von Webplattformen oder Änderungen im Browserverhalten.

Warnung: Diese Optionen sind experimentell. Es wird nicht empfohlen, sie in Ihrem alltäglichen Browser zu ändern.; tun Sie dies auf Entwicklungskanälen (Beta, Dev oder Canary) und nur, wenn Sie von vertrauenswürdigen Anleitungen dazu aufgefordert werden.

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

Alle Chromium-Browser lösen interne Schemata auf. Wenn Sie chrome://flags in Edge eingeben, wird es in edge://flags umgeschriebenFür eine umfassende Dokumentation verwenden Sie about://flags: jeder Browser schreibt es in sein korrektes Schema um.

Nützliche Flags und praktische Beispiele in Edge

Einige Edge-spezifische Flags sind sehr praktisch. Nachfolgend sehen Sie Beispiele, die Sie von edge://flags aktivieren können und veranschaulichen Sie, wie mit dem Abschnitt gearbeitet wird.

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 Edge-Entwicklungskanälen können Sie Sleeping Tabs aktivieren, um Inaktive Tabs in den Ruhezustand versetzen und RAM-Nutzung reduzieren. Suchen Sie die Option anhand des Namens, aktivieren Sie sie und passen Sie das Zeitlimit unter „Einstellungen“ > „System“ > „Ressourcen sparen“ an. Sie können auch eine Whitelist mit Websites verwalten, die nicht in den Ruhezustand versetzt werden sollen..

Gute Praktiken beim Experimentieren

Bereiten Sie Ihre Umgebung vor, bevor Sie etwas berühren. Verwenden Sie Edge Canary oder Dev zum Testen und halten Sie es für die tägliche Arbeit stabil und dokumentieren Sie, was Sie aktiviert haben und warum. Wenn etwas schief geht, wissen Sie, was Sie rückgängig machen müssen.

Bei der Verwendung von Quelltests implementiert Feature-Erkennung und alternative RoutenAPIs können sich ändern, ablaufen oder eingestellt werden. Ihr Produkt sollte nicht kaputtgehen, wenn sie verschwinden.

Bitten Sie Ihre Benutzer nicht, Browser-Flags zu ändern. Markierungen sind für die Entwicklung und nicht für Produktionsumgebungen vorgesehen.Wenn Sie Benutzertests benötigen, verwenden Sie Quelltest-Token und segmentieren Sie Ihre Bereitstellung.

Denken Sie zum Schluss daran Experimentelle Funktionen können instabil oder unzuverlässig seinWenn die Leistung nachlässt, deaktivieren Sie nicht unbedingt erforderliche Funktionen und setzen Sie DevTools bei Bedarf auf die Standardeinstellungen zurück.

Durch die Erkundung der experimentellen Funktionen von Edge können Sie neue APIs validieren, Ihren Debugging-Workflow verbessern und sich auf robustere Versionen vorbereiten. Zwischen DevTools-Experimenten, edge://flags-Flags und Quelltests haben Sie eine ganze Reihe von Optionen. für jede Entwicklungsphase: von der lokalen Forschung bis hin zu kontrollierten Tests mit echten Benutzern, immer mit klaren Warnungen, Rollback-Methoden und Richtlinien für die Meldung nützlichen Feedbacks an das Microsoft-Team und die Chromium-Community.