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

Jecelyn Yeen

Odtwarzanie krok po kroku w Dyktafonie

W panelu Rejestrator możesz teraz ustawić punkt przerwania i odtwarzać wzorzec przeglądania krok po kroku.

Aby ustawić punkt przerwania, kliknij niebieską kropkę obok kroku. Odtwórz ścieżkę użytkownika. Odtwarzanie zostanie wstrzymane przed wykonaniem kroku. W tym miejscu możesz kontynuować odtwarzanie, wykonać krok lub anulować odtwarzanie.

Dzięki tej funkcji możesz łatwo wizualizować i debugować ścieżkę użytkownika.

Więcej informacji znajdziesz w dokumentacji funkcji rejestratora.

Problem w Chromium: 1257499

Obsługa zdarzenia najechania kursorem myszy w panelu Rejestrator

Aplikacja Dyktafon obsługuje teraz ręczne dodawanie kroku najechania kursorem myszy w nagraniu.

Ta wersja demonstracyjna pokazuje menu wyskakujące po najechaniu kursorem. Spróbuj zarejestrować ścieżkę użytkownika i kliknąć element menu.

Jeśli teraz odtworzysz ścieżkę użytkownika, operacja się nie powiedzie, ponieważ Dyktafon nie rejestruje automatycznie zdarzeń najechania kursorem myszy podczas nagrywania. Aby rozwiązać ten problem, ręcznie dodaj krok, który spowoduje najechanie kursorem na selektor przed kliknięciem pozycji menu.

Problem w 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 poznać ścieżki krytyczne i 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ę krytyczną zasobu LCP.

Więcej informacji o tym, jak uzyskać przydatne statystyki i zwiększyć wydajność witryny za pomocą tego panelu, znajdziesz w sekcji Statystyki wydajności.

Problem z Chromium: 1326481

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

Panel Statystyki wydajności wykrywa teraz mignięcie niewidocznego tekstu (FOIT) i mignięcie tekstu bez stylu (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 poznać technikę zapobiegania przesunięciom układu, przeczytaj artykuł Optymalizacja wczytywania i renderowania czcionek internetowych.

Problemy z Chromium: 1334628, 1328873

Moduły obsługi protokołów w okienku Manifest

W Narzędziach deweloperskich możesz teraz testować rejestrację modułu obsługi protokołu URL na potrzeby 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 > Manifest otwórz sekcję Obsługa protokołów. Tutaj możesz wyświetlić i przetestować wszystkie dostępne protokoły.

Na przykład zainstaluj tę wersję demonstracyjną PWA. W sekcji Obsługa protokołów wpisz „americano” i kliknij Testuj protokół, aby otworzyć stronę kawy w progresywnej aplikacji internetowej.

Problemy z Chromium: 1300613

Plakietka warstwy najwyższego poziomu w panelu Elementy

Użyj odznaki najwyższej warstwy, aby zrozumieć koncepcję najwyższej warstwy i zobaczyć, jak zmienia się jej zawartość.

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

W tym demo kliknij Otwórz okno.

Aby ułatwić wizualizację elementów najwyższej warstwy, Narzędzia deweloperskie dodają 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 reveal obok elementu lub jego tła w kontenerze najwyższej warstwy.

Obok elementu drzewa najwyższej warstwy (np. elementu okna) kliknij plakietkę top-layer, aby przejść do kontenera najwyższej warstwy.

Problem z Chromium: 1313690

Dołączanie informacji na potrzeby debugowania Wasm w czasie działania

Podczas działania programu możesz teraz dołączać informacje debugowania DWARF dla modułu Wasm. 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. Kliknij prawym przyciskiem myszy w edytorze i wybierz Add DWARF debugging info… (Dodaj informacje debugowania DWARF…), aby dołączyć informacje debugowania na żądanie.

Problem w Chromium: 1341255

Obsługa edycji na żywo podczas debugowania

Możesz teraz edytować funkcję znajdującą się na szczycie stosu bez ponownego uruchamiania debugera.

W Chrome 104 Narzędzia deweloperskie przywracają funkcję ponownego uruchamiania ramki. Nie możesz jednak edytować funkcji, w której obecnie wstrzymujesz działanie. Programiści często przerywają działanie funkcji, a następnie edytują ją w stanie wstrzymania.

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

• Podczas wstrzymania można edytować tylko funkcję znajdującą się na samej górze
• Brak wywołania rekurencyjnego tej samej funkcji w dalszej części stosu

Problem w Chromium: 1334484

Wyświetlanie i edytowanie @scope w regułach w panelu Style

W panelu Style możesz teraz wyświetlać i edytować reguły @scope CSS.

Reguła @scope at rules jest częścią specyfikacji CSS Cascading and Inheritance Level 6. Te reguły umożliwiają deweloperom 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 @scope. Kliknij deklarację reguły, aby ją edytować.

Problem z Chromium: 1337777

Ulepszenia mapy źródłowej

Oto kilka poprawek w mapach źródła, które poprawiają ogólną jakość debugowania:

• Narzędzia deweloperskie prawidłowo rozpoznają teraz identyfikatory mapy źródeł z interpunkcją. Niektóre nowoczesne minifikatory (np. esbuild) generują mapy źródła, które łączą identyfikatory z kolejnymi znakami interpunkcyjnymi (przecinkiem, nawiasami, średnikiem).
• Narzędzia deweloperskie rozwiązują teraz nazwy map źródeł dla konstruktorów za pomocą wywołania super.
• Naprawiliśmy indeksowanie URL-i mapy źródła w przypadku zduplikowanych kanonicznych URL-i. Wcześniej punkty przerwania nie były aktywowane w niektórych plikach z powodu zduplikowanych kanonicznych URL-i.

Problem z Chromium: 1335338, 1333411

Różne wyróżnione informacje

Oto niektóre ważne poprawki w tej wersji:

• Prawidłowe usuwanie pary klucz-wartość z pamięci lokalnej z tabeli w panelu Aplikacja > Pamięć lokalna po jej usunięciu. (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)
• Konsekwentne wyświetlanie elementów flexbox i siatki CSS w panelu Układ oraz wyświetlanie ich jako plakietek w panelu Elementy. Wcześniej elementy flex i grid losowo znikały w obu miejscach. (1340441, 1273992)
• Nowy link Skrypt reklamy twórcy jest dostępny w przypadku ramek reklam, jeśli Narzędzia deweloperskie znajdą skrypt, który spowodował oznaczenie ramki jako reklamy. Ramkę możesz otworzyć, klikając Aplikacja > Ramki. (1217041)

Pobieranie kanałów podglądu

Rozważ używanie Chrome w wersji Canary, deweloperskiej lub beta jako domyślnej przeglądarki do programowania. Te kanały wersji testowych zapewniają dostęp do najnowszych funkcji Narzędzi deweloperskich, umożliwiają testowanie najnowocześniejszych interfejsów API platformy internetowej i pomagają znajdować problemy w witrynie, zanim zrobią to użytkownicy.

Kontakt z zespołem Narzędzi deweloperskich w Chrome

Skorzystaj z tych opcji, aby porozmawiać o nowych funkcjach, aktualizacjach lub innych kwestiach związanych z Narzędziami deweloperskimi.

• Prześlij nam opinię 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 w Narzędziach deweloperskich.
• Wyślij tweeta do @ChromeDevTools.
• Dodawaj komentarze do filmów na YouTube z serii „Co nowego w Narzędziach deweloperskich” lub filmów na YouTube z serii „Wskazówki dotyczące Narzędzi deweloperskich”.

Co nowego w Narzędziach deweloperskich

Lista wszystkich tematów omówionych w serii Nowości w Narzędziach deweloperskich.