Nowości w DevTools w Chrome 136

Sofia Emelianova
Sofia Emelianova
GitHub

Ulepszenia panelu wydajności

Ta wersja zawiera wiele ulepszeń panelu Wydajność.

Nowe statystyki skuteczności

Na karcie Skuteczność > Statystyki znajdziesz nowe statystyki:

  • Nowoczesny HTTP, który wyróżnia żądania korzystające ze starego protokołu HTTP/1.1.
  • Używaj efektywnego czasu przechowywania w pamięci podręcznej, który wyróżnia żądania, które mogą skorzystać na dłuższym czasie przechowywania w pamięci podręcznej i przyspieszyć wczytywanie witryny.
  • Wyświetlanie czcionek, które pokazuje szacowane oszczędności czasu, jakie możesz uzyskać dzięki optymalizacji font-display.

3 nowe statystyki na karcie Statystyki.

Kliknij, aby wyróżnić

Możesz teraz klikać elementy w tabelach Podsumowanie, Od dołu do góry, Drzewo wywołań i Dziennik zdarzeń, aby podczas przeglądania ścieżki wydajności wyróżniać odpowiednie zdarzenia na ścieżce i przyciemniać pozostałe.

Czasy serwera w sekcji Podsumowanie żądań sieciowych

Na karcie Podsumowanie w panelu Wydajność znajdziesz teraz czasy serwera dla żądań sieciowych, które implementują technologie renderowania po stronie serwera.

Tabela „Czasy działania serwera” w podsumowaniu żądania sieci.

Panel Wydajność pobiera dane z nagłówka Server-Timing odpowiedzi.

Filtrowanie plików cookie w sekcji „Prywatność i bezpieczeństwo”

Tabela w sekcji Prywatność i bezpieczeństwo > Prywatność > Pliki cookie innych firm będzie miała filtr, dzięki któremu szybciej znajdziesz interesujące Cię pliki cookie.

Filtr w tabeli „Pliki cookie innych firm”.

Rozmiary w kilobajtach w tabelach w różnych panelach

Aby zachować spójność jednostek w tym samym kontekście, tabele w panelach Sieć i Pamięć oraz tabela 1 p / 3 p w sekcji Skuteczność > Podsumowanie są teraz wyświetlane we wszystkich rozmiarach w KB. Dzięki temu możesz bezpośrednio porównywać liczby w tej samej kolumnie i w różnych panelach, zamiast zwracać uwagę na jednostki MB, kB i B.

Dane przed i po ujednoliceniu jednostek wielkości.

Funkcja autouzupełniania obsługuje corner-shape i corner-*-shape w sekcji Elementy > Style.

Autouzupełnianie w sekcji Elementy > Style może teraz sugerować odpowiednie wartości dla właściwości corner-shape i corner-*-shape.

Opcje autouzupełniania właściwości „corner-shape”.

Problem z Chromium: 402346406.

Eksperymentalnie: wyróżnianie problemów z elementami i atrybutami w DOM

Dzięki tej nowej funkcji eksperymentalnej w panelu Elementy można teraz wyróżniać problemy z elementami lub atrybutami DOM za pomocą czerwonej falistej linii podkreślenia. Najedź kursorem na takie elementy lub atrybuty, aby wyświetlić w panelu Problemy etykietkę z linkiem do odpowiedniego błędu.

Wyróżnienie problemu z modelem DOM w drzewie DOM z etykietą i linkiem do panelu Problemy przed i po.

Panel Elementy wyróżnia obecnie nieprawidłowe potomków elementu <select>, niezgodne definicje ARIA i nieprawidłowe atrybuty ARIA.

Problem z Chromium: 378738916.

Lighthouse 12.5.0

Panel Lighthouse korzysta teraz z wersji Lighthouse 12.5.0.

Najważniejszą zmianą w tej wersji jest to, że w elementach legacy-javascript zamiast esmodules używana jest teraz wartość Baseline. 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:

  • Skuteczność > Statystyki > Drzewo zależności sieciowych: teraz pokazuje czas dla wszystkich żądań sieciowych w drzewie sieci (400708304).
    • Drzewo zależności sieciowych: teraz pokazuje czas dla wszystkich żądań sieciowych w drzewie sieci (400708304).
  • Animacje: rozwiązaliśmy problem, który powodował, że w panelu Pamięć pojawiały się odłączone elementy z powodu przechwyconych animacji 400635410.
  • Nagrywarka: podczas pierwszego uruchamiania nagrywania wyświetla się teraz to samo okno potwierdzenia, co podczas wklejania kodu.
  • Warstwy: na pasku stanu u dołu wyświetlana jest teraz łączna liczba warstw i łączna pamięć wszystkich widocznych warstw.
  • Pamięć: przyspieszono inicjalizację migawki stosu przez równoległe wykonywanie zadań przez 2 instancje robocze zamiast przez 1 (42203857).
  • Problemy: teraz raportuje błędy CORS dotyczące dostępu z lokalnej sieci (LNA; 395895368).
  • Dostępność:
    • Etykiety: teraz pojawiają się po naciśnięciu klawisza skrótu, a nie po przejściu do nich (396311936).
    • Elementy > Style: funkcja var() może teraz działać z klawiaturą, co oznacza, że możesz wybrać --custom-property i nacisnąć Enter, aby przejść do celu linku (401212692).

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 Nowości w Narzędziach deweloperskich.