Włącz flagi eksperymentalne i testowanie źródła dla nowych interfejsów API sieci Web w przeglądarce Edge

Jeśli pracujesz z nowymi interfejsami API i chcesz być na bieżąco, Microsoft Edge oferuje kilka sposobów włączania funkcji, które nie są jeszcze dostępne w wersji stabilnej. Należą do nich eksperymenty DevTools, flagi przeglądarki i testowanie kodu źródłowego . W tym przewodniku zebraliśmy wszystko w jednym miejscu, aby umożliwić Ci bezpieczne testowanie, porównywanie podejść i unikanie problemów z wydajnością lub zgodnością.

Oprócz znanych flag edge://flags, Edge integruje stronę „Eksperymenty” z narzędziami programistycznymi (DevTools) za pomocą pól wyboru , które odblokowują funkcje będące w fazie rozwoju. A jeśli potrzebujesz przetestować rozwiązanie z prawdziwymi użytkownikami w środowisku produkcyjnym, dostępne są testy źródłowe z tokenami ograniczonymi czasowo . Wyjaśniamy, jak włączyć każdą opcję, jakie ryzyko się z tym wiąże i kiedy każda z nich jest odpowiednia.

Jakie masz możliwości włączenia funkcji eksperymentalnych w przeglądarce Edge?

W przeglądarce Edge funkcje można aktywować na trzy uzupełniające się sposoby, w zależności od scenariusza. Po pierwsze, na stronie „Eksperymenty” w Narzędziach Deweloperskich, aby zmienić działanie samych narzędzi . Po drugie, używając flag przeglądarki w Edge://flags, aby zmodyfikować środowisko wykonawcze Chromium. Po trzecie, za pomocą testów źródłowych, aby włączyć określone API dla użytkowników witryny za pomocą tokena serwera lub metatagu.

Ważne jest, aby wyraźnie rozróżnić te pojęcia: flagi i eksperymenty wpływają na Twoją przeglądarkę lokalną , podczas gdy testy źródłowe umożliwiają korzystanie z interfejsów API użytkownikom Twojej witryny bez konieczności zmiany ich ustawień. To rozróżnienie jest kluczowe dla uniknięcia mieszania przepływów pracy i doboru odpowiedniej metody dla każdej fazy rozwoju.

Jak włączać i wyłączać eksperymenty w DevTools

Strona Eksperymenty DevTools zapewnia dostęp do funkcji w fazie rozwoju, które mogą się zmieniać między wersjami. Włączaj je tylko wtedy, gdy potrzebujesz ich do debugowania lub analizy . Pamiętaj, że mogą wymagać ponownego uruchomienia DevTools.

Szybkie kroki: Otwórz Narzędzia Deweloperskie, klikając prawym przyciskiem myszy na stronie i wybierając „Inspect” (lub użyj Ctrl+Shift+I w systemie Windows/Linux, Command+Option+I w systemie macOS). Na pasku narzędzi Narzędzia Deweloperskie przejdź do Ustawień i wybierz stronę „Eksperymenty”. Zaznacz lub odznacz pola wyboru w razie potrzeby i kliknij „Reload DevTools”, aby zastosować zmiany.

Przywróć wartości domyślne eksperymentów

Jeśli wystąpi niestabilność lub spowolnienie, możesz powrócić do stanu początkowego. Otwórz Narzędzia Deweloperskie, przejdź do Ustawień i na stronie Preferencje kliknij przycisk Przywróć ustawienia domyślne i odśwież. Po zamknięciu Narzędzi Deweloperskich zostaną przywrócone domyślne ustawienia eksperymentu.

Filtruj i lokalizuj eksperymenty w DevTools

Aby znaleźć konkretne pole wyboru, użyj pola „Filtruj tekst” na stronie „Eksperymenty” . Podczas wpisywania zobaczysz tylko opcje pasujące do Twojego tekstu. Wyczyść filtr, aby wyświetlić pełną listę.

Jak przesłać opinię do zespołu Edge DevTools

Firma Microsoft prosi o szczegółowe opinie na temat tych funkcji. W przypadku napotkania jakichkolwiek problemów lub sugestii prosimy o kontakt z zespołem Edge DevTools za pośrednictwem oficjalnych kanałów . Im bardziej szczegółowy będzie Twój raport, tym bardziej pomocny będzie w ustabilizowaniu funkcji.

Lista aktualnych eksperymentów w DevTools

Poniższa lista podsumowuje dostępne pola wyboru w najnowszej wersji Canary i ich stabilnych odpowiednikach. Zasadniczo są one dostępne w wersjach Edge Canary 140 i Edge Stable 138 , o ile nie zaznaczono inaczej.

Przechwytywanie stosów tworzenia węzłów

Umożliwia zbieranie śladów stosu JavaScript podczas dodawania węzłów do DOM w czasie wykonywania. Dodaje kartę Ślad stosu do sekcji Elementy, obok sekcji Styl, aby sprawdzić pochodzenie wstawienia.

Monitor protokołu

Aktywuj narzędzie Monitor Protokołu, aby wyświetlić komunikaty CDP wysłane i odebrane przez DevTools . Dostęp do niego można uzyskać w menu Więcej Narzędzi lub w menu Poleceń, wyszukując hasło „protokół”.

Opcja udostępniania elementów wewnętrznych w migawkach sterty

Wyświetla pole wyboru w narzędziu Pamięć, aby udostępnić wewnętrzne elementy w migawkach sterty i ułatwić zaawansowaną diagnostykę.

Pionowa konfiguracja szuflad

Oznaczone jako nowe od wersji Edge 139. Obecnie nie ma praktycznego zastosowania ; aby przenieść Szybki podgląd, użyj osobnego przycisku dokowania po prawej stronie. Nie pojawia się w wersji stabilnej 138.

Kontrast percepcyjny APCA w próbniku kolorów

Zastępuje on stare współczynniki AA/AAA algorytmem APCA , który oblicza kontrast na podstawie kontekstu, grubości i rozmiaru czcionki oraz warunków środowiskowych.

Widok drzewa z pełną dostępnością w Elements

Dodaj przycisk umożliwiający przełączanie między drzewem DOM a drzewem dostępności w narzędziu Elementy, zmieniając widok zależnie od potrzeb.

Nowy wizualny edytor czcionek w Stylach

Przedstawiono Edytor czcionek umożliwiający zmianę jednostek, przełączanie słów kluczowych, konwersję i generowanie dokładnych arkuszy CSS dla właściwości typograficznych bez opuszczania karty Style.

Automatyczne raporty kontrastu w panelu Problemy

Umożliwia automatyczne wykrywanie i raportowanie problemów z kontrastem, dostępnych w narzędziu Problemy, wraz z odpowiednią dokumentacją i zasobami.

Charakterystyka ciasteczek eksperymentalnych

Umożliwia testowanie eksperymentalnych funkcji związanych z plikami cookie , co jest przydatne przy sprawdzaniu poprawności zmian na platformie przed ich wysłaniem.

Podświetl węzeł lub atrybut powodujący błąd w DOM

Podświetlaj problematyczne węzły lub atrybuty w drzewie DOM , aby przyspieszyć wykrywanie błędów w znacznikach lub regułach.

Grupuj początki w drzewach utworzonych i wdrożonych

W Origins rozdziel zasoby na foldery autorskie (utworzone) i produkcyjne (wdrożone) , aby odróżnić kod oryginalny od kodu spakowanego.

Ukryj kod na liście pomijania w widoku Źródła

Umożliwia ukrycie kodu oznaczonego do pominięcia w drzewie Źródeł , dzięki czemu nawigacja między odpowiednimi plikami staje się łatwiejsza.

Wydajność: strumienie postMessage

W ścieżce głównej rozróżniane są zdarzenia Schedule postMessage i On message , połączone ze strzałkami inicjatora w celu analizy kolejek i kontrolerów pomiędzy wątkami.

Wydajność: Panel Eksperymentalnych Spostrzeżeń

Dodaj więcej informacji do paska bocznego „Insights” . Najpierw włącz „Insights”, a następnie jego wersję eksperymentalną, aby zobaczyć jeszcze więcej danych.

Konsola: Rejestruj nieprzechwycone wyjątki narzędzi deweloperskich

Określa, czy wewnętrzne wyjątki DevTools są rejestrowane w konsoli , co jest przydatne przy debugowaniu samego środowiska narzędzi.

Włącz webhint w Problemach

Zintegruj webhint, aby wyświetlać sugestie dotyczące dostępności, zgodności, bezpieczeństwa, wydajności i aplikacji PWA w panelu Problemy, z linkami do powiązanych narzędzi.

Pokaż problemy w elementach

Podkreśla falistą linią wykryte błędy składniowe w DOM , zapewniając bezpośredni dostęp do wyjaśnienia problemu.

Otwórz pliki źródłowe w programie Visual Studio Code

Zastąp edytor kodu Origins programem VS Code dla plików lokalnych. Po wybraniu folderu roboczego linki otwierają plik bezpośrednio w programie VS Code , a zmiany są synchronizowane na żywo.

Adaptacyjne ograniczanie procesora

Aktywuje strategię dynamicznego ograniczania przepustowości procesora w celu testowania wydajności w różnych warunkach.

CSS Copilot zintegrowany z paskiem bocznym

Umożliwia zapytanie Copilota o elementy HTML i reguły CSS z Elements . Wymaga aktywnego paska bocznego Edge.

Dynamiczny profil sterty

Aktualizowany na żywo profil pamięci pozwala śledzić trendy pamięci podczas interakcji ze stroną.

Skala czasowa próbnika sterty

Wydajność wyświetla oś czasu generatora profilu sterty próbkowania w celu zbadania alokacji i retencji na przestrzeni czasu.

Wydajność: śledzenie unieważnień

Dodaj sekcję Unieważnienia do podsumowania Przelicz styl, aby dowiedzieć się, które węzły spowodowały kosztowne przeliczenia.

Wydajność: Pokaż wszystkie wydarzenia

Przełącza wyświetlanie wszystkich zdarzeń zarejestrowanych w sesji śledzenia, co jest przydatne podczas szczegółowych dochodzeń.

Wydajność: statystyki wywołań środowiska wykonawczego V8

Narzędzie Wydajność wyświetla wewnętrzne metryki wywołań silnika V8 , zapewniając kontekst czasowy w JS.

Wydajność: Ulepszone zbieranie śladów w wersji 2

Dzięki temu Performance przechwytuje nowe typy śladów dla ulepszonego formatu v2 wprowadzanego w Chromium.

Wydajność: zbieranie tekstu źródłowego w skompilowanych skryptach

Podczas eksportowania pliku śledzenia należy uwzględnić tekst źródłowy skompilowanych skryptów w celu przeprowadzenia analizy offline.

Wydajność: tryb debugowania zdarzeń śledzenia

Dodaj sekcję Zdarzenie śledzone do Podsumowania zawierającą nazwę, czas trwania i informacje debugowania dla wybranego zdarzenia.

Punkty przerwania instrumentacji

Zwiększa niezawodność poprzez zatrzymywanie się w punktach przerwania pomiarów , ułatwiając inspekcje w krytycznych punktach rurociągu.

Korzystanie z informacji o zakresie z map źródłowych

Umożliwia narzędziom DevTools korzystanie z kontekstu zakresu map źródłowych w celu zapewnienia debugowania wierniejszego od oryginalnego kodu.

Testowanie pochodzenia: włącz eksperymentalne interfejsy API w swojej witrynie

Jeśli chcesz testować z prawdziwymi użytkownikami bez proszenia ich o wprowadzanie zmian, skorzystaj z testowania źródłowego. Token tymczasowo włącza eksperymentalny interfejs API dla Twojej domeny w przeglądarce Microsoft Edge , nawet jeśli ta funkcja jest domyślnie wyłączona w przeglądarce.

Jak to działa: Edge wykrywa token testowy pochodzenia w nagłówku HTML lub HTTP i wewnętrznie aktywuje flagę dla tego pochodzenia. Użytkownik nie musi dotykać edge://flags ani niczego instalować.

Rejestracja i uzyskanie tokena

Kroki: Przejdź do strony testowania źródła Microsoft Edge, wybierz aktywny test i zaakceptuj warunki . Jeśli pojawi się monit, zaloguj się (na przykład za pomocą GitHub) i wypełnij formularz, podając swoją domenę lub subdomenę.

Możesz zarejestrować: pojedynczą domenę, konkretną subdomenę lub domenę i wszystkie jej subdomeny . Ścieżki i parametry nie są obsługiwane; rejestracja jest ograniczona do domeny głównej. Po przesłaniu token zostanie wygenerowany i będzie widoczny w sekcji „Rejestracje”.

Jak używać tokena w środowisku produkcyjnym

Włóż token jako meta tag w nagłówku lub jako nagłówek odpowiedzi. Przykłady: <meta http-equiv='origin-trial' content='EXAMPLE_TOKEN'> nagłówek Origin-Trial: EXAMPLE_TOKEN. Aby przestać uczestniczyć, usuń meta lub nagłówek.

Wykrywaj obiekty i przygotowuj rezerwacje

Traktuj testy jako eksperymentalne. Korzystaj z wykrywania funkcji i dodawaj rozwiązania awaryjne, gdy API jest niedostępne , gdy token wygaśnie lub gdy zespół zdecyduje się zakończyć eksperyment przed czasem. Zapoznaj się z przewodnikiem MDN dotyczącym wykrywania funkcji.

Testowanie na komputerze lokalnym i wygaśnięcie

Mechanizm tokenów nie działa na komputerze lokalnym . Aby programować lokalnie, należy włączyć odpowiednią flagę na edge://flags. Tokeny zazwyczaj wygasają po 6 tygodniach ; w razie potrzeby można je odnowić na stronie Origin Testing.

Czas trwania i wczesny koniec

Wersja próbna może trwać do planowanego terminu zakończenia lub zostać zamknięta przed terminem ze względów bezpieczeństwa lub projektowych . W przypadku zakończenia przed terminem organizatorzy skontaktują się z zarejestrowanymi programistami drogą mailową.

Prześlij opinię na temat swojego doświadczenia

Na stronie testowej kliknij przycisk „Komentarze”, aby otworzyć kartę „Zgłoszenia” w repozytorium i udokumentować swój przypadek użycia oraz wyniki. Te dane wejściowe są kluczowe dla standaryzacji.

Flagi przeglądarki: włącz funkcje platformy w Edge

Flagi to ukryte przełączniki w przeglądarkach opartych na Chromium. W Edge przejdź do edge://flags, aby włączyć funkcje będące w fazie rozwoju , takie jak interfejsy API platform internetowych lub zmiany w zachowaniu przeglądarki.

Ostrzeżenie: Te opcje są eksperymentalne. Nie zaleca się ich zmiany w przeglądarce, z której korzystasz na co dzień. Zrób to w kanałach rozwojowych (Beta, Dev lub Canary) i tylko wtedy, gdy zaleci to wiarygodny przewodnik.

about://, chrome:// i edge://: trik dla każdego Chromium

Wszystkie przeglądarki Chromium rozwiązują schematy wewnętrzne. Jeśli wpiszesz chrome://flags w Edge, zostanie ono zastąpione przez edge://flags . Aby zapewnić pełną dokumentację, użyj about://flags: każda przeglądarka nadpisuje to swoim poprawnym schematem.

Przydatne flagi i praktyczne przykłady w Edge

Niektóre flagi specyficzne dla Edge'a są bardzo przydatne. Poniżej znajdują się przykłady, które można włączyć z poziomu edge://flags , ilustrujące sposób pracy z tą sekcją.

Popraw kontrast tekstu

En Windows, aktywny edge://flags/#edge-enhance-text-contrast dla Podczas renderowania czcionek należy używać kontrastu systemowego i gammy, uzyskując bardziej jednorodny odczyt.

Blokuj automatyczne odtwarzanie multimediów

z edge://flags/#edge-autoplay-user-setting-block-option włączasz opcję blokowania automatycznego odtwarzaniaNastępnie przejdź do Ustawienia > Pliki cookie i uprawnienia witryn > Automatyczne odtwarzanie lub przejdź do edge://settings/content/mediaAutoplay.

Aby wrócić, użyj klawisza Backspace

Flaga edge://flags/#edge-backspace-key-navigate-page-back dopuszczać cofnij się za pomocą Backspace i przejdź dalej za pomocą Shift+Backspace. Jest to bardzo przydatne, jeśli przeglądasz głównie za pomocą klawiatury.

Zakładki z zaokrąglonymi rogami

Jeśli wolisz łagodniejszy wygląd, edge://flags/#edge-visual-rejuv-rounded-tabs wokół czterech rogów rzęs i wizualnie oddziela je od omniboksu.

Płynne przewijanie plików PDF

Włączyć edge://flags/#edge-smooth-scrolling-enabled-pdf dla płynniejsze przewijanie podczas przeglądania dokumentów PDF zintegrowany z przeglądarką.

Wyślij zawartość do Chromecasta

Jeśli opcja Broadcast nie działa, włącz te trzy flagi: #load-media-router-component-extension, #global-media-controls-for-cast y #mirroring-servicePo ponownym uruchomieniu będziesz mógł wysłać karty, pulpit lub pliki.

Tabletki do spania, aby oszczędzać zasoby

W kanałach dla programistów przeglądarki Edge możesz włączyć funkcję Uśpione karty, aby hibernować nieaktywne karty i zmniejszyć zużycie pamięci RAM . Wyszukaj opcję po nazwie, włącz ją i dostosuj limit czasu w Ustawieniach > System > Oszczędzanie zasobów. Możesz również utworzyć białą listę stron, których nie należy usypiać.

Dobre praktyki podczas eksperymentowania

Zanim cokolwiek uruchomisz, przygotuj środowisko. Używaj Edge Canary lub Dev do testów, zachowaj wersję stabilną do codziennej pracy i dokumentuj, co włączyłeś i dlaczego. Jeśli coś pójdzie nie tak, będziesz wiedział, co przywrócić.

Podczas testowania źródła zaimplementuj odkrywanie funkcji i ścieżki alternatywne . Interfejsy API mogą ulec zmianie, wygasnąć lub zostać wycofane; Twój produkt nie powinien przestać działać, jeśli znikną.

Nie proś użytkowników o zmianę flag przeglądarki. Flagi są przeznaczone do zastosowań deweloperskich, a nie produkcyjnych . Jeśli potrzebujesz testów z użytkownikami, użyj tokenów testowych źródłowych i segmentuj wdrożenie.

Na koniec pamiętaj, że funkcje eksperymentalne mogą być niestabilne lub zawodne . Jeśli wydajność spadnie, wyłącz funkcje nieistotne i przywróć wartości domyślne w narzędziach deweloperskich, gdy będzie to konieczne.

Eksperymentalne możliwości Edge'a pozwalają na walidację nowych interfejsów API, usprawnienie procesu debugowania i przygotowanie się do bardziej zaawansowanych wydań. Dzięki eksperymentom DevTools, flagom w edge://flags i testowaniu kodu źródłowego, masz do dyspozycji szeroki wachlarz narzędzi na każdym etapie rozwoju: od lokalnych badań po kontrolowane testy z udziałem rzeczywistych użytkowników, zawsze z jasnymi ostrzeżeniami, metodami wycofywania zmian i wytycznymi dotyczącymi przekazywania cennych informacji zespołowi Microsoft i społeczności Chromium.