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 zachować odpowiednie zdarzenia wyróżnione w śladzie i przyciemnić pozostałe podczas przeglądania śladu wydajności.

Czasy serwera w sekcji Podsumowanie żądań sieciowych

Na karcie Podsumowanie w panelu Skuteczność 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 KB 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.

Autouzupełnianie 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 (przed i po) za pomocą informacji kontekstowej i linku do panelu Problemy.

Panel Elementy wyróżnia obecnie nieprawidłowe potomki 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 miejscu esmodules w funkcji legacy-javascript jest teraz używany punkt odniesienia. 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 inicjowanie 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 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.