Nowości w Narzędziach deweloperskich (Chrome 105)

Jecelyn Yeen

Odtwarzanie krok po kroku w Dyktafonie

W panelu Nagrywarka możesz teraz ustawić punkt przerwania i odtwarzać ścieżkę użytkownika krok po kroku.

Aby ustawić punkt przerwania, kliknij niebieską kropkę obok kroku. Odtwarzanie ścieżki użytkownika. Odtwarzanie zostanie wstrzymane przed wykonaniem kroku. Możesz tu kontynuować odtwarzanie, wykonać krok lub anulować odtwarzanie.

Dzięki tej funkcji możesz w łatwy sposób wizualizować i debugować ścieżkę użytkownika.

Więcej informacji znajdziesz w dokumentacji funkcji narzędzia do nagrywania.

Problem z Chromium: 1257499

Obsługa najechania kursorem na zdarzenie w panelu Dyktafon

Dyktafon obsługuje teraz ręczne dodawanie kroku z wskaźnikiem myszy (zaznaczanie).

W tym pokazie demonstracyjnym po najechaniu kursorem na ikonę pojawia się menu. Spróbuj nagrać ścieżkę użytkownika i kliknąć element menu.

Jeśli teraz odtworzysz przepływ użytkownika, nie uda Ci się tego zrobić, ponieważ nagrywarka nie rejestruje automatycznie zdarzeń związanych z wskazaniem kursorem. Aby rozwiązać ten problem, ręcznie dodaj krok, aby najechać kursorem na selektor przed kliknięciem pozycji menu.

Problem z Chromium: 1257499

Największe wyrenderowanie treści (LCP) w panelu Statystyki wydajności

LCP to ważny wskaźnik związany z wygodą użytkownika, informujący o postrzeganej szybkości wczytywania. Możesz teraz dowiedzieć się, jakie są krytyczne ścieżki i podstawowe przyczyny największego wyrenderowania treści (LCP).

W nagraniu skuteczności kliknij plakietkę LCP na osi czasu. W panelu Szczegóły możesz wyświetlić wynik LCP, dowiedzieć się, jak naprawić zasoby, które spowalniają LCP, i zobaczyć ścieżkę krytyczna zasobu LCP.

Aby dowiedzieć się, jak korzystać z panelu Statystyki wydajności, aby uzyskiwać przydatne statystyki i poprawiać wydajność witryny,

Problem z Chromium: 1326481

Identyfikowanie błysków tekstu (FOIT, FOUT) jako potencjalnych głównych przyczyn przesunięć układu

Panel Statystyki wydajności wykrywa teraz miganie niewidocznego tekstu (FOIT) i miganie tekstu bez stylizacji (FOUT) jako potencjalne główne przyczyny przesunięć układu.

Aby wyświetlić potencjalne główne przyczyny przesunięcia układu, kliknij zrzut ekranu na ścieżce Przesunięcia układu.

Aby dowiedzieć się, jak zapobiegać przesunięciom układu, przeczytaj artykuł Optymalizacja wczytywania i renderowania czcionek internetowych.

Problemy z Chromium: 1334628, 1328873

Moduły obsługi protokołów na karcie Manifest

Teraz możesz używać Narzędzi deweloperskich do testowania rejestracji modułu obsługi protokołu URL w przypadku progresywnych aplikacji internetowych (PWA).

Rejestracja modułu obsługi protokołu URL umożliwia zainstalowanym aplikacjom PWA obsługę linków, które używają określonego protokołu (np. magnet, web+example), co zapewnia bardziej zintegrowane działanie.

W panelu Aplikacja > Plik manifestu otwórz sekcję Obsługa protokołów. Tutaj możesz wyświetlić i przetestować wszystkie dostępne protokoły.

Na przykład zainstaluj demo PWA. W sekcji Procesory protokołów wpisz „americano” i kliknij Testuj protokół, aby otworzyć stronę z kawą w aplikacji PWA.

Problemy z Chromium: 1300613

Plakietka najwyższej warstwy w panelu Elementy

Aby zrozumieć koncepcję warstwy najwyższej i zobaczyć, jak zmienia się jej zawartość, użyj plakietki warstwy najwyższej.

Element <dialog> stał się ostatnio stabilny we wszystkich przeglądarkach. Gdy otworzysz okno dialogowe, zostanie ono umieszczone w najwyższym poziomie. Treści najwyższego poziomu są renderowane na wierzchu wszystkich innych treści.

W tym demo kliknij Otwórz okno dialogowe.

Aby ułatwić wizualizację elementów najwyższej warstwy, DevTools dodaje do drzewa DOM kontener najwyższej warstwy (#top-layer). Znajduje się on po tagu zamykającym </html>.

Aby przejść z elementu kontenera najwyższej warstwy do elementu drzewa najwyższej warstwy, kliknij przycisk pokaż obok elementu lub jego tła w kontenerze najwyższej warstwy.

Obok elementu drzewa najwyższego poziomu (np. elementu dialogu) kliknij plakietkę najwyższego poziomu, aby przejść do kontenera najwyższego poziomu.

Problem z Chromium: 1313690

Dołączanie informacji o debugowaniu Wasm w czasie wykonywania

Teraz możesz dołączać informacje debugowania DWARF dla modułów wasm w czasie działania. Wcześniej panel Źródła obsługiwał tylko dołączanie map źródeł do plików JavaScript i Wasm.

Otwórz plik Wasm w panelu Źródła. Aby dołączyć informacje debugowania na żądanie, kliknij prawym przyciskiem myszy w edytorze i wybierz Dodaj informacje debugowania DWARF….

Problem z Chromium: 1341255

Obsługa edycji na żywo podczas debugowania

Teraz możesz edytować funkcję na szczycie stosu bez ponownego uruchamiania debugera.

W Chrome 104 w Narzędziach deweloperskich przywrócono funkcję Restart frame. Nie możesz jednak edytować funkcji, która jest obecnie wstrzymana. Deweloperzy często wstrzymywali działanie funkcji, a potem edytowali ją w stanie wstrzymania.

W tej aktualizacji debuger automatycznie uruchamia ponownie funkcję z tymi ograniczeniami:

• W trybie wstrzymania można edytować tylko funkcję najwyższego poziomu.
• Brak wywołania rekurencyjnego tej samej funkcji w dalszej części stosu

Problem z Chromium: 1334484

Wyświetlanie i edytowanie reguł @scope w panelu Styl

Reguły @scopeat-rules w CSS@scope możesz teraz wyświetlać i edytować w panelu Style.

Reguły @scope są częścią specyfikacji CSS dotyczącą kaskadowego dziedziczenia na poziomie 6. Te reguły umożliwiają programistom określanie zakresu reguł stylów w CSS.

Otwórz tę stronę demonstracyjną i sprawdź hiperlink w elemencie <div class=”dark-theme”>. W panelu Style wyświetl reguły at-rule @scope. Kliknij deklarację reguły, aby ją edytować.

Problem z Chromium: 1337777

Ulepszenia mapy źródłowej

Oto kilka poprawek map źródeł, które poprawiają ogólne wrażenia podczas debugowania:

• Narzędzia deweloperskie poprawnie rozwiązują identyfikatory mapy źródeł z interpunkcjami. Niektóre nowoczesne narzędzia do kompresji (np. esbuild) generują mapy źródłowe, które łączą identyfikatory z następującymi znakami interpunkcyjnymi (przecinkami, nawiasami, średnikami).
• Narzędzia deweloperskie rozwiązują teraz nazwy map źródeł w przypadku konstruktorów z wywołaniem super.
• Naprawiono indeksowanie adresów URL mapy źródeł w przypadku duplikatów kanonicznych adresów URL. Wcześniej w niektórych plikach punkty kontrolne nie były aktywowane z powodu duplikatów kanonicznych adresów URL.

Problem z Chromium: 1335338, 1333411

Inne najciekawsze momenty

Oto kilka istotnych poprawek w tej wersji:

• Po usunięciu pary klucz-wartość z pamięci lokalnej usuń ją z tabeli na panelu Aplikacja > Pamięć lokalna. (1339280)
• Podglądy kolorów są teraz prawidłowo wyświetlane podczas przeglądania plików CSS w panelu Źródła. Wcześniej ich pozycje były nieprawidłowe. (1340062)
• wyświetlać elementy flex i siatki CSS w panelu Układ oraz jako plakietki w panelu Elementy, Wcześniej elementy elastyczne i elementy siatki były losowo usunięte w obu miejscach. (1340441, 1273992)
• W przypadku ramek reklamy dostępny jest nowy link do skryptu reklamy twórcy, jeśli narzędzia programistyczne wykryły skrypt, który spowodował, że dana rama została oznaczona jako reklama. Możesz otworzyć ramkę, klikając Aplikacja > Ramki. (1217041)

Pobieranie kanałów podglądu

Rozważ użycie jako domyślnej przeglądarki deweloperskiej wersji Canary, Dev lub Beta przeglądarki Chrome. Te kanały wersji wstępnej zapewniają dostęp do najnowszych funkcji DevTools, umożliwiają testowanie najnowocześniejszych interfejsów API platformy internetowej i pomagają znaleźć problemy w witrynie, zanim zrobią to użytkownicy.

Kontakt z zespołem Narzędzi deweloperskich w Chrome

Aby omówić nowe funkcje, aktualizacje lub inne kwestie związane z Narzędziami deweloperskimi, skorzystaj z tych opcji.

• Przesyłaj opinie i prośby o dodanie funkcji na stronie crbug.com.
• Zgłoś problem z Narzędziami deweloperskimi, klikając more_vert Więcej opcji > Pomoc > Zgłoś problem z Narzędziami deweloperskimi.
• Wyślij tweeta do @ChromeDevTools.
• Dodaj komentarze do filmów w YouTube z serii „Co nowego w Narzędziach deweloperskich” lub Wskazówki dotyczące Narzędzi deweloperskich.

Co nowego w Narzędziach deweloperskich

Lista wszystkich tematów omawianych w cyklu artykułów Co nowego w Narzędziach deweloperskich.