Nowości w DevTools w Chrome 135

Sofia Emelianova
Sofia Emelianova
GitHub

Ulepszenia panelu wydajności

Ta wersja zawiera wiele ulepszeń panelu Wydajność.

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

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

Stan przed i po dodaniu źródła na karcie Podsumowanie.

Dodatkowo ścieżki Sieć i Główna wyświetlają teraz w hiperlinkach nazwy usług innych firm, jeśli takie występują, gdy najedziesz kursorem na zdarzenia.

Problem z Chromium: 368541957.

Obsługa pola danych „LCP według etapu”

Gdy dane z pola są włączone, w sekcji Wydajność > Statystyki > LCP według fazy znajdziesz dodatkową tabelę z czasem wczytywania obrazu w 75. perymetralnym z raportu na temat użytkowania Chrome. Dzięki temu możesz porównywać czasy wczytywania bezpośrednio w statystykach.

Dane przed i po dodaniu pola do funkcji „LCP według etapu”.

Statystyka „Drzewo zależności sieciowych”

Na karcie Skuteczność > Statystyki dodaliśmy nową statystykę Drzewo zależności sieci. Ten wykres pokazuje, 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óżnianie najbardziej obciążającego stosu

Panel Skuteczność wyróżnia teraz elementy na głównej ścieżce, gdy najedziesz na nie kursorem w sekcji Drzewo wywołania lub Od dołu > Najważniejsze elementy ścieżki na pasku bocznym, a pozostałe przyciemnia. Dzięki temu możesz wizualnie znaleźć w nagromadzeniu wywołań 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. Umożliwia sprawdzenie, jak technologia wspomagająca widzi Twoją treść, oraz pokazuje atrybuty ARIA i obliczone właściwości ułatwień dostępu elementów DOM.

Aby otworzyć widok drzewa ułatwień dostępu, w prawym górnym rogu drzewa DOM w panelu Elementy kliknij przycisk Przełącz na widok drzewa Ułatwienia dostępu.

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

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 pustości w różnych panelach

Stany pustych (gdy nic nie jest otwarte) paneli, sekcji i kart zostały uproszczone, aby poinformować Cię dokładnie, co należy zrobić, aby zacząć z nich korzystać. Niektóre puste stany, np. w panelu Sieć, mają teraz przydatne przyciski, takie jak Ponownie wczytaj stronę.

Stan przed i po poprawieniu pustych stanów w panelach sieci i wyszukiwania.

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

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

Stan przed i po przeniesieniu opcji „Zadaj pytanie AI” na dół menu.

Możesz zostawić opinię w panelu Pomoc AI na stronie crbug.com/364805393.

Lighthouse 12.4.0

Panel Lighthouse korzysta teraz z wersji Lighthouse 12.4.0.

W tej wersji niektóre audyty wydajności są oznaczane jako informacyjne w przypadku spełnienia warunków, zamiast ukrywać je w sekcji z pozytywnymi wynikami audytu. Zobacz pełną listę zmian.

Podstawy korzystania z panelu Lighthouse w Narzędziach deweloperskich znajdziesz w artykule Lighthouse: optymalizacja szybkości witryny.

Problem z Chromium: 40543651.

Inne wyróżnione informacje

Oto kilka istotnych poprawek i ulepszeń w tej wersji:

  • Skuteczność > Podsumowanie: 2 wiersze Całkowity czas i Czas trwania zostały zastąpione pojedynczą linią Czas trwania, która zawiera również (self time) w nawiasach (crbug.com/395572753).
  • Problemy: dodano nowe typy problemów: <select> w drzewie ułatwień dostępu i błędy podpisu wiadomości SRI, które występują podczas analizowania lub sprawdzania w usłudze sieciowej (crbug.com/381044049, crbug.com/347890366).
  • Ułatwienia dostępu: na karcie Elementy > Style wyróżnione są elementy, które możesz przeglądać za pomocą nawigacji klawiaturą (crbug.com/396311936).
  • Elementy: problemy z <select> są teraz obsługiwane i wyróżnione falowanym podkreśleniem (crbug.com/378738916).
  • Sieć: ikony „zastąpi kropkę” i ostrzeżenia dotyczące plików cookie są teraz wyświetlane po prawej stronie nazwy karty, a nie po lewej (crbug.com/390556283).

Pobieranie kanałów podglądu

Rozważ użycie jako domyślnej przeglądarki deweloperskiej przeglądarki Chrome w wersji Canary, Dev lub Beta. 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.

Co nowego w Narzędziach deweloperskich

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