Nowości w DevTools w Chrome 136

Sofia Emelianova
Sofia Emelianova
GitHub

Ulepszenia panelu wydajności

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

Nowe statystyki wydajności

Na karcie Skuteczność > Statystyki pojawią się 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, aby wyróżnić żądania, które mogą skorzystać z dłuższego czasu przechowywania w pamięci podręcznej i przyspieszyć ładowanie witryny.
  • Wyświetlanie czcionek, które pokazuje szacowane oszczędności czasu, jeśli zoptymalizujesz font-display.

3 nowe statystyki na karcie Statystyki.

Kliknij, aby podświetlić

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

Czasy serwera w podsumowaniu żądań sieciowych

Karta Podsumowanie w panelu Skuteczność zawiera teraz czasy serwera w przypadku żądań sieciowych, które implementują technologie renderowania po stronie serwera.

Tabela „Czasy serwera” w podsumowaniu żądania sieciowego.

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 zyskuje filtr, dzięki czemu możesz szybciej znaleźć 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 1P / 3P w sekcji Skuteczność > Podsumowanie pokazują teraz wszystkie rozmiary w kilobajtach. 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.

Jednostki rozmiaru przed i po ujednoliceniu.

Autouzupełnianie obsługuje znaki corner-shape i corner-*-shape w sekcji Elementy > Style

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

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

Problem z Chromium: 402346406.

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

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

Przed i po: wyróżnienie problemu z DOM w drzewie DOM za pomocą etykietki i linku do panelu Problemy.

Panel Elementy wyróżnia obecnie nieprawidłowe elementy podrzędne elementu <select>, niezgodne definicje ARIA i nieprawidłowe atrybuty ARIA.

Problem z Chromium: 378738916.

Lighthouse 12.5.0

Panel Lighthouse działa teraz w wersji 12.5.0.

W tej wersji legacy-javascript używa teraz linii bazowej zamiast esmodules. 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ść > Statystyki > Drzewo zależności sieciowych: teraz w drzewie sieciowym wyświetla czas wszystkich żądań sieciowych (400708304).
    • Drzewo zależności sieciowych: w drzewie sieciowym wyświetla teraz czas wszystkich żądań sieciowych (400708304).
  • Animacje: naprawiliśmy błąd, który powodował, że odłączone elementy pojawiały się w panelu Pamięć z powodu przechwyconych animacji 400635410.
  • Rejestrator: podczas pierwszego uruchomienia nagrywania wyświetla teraz to samo okno potwierdzenia co w przypadku wklejania kodu.
  • Warstwy: na pasku stanu u dołu wyświetla łączną liczbę warstw i łączną ilość pamięci dla wszystkich widocznych warstw.
  • Pamięć: inicjowanie zrzutu sterty zostało przyspieszone dzięki równoległemu wykonywaniu zadań przez 2 instancje robocze zamiast 1 (42203857).
  • Problemy: raportuje teraz błędy CORS związane z dostępem do sieci lokalnej (LNA) (395895368).
  • Ułatwienia dostępu:
    • Etykietki: pojawiają się teraz po naciśnięciu klawisza dostępu zamiast po ustawieniu na nich fokusu (396311936).
    • Elementy > Style: funkcja var() jest teraz dostępna za pomocą klawiatury, co oznacza, że możesz wybrać --custom-property i nacisnąć Enter, aby przejść do miejsca docelowego linku (401212692).

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ą znajdować problemy w witrynie, zanim zrobią to użytkownicy.

Kontakt 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.