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 i miejsca pochodzenia na karcie Podsumowanie.

Dodatkowo ścieżki sieć i główna wyświetlają teraz w hiperlinkach nazwy usług zewnętrznych, 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. perynkwili 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łównym ścieżku, 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 sekcji 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ąć w prawym górnym rogu drzewa DOM w panelu Elementy przycisk Przełącz na widok drzewa ułatwień dostępu, aby przełączać się między drzewami DOM i ułatwień dostępu na całej stronie, co ułatwia ich przeglądanie i poznawanie wzajemnych relacji.

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

Drzewo ułatwień dostępu pozwala sprawdzić, jak technologia wspomagająca widzi 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 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 podzielić się 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 najciekawsze momenty

Oto kilka istotnych poprawek i ulepszeń w tej wersji:

  • Wydajność > Podsumowanie: 2 wiersze Całkowity czas i Czas trwania zostały zastąpione przez 1-wierszową wartość Czas trwania, która w nawiasach zawiera wartość (self time) (crbug.com/395572753).
  • Problemy: dodano nowe typy problemów: <select> problemy w drzewie ułatwień dostępu i błędy sygnatury 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 wyświetlane są obrysowane elementy, przez które przechodzisz za pomocą nawigacji klawiaturą (crbug.com/396311936).
  • Elements: 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 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.

Co nowego w Narzędziach deweloperskich

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