Aktivera experimentella flaggor och källkodstestning för nya webb-API:er i Edge

Om du arbetar med nya webb-API:er och behöver ligga steget före, Microsoft Edge erbjuder flera vägar för att aktivera funktioner som ännu inte finns i den stabila kanalen. Dessa inkluderar DevTools-experiment, webbläsarflaggor och källkodstestning.I den här guiden har vi sammanställt allt i en enda resurs så att du kan testa säkert, jämföra metoder och undvika prestanda- eller kompatibilitetsproblem.

Förutom den välkända edge://flags, Edge integrerar en experimentsida med kryssrutor i sina utvecklarverktyg (DevTools) som låser upp funktioner i utvecklingen. Och om du behöver testa med riktiga användare i produktion finns det tokenbegränsade källkodstester i el tiempo. Vi förklarar hur man aktiverar varje alternativ, vilka risker det medför och när vart och ett är lämpligt..

Vilka alternativ har du för att aktivera experimentella funktioner i Edge?

I Edge kan du aktivera funktioner för tre komplementära former beroende på scenariot. Den första, från sidan Experiment i DevTools för att ändra själva verktygens beteende.Det andra, med hjälp av webbläsarflaggor i edge://flags för att ändra Chromium-körtiden. Och det tredje, med källkodstester, för att aktivera ett specifikt API för din webbplats användare med en servertoken eller metatagg.

Det är bekvämt att separera begreppen väl: Flaggor och experiment påverkar din lokala webbläsareMedan Ursprungstester aktiverar API:er för dina webbplatsbesökare utan att be dem ändra sin konfiguration. Denna distinktion är nyckeln till att undvika blandade flöden och välja rätt metod för varje utvecklingsfas.

Så här aktiverar eller inaktiverar du experiment i DevTools

Sidan DevTools Experiment ger åtkomst till funktioner under utveckling som kan ändras mellan utgåvor. Aktivera dem bara när du behöver funktionerna för felsökning eller analys. och antar att de kan kräva omstart av DevTools.

Snabba steg: Öppna DevTools genom att högerklicka på sidan och välja Inspektera (eller använd Ctrl+Shift+I i Windows/Linux, Command+Alternative+I i macOS). I verktygsfältet för utvecklare går du till Inställningar och väljer sidan Experiment. Markera eller avmarkera de rutor du behöver och klicka på Ladda om DevTools för att tillämpa ändringarna.

Återställ experiment till standardvärden

Om du märker instabilitet eller långsamhet kan du återgå till ursprungstillståndet. Öppna DevTools, gå till Inställningar och sidan Inställningar använd knappen Återställ standardinställningar och uppdatera. När du stänger DevTools återgår det till standardinställningarna. av experimenten.

Filtrera och hitta experiment i DevTools

För att hitta en specifik ruta, Använd textrutan Filter på sidan ExperimentNär du skriver ser du bara alternativ som matchar den texten. Rensa filtret för att hämta hela listan.

Så här skickar du feedback till Edge DevTools-teamet

Microsoft söker specifik feedback om dessa funktioner. Om du stöter på några problem eller har några förslag, vänligen kontakta Edge DevTools-teamet via de officiella kanalerna.Ju mer detaljerad rapporten är, desto mer användbar blir den för att stabilisera funktionen.

Lista över aktuella experiment i DevTools

Följande lista sammanfattar de rutor som finns tillgängliga i den senaste Canary-kanalen och deras stabila motsvarigheter. Som en allmän regel finns de i Edge Canary 140 och Edge Stable 138., om inte annat anges i varje punkt.

Insamling av nodskapande stackar

det gör Samla in JavaScript-stackspår när du lägger till noder i DOM:en vid körning. Lägger till en flik för stackspårning i Element, bredvid Stilar, för att inspektera källan för en infogning.

Protokollmonitor

Aktivera verktyget Protokollövervakare för att visa CDP-meddelanden som skickats och mottagits av DevToolsÖppna från Fler verktyg eller från Kommando-menyn genom att söka efter protokoll.

Möjlighet att exponera interna element i heap-snapshots

Visar en kryssrutan i minnesverktyget för att exponera interna element i heap-snapshots och underlätta avancerad diagnostik.

Vertikal lådkonfiguration

Markerad som ny sedan Edge 139. För närvarande har det ingen praktisk effekt; för att flytta Snabbvisning, använd dess egen dockningsknapp till höger. Visas inte i stall 138.

APCA perceptuell kontrast i färgväljaren

Ersätter gamla AA/AAA-förhållanden med APCA-algoritmen, som beräknar kontrast baserat på sammanhang, teckensnittstjocklek och storlek samt miljöförhållanden.

Fullständig tillgänglighetsträdvy i Elements

Lägg till en knapp för växla mellan DOM-trädet och tillgänglighetsträdet i Elements-verktyget och växla vyn efter dina behov.

Ny visuell typsnittsredigerare i Styles

Gå in i Teckensnittsredigerare för att ändra enheter, växla nyckelord, konvertera och generera exakt CSS av typografiska egenskaper utan att lämna fliken Stilar.

Automatiska kontrastrapporter i problempanelen

Aktivera automatisk detektering och rapportering av kontrastproblem tillgänglig från Problemverktyget, med dokumentation och relaterade resurser.

Egenskaper hos experimentella cookies

Låter dig testa experimentella funktioner relaterade till cookies, användbart för att validera plattformsändringar före leverans.

Markera felaktig nod eller attribut i DOM:en

Stryk under i DOM-trädet problematiska noder eller attribut för att påskynda upptäckten av markerings- eller regelfel.

Gruppera ursprung i skapade och distribuerade träd

I Origins, separera resurserna i skapade mappar och produktionsmappar för att skilja originalkoden från förpackningen.

Dölj kod från listan "Hopp över" i källvyn

det gör dölj koden som är markerad för utelämnande i källträdet, vilket gör navigering mellan relevanta filer enklare.

Prestanda: postMessage-strömmar

På huvudspåret, urskilj händelserna Schemalägg inläggMeddelande och På-meddelande, länkad med initiatorpilar för att analysera köer och kontrollanter mellan trådar.

Prestanda: Panel med experimentella insikter

tillägger Ytterligare information i sidopanelen InsikterAktivera Insikter först, sedan dess experimentella variant för att se ännu mer data.

Konsol: Logga okända DevTools-undantag

Kontrollera om Interna undantag för DevTools loggas i konsolen., användbart för att felsöka själva verktygsmiljön.

Aktivera webhint i Problem

Integra webhint för att visa förslag på tillgänglighet, kompatibilitet, säkerhet, prestanda och PWA i panelen Problem, med länkar till relaterade verktyg.

Visa problem i Elements

Pint vågiga understrykningar i DOM på grund av syntaxfel upptäckt, med direkt tillgång till förklaringen av problemet.

Öppen källkodsfiler i Visual Studio Code

Ersätt källkodredigeraren med VS-kod för lokala filer. När du väljer en arbetsmapp öppnas filen direkt i VS Code via länkarna. och ändringarna synkroniseras live.

Adaptiv CPU-begränsning

Aktivera en dynamisk CPU-begränsningsstrategi för prestandatestning under olika förhållanden.

CSS Copilot integrerad i sidofältet

det gör be att Copilot om HTML-element och CSS-regler från ElementsKräver att Edge-sidofältet är aktivt.

Dynamisk heapprofil

Liveuppdatering heapprofil för att visa minnestrender när du interagerar med sidan.

Tidsskala för heap-sampler

Visa i föreställning a Tidslinje för samplingshögprofiler att studera allokeringar och källskatteavdrag under perioden.

Prestanda: Ogiltigförklaringsspårning

Lägg till ett avsnitt av Omräkna stilsammanfattningsöverskridanden för att ta reda på vilka noder som orsakade dyra omberäkningar.

Prestanda: Visa alla händelser

Växla visning av alla inspelade händelser i spårningssessionen, användbart för grundliga undersökningar.

Prestanda: V8-körningssamtalstatistik

Visar i prestandaverktyget Interna samtalsstatistik för V8-motorn, vilket ger tidskontext i JS.

Prestanda: Förbättrad spårinsamling v2

Gör prestanda Registrera nya spårtyper för det förbättrade v2-formatet som distribueras i Chromium.

Prestanda: Insamling av källtext i kompilerade skript

När du exporterar spårningsfilen, inkluderar källtexten för de kompilerade skripten inom spåret för offline-analys.

Prestanda: Felsökningsläge för spårningshändelse

Lägg till ett avsnitt i Sammanfattning Spåra händelse med namn, varaktighet och felsökningsinformation av den valda händelsen.

Instrumentationsbrytpunkter

Det förbättrar tillförlitlighet vid stopp vid instrumentbrytpunkter, vilket underlättar inspektioner vid kritiska punkter i rörledningen.

Använda omfattningsinformation från källkartor

Tillåter DevTools använd omfångskontexten för källkartor att erbjuda felsökning som är mer trogen den ursprungliga koden.

Ursprungstestning: Aktivera experimentella API:er på din webbplats

När du vill testa med riktiga användare utan att kräva ändringar, använd källkodstestning. En token aktiverar tillfälligt ett experimentellt API för din domän i Microsoft Edge., även om funktionen är inaktiverad som standard i webbläsaren.

Drift: Edge identifierar ursprungstoken i din HTML- eller HTTP-header och sätter internt experimentflaggan för det ursprunget. Användaren behöver inte röra edge://flags eller installera något.

Registrering och erhållande av token

Steg: Gå till sidan för Microsoft Edge Origin-testning, Välj ett aktivt test och acceptera villkorenOm du uppmanas att göra det, logga in (till exempel med GitHub) och fyll i formuläret som anger din domän eller underdomän.

Du kan registrera dig: en enskild domän, en specifik underdomän eller domänen plus alla dess underdomänerSökvägar och parametrar stöds inte; de ​​är avkortade till roten. När du skickar in din token genereras den och visas i avsnittet Loggar.

Hur man använder token i produktion

Sätt in token som metatagg i huvudet eller som svarsrubrik. Exempel: <meta http-equiv='origin-trial' content='EXAMPLE_TOKEN'> rubriken Origin-Trial: EXAMPLE_TOKEN. Att sluta delta, ta bort meta- eller rubrikkoden.

Identifiera funktioner och förbered bokningar

Behandla tester som experimentella. Använd funktionsidentifiering och lägg till alternativa funktioner när API:et inte är tillgängligt, om tokenet går ut eller om teamet beslutar att avsluta experimentet i förtid. Se MDN:s guide för funktionsidentifiering.

Testning på localhost och utgångsdatum

Tokenmekanismen fungerar inte på lokal värdFör att utveckla lokalt, aktivera lämplig flagga i edge://flags. Tokens är vanligtvis upphör efter 6 veckorförnya dem från sidan Origin Tests när det är lämpligt.

Varaktighet och tidigt slut

Ett prov kan pågå till det planerade datumet eller stänger tidigt av säkerhets- eller designskälOm tidsfristen löper ut i förtid kommer utvecklarna att kontaktas via e-post.

Skicka feedback om din upplevelse

Från testsidan, Klicka på knappen Kommentarer för att öppna fliken Problem i arkivet. och dokumentera ditt användningsfall och dina resultat. Denna information är avgörande för standardisering.

Webbläsarflaggor: Aktivera plattformsfunktioner i Edge

Flaggor är dolda brytare i Chromium-baserade webbläsare. I Edge, navigera till edge://flags för att aktivera funktioner under utveckling. såsom webbplattforms-API:er eller förändringar i webbläsarbeteende.

Varning: Dessa alternativ är experimentella. Det rekommenderas inte att ändra dem i din dagliga webbläsare.Gör detta på utvecklingskanaler (Beta, Dev eller Canary) och endast när du blir instruerad att göra det av betrodd vägledning.

about://, chrome:// och edge://: tricket för alla Chromium-lösningar

Alla Chromium-webbläsare löser interna scheman. Om du skriver chrome://flags i Edge, skrivs det om till edge://flagsFör inkluderande dokumentation, använd about://flags: varje webbläsare skriver om den till sitt korrekta schema.

Användbara flaggor och praktiska exempel i Edge

Vissa Edge-specifika flaggor är mycket praktiska. Nedan ser du exempel som du kan aktivera från edge://flags och illustrera hur man arbetar med avsnittet.

Förbättra textkontrasten

En Windows, aktiva edge://flags/#edge-enhance-text-contrast till Använd systemkontrast och gamma vid rendering av teckensnitt, vilket uppnår en mer homogen avläsning.

Blockera automatisk uppspelning av multimedia

med edge://flags/#edge-autoplay-user-setting-block-option du aktiverar alternativet att blockera autouppspelningGå sedan till Inställningar > Cookies och webbplatsbehörigheter > Autouppspelning eller gå till edge://settings/content/mediaAutoplay.

Navigera bakåt med Backspace-tangenten

Flaggan edge://flags/#edge-backspace-key-navigate-page-back tillåta gå bakåt med Backsteg och framåt med Skift+BackstegDet är mycket användbart om du främst surfar med ett tangentbord.

Flikar med rundade hörn

Om du föredrar ett mjukare utseende, edge://flags/#edge-visual-rejuv-rounded-tabs runt ögonfransarnas fyra hörn och separerar dem visuellt från adressfältet.

Smidig PDF-skrollning

Gör det möjligt edge://flags/#edge-smooth-scrolling-enabled-pdf till smidigare rullning vid visning av dokument PDF integrerad i webbläsaren.

Skicka innehåll till Chromecast

Om alternativet Sänd inte fungerar, aktivera dessa tre flaggor: #load-media-router-component-extension, #global-media-controls-for-cast y #mirroring-serviceEfter en omstart bör du kunna skicka flikar, skrivbord eller filer.

Sovflikar för att spara resurser

I Edge-utvecklingskanalerna kan du aktivera Sleeping Tabs för att Sätt inaktiva flikar i viloläge och minska RAM-användningenHitta alternativet efter namn, aktivera det och justera timeout-tiden i Inställningar > System > Spara resurser. Du kan också ha en vitlista över webbplatser som inte ska sättas i viloläge..

Goda vanor vid experiment

Innan du rör vid något, förbered din omgivning. Använd Edge Canary eller Dev för testning, håll stabil för dagligt arbete och dokumentera vad du aktiverade och varför. Om något går fel vet du vad du ska återställa.

När man använder källtester, implementerar funktionsdetektering och alternativa rutterAPI:er kan ändras, löpa ut eller tas ur bruk; din produkt bör inte sluta fungera om de försvinner.

Be inte dina användare att ändra webbläsarflaggor. Märken är avsedda för utvecklingsmiljöer, inte produktionsmiljöer.Om du behöver användartestning, använd källtesttokens och segmentera din distribution.

Slutligen, kom ihåg det Experimentella funktioner kan vara instabila eller otillförlitligaOm prestandan försämras, inaktivera icke-nödvändiga funktioner och återställ DevTools till standardinställningarna vid behov.

Genom att utforska Edges experimentella funktioner kan du validera nya API:er, förbättra ditt felsökningsarbetsflöde och förbereda dig för mer robusta utgåvor. Mellan DevTools Experiments, edge://flags-flaggor och källkodstester har du ett komplett utbud av alternativ. för varje utvecklingsstadium: från lokal forskning till kontrollerad testning med riktiga användare, alltid med tydliga varningar, återställningsmetoder och riktlinjer för att rapportera användbar feedback till Microsoft-teamet och Chromium-communityn.