Nowości w DevTools w Chrome 135

Sofia Emelianova
Sofia Emelianova
GitHub

Ulepszenia panelu wydajności

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

Pochodzenie i linki do skryptów w przypadku wywołań profilu i funkcji w sekcji Skuteczność

Na karcie Skuteczność > Podsumowanie znajdziesz teraz linki do odpowiednich skryptów i źródeł wywołań profili i funkcji, dzięki czemu nie musisz najeżdżać kursorem na te zdarzenia na ścieżce Główna.

Widok przed dodaniem źródła i pochodzenia oraz po dodaniu tych informacji na karcie Podsumowanie.

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 pokazuje teraz w dodatkowej tabeli czasy obrazów na 75 percentylu z Raportu na temat użytkowania Chrome, dzięki czemu możesz porównywać czasy bezpośrednio w statystyce.

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 kursorem na pasku bocznym Drzewo wywołań lub Od dołu > Najcięższy stos, a pozostałe elementy są przyciemnione. Dzięki temu możesz wizualnie znaleźć w stosie wywołań zagnieżdżone elementy, 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 kliknąć 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.

Przed i po włączeniu widoku drzewa ułatwień dostępu na całej stronie jako 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 nich korzystać. Niektóre stany puste, np. w panelu Sieć, mają teraz przydatne przyciski, np. Załaduj ponownie 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.

Możesz przesłać opinię 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ą wykrywać problemy w witrynie, zanim zauważą je użytkownicy.

Skontaktuj się 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.