Nowości w DevTools w Chrome 135

Sofia Emelianova
Sofia Emelianova
GitHub

Ulepszenia panelu wydajności

Ta wersja wprowadza szereg ulepszeń w panelu Wydajność.

Linki do źródeł i skryptów w przypadku wywołań profilu i funkcji w sekcji Skuteczność

Na karcie Skuteczność > Podsumowanie są teraz widoczne linki do odpowiednich skryptów i źródeł wywołań profilu i funkcji, więc nie musisz najeżdżać kursorem na te zdarzenia na ścieżce Główna.

Karta Podsumowanie przed dodaniem źródła i pochodzenia oraz po jego dodaniu.

Dodatkowo ścieżki Sieć i Główna wyświetlają teraz nazwy firm zewnętrznych (jeśli takie istnieją) w dymkach po najechaniu kursorem na zdarzenia.

Problem w Chromium: 368541957.

Obsługa danych z terenu w przypadku danych „LCP według etapu”

Gdy dane z terenu są włączone, statystyka Skuteczność > Statystyki > LCP według fazy zawiera teraz dodatkową tabelę z czasami obrazów na 75 percentylu z Raportu na temat użytkowania Chrome. Dzięki temu możesz porównywać czasy bezpośrednio w statystykach.

Przed i po dodaniu danych z pomiarów do statystyki „LCP według fazy”.

Statystyka „Drzewo zależności sieciowych”

Na karcie Skuteczność > Statystyki dodaliśmy do kolekcji nową statystykę Drzewo zależności sieciowych. Informacja ta wskazuje, czy masz połączone żądania krytyczne, co nie jest zalecane. Najedź kursorem na żądania wymienione w statystykach, aby zobaczyć je wyróżnione na ścieżce Sieć.

Więcej informacji znajdziesz w artykule Unikaj tworzenia łańcuchów żądań krytycznych.

Wyróżnienie najbardziej obciążającego stosu

Panel Skuteczność wyróżnia teraz elementy na ścieżce Główna, gdy najedziesz na nie w panelu Drzewo wywołań lub Od dołu do góry > Najcięższy stos na pasku bocznym, a pozostałe elementy przyciemnia. Dzięki temu możesz wizualnie znaleźć zagnieżdżone elementy w stosie wywołań, które zajmują najwięcej czasu.

Widok drzewa ułatwień dostępu w panelu Elementy

Widok drzewa ułatwień dostępu na całej stronie jest teraz domyślnie włączony w panelu Elementy.

Wcześniej można było przeglądać osobne drzewo ułatwień dostępu na karcie Elementy > Ułatwienia dostępu. Teraz możesz klikać przycisk Przełącz na widok drzewa ułatwień dostępu w prawym górnym rogu drzewa DOM w panelu Elementy, aby przełączać się między drzewem DOM a drzewem ułatwień dostępu na całej stronie. Dzięki temu możesz łatwiej je przeglądać i sprawdzać ich wzajemne powiązania.

Widok przed i po włączeniu drzewa ułatwień dostępu na całej stronie jako widoku domyślnego .

Drzewo ułatwień dostępu umożliwia sprawdzenie, jak technologie wspomagające widzą Twoje treści, oraz wyświetla atrybuty ARIA i obliczone właściwości ułatwień dostępu węzłów DOM. Więcej informacji znajdziesz w artykule Pełne drzewo ułatwień dostępu w Narzędziach deweloperskich w Chrome.

Problem z Chromium: 40808541.

Ulepszone stany puste w różnych panelach

Puste stany (gdy nic nie jest otwarte) w różnych panelach, sekcjach i kartach zostały uproszczone, aby dokładnie informować, co należy zrobić, aby zacząć z nimi pracować. Niektóre puste stany, np. w panelu Sieć, mają teraz przydatne przyciski, np. Ponownie załaduj stronę.

Przed i po ulepszeniu pustych stanów w panelach Sieć i Wyszukiwanie.

Opcja „Zapytaj AI” została przeniesiona na dół menu

Opcja Zapytaj AI znajduje się teraz u dołu menu, a nie u góry.

Widok przed i po przeniesieniu opcji „Zapytaj AI” na dół menu.

Swoją opinię możesz przesłać w panelu pomocy AI na stronie crbug.com/364805393.

Lighthouse 12.4.0

Panel Lighthouse działa teraz w wersji 12.4.0.

W tej wersji niektóre audyty wydajności są oznaczane jako informacyjne w przypadku spełnienia warunków, a nie ukrywane w sekcji audytów, które zakończyły się powodzeniem. Zobacz pełną listę zmian.

Podstawowe informacje o korzystaniu z panelu Lighthouse w Narzędziach deweloperskich znajdziesz w artykule Lighthouse: optymalizacja szybkości witryny.

Problem w Chromium: 40543651.

Różne wyróżnione informacje

Oto kilka ważnych poprawek i ulepszeń w tej wersji:

  • Skuteczność > Podsumowanie: zastąpiliśmy 2 wiersze Łączny czas i Czas własny 1-wierszową wartością Czas trwania, która w nawiasach pokazuje też wartość (self time) (jeśli występuje) (crbug.com/395572753).
  • Problemy: dodaliśmy nowe typy problemów: <select> problemy w drzewie dostępności i błędy podpisu wiadomości SRI, które występują podczas analizowania lub weryfikacji w usłudze sieciowej (crbug.com/381044049, crbug.com/347890366).
  • Ułatwienia dostępu: karta Elementy > Style zawiera teraz kontury elementów, po których poruszasz się za pomocą nawigacji klawiaturowej (crbug.com/396311936).
  • Elementy: problemy z <select> są teraz obsługiwane i wyróżniane falistym podkreśleniem (crbug.com/378738916).
  • Sieć: ikony „override dot” i ostrzeżenia o plikach cookie są teraz wyświetlane po prawej stronie nazwy karty, a nie po lewej (crbug.com/390556283).

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.

Co nowego w Narzędziach deweloperskich

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