Nowości w DevTools w Chrome 134

Sofia Emelianova
Sofia Emelianova
GitHub

Panel Prywatność i bezpieczeństwo

Stary panel Bezpieczeństwo został zastąpiony panelem Prywatność i bezpieczeństwo, który zawiera nową sekcję poświęconą prywatności. W tej sekcji możesz:

  • Gdy Narzędzia deweloperskie są otwarte, tymczasowo ograniczaj pliki cookie innych firm z wyjątkami lub bez nich i sprawdzaj, jak zachowuje się witryna.
  • Zobacz tabelę z informacjami o plikach cookie innych firm, w tym o tym, czy zostały one zablokowane lub wyłączone przez tymczasowy tryb limitowania oraz jakie typy plików cookie mogą być objęte tym ograniczeniem.

Sekcja Prywatność przed dodaniem jej do panelu Bezpieczeństwo (po lewej) i po dodaniu (po prawej).

Problem z Chromium: 352364594.

Ulepszenia panelu wydajności

Ta wersja zawiera wiele ulepszeń panelu Wydajność.

Skalibrowane gotowe ustawienia ograniczania wykorzystania procesora

Możesz teraz automatycznie skalibrować i uzyskać 2 dodatkowe wstępnie ustawione wartości ograniczania procesora, które lepiej odwzorowaczają urządzenia mobilne niskiego i średniego poziomu.

W menu Wydajność > Ograniczanie procesora kliknij Kalibrowanie…, a następnie w menu Ustawienia kliknij Kalibrowanie, Dalej i zaczekaj, aż DevTools obliczy współczynniki spowolnienia działania urządzenia. Opcje ograniczania przepustowości po kalibrowaniu znajdziesz w menu Wydajność > Ograniczanie przepustowości procesora.

Przed i po dodaniu kalibracji ograniczania przepustowości.

Wybieranie różnych zdarzeń związanych z wydajnością w tym samym czacie z AI

W panelu Pomoc AI możesz teraz zmienić wybrane zdarzenie w śladzie wydajności w tym samym czacie. Innymi słowy, nie musisz rozpoczynać nowego czatu, aby porozmawiać o innym wydarzeniu.

Wyróżnianie własnych i zewnętrznych źródeł danych w sekcji Wyniki

Na karcie Podsumowanie w panelu Skuteczność znajdzie się nowa tabela, która pozwoli Ci odróżnić dane własne od danych pochodzących z źródeł zewnętrznych i rozszerzeń.

Najedź na pozycje w tabeli, aby wyświetlić odpowiednie zdarzenia wyróżnione w wyświetleniu skuteczności. Zaznacz pole Zmniejsz znaczenie danych pochodzących od innych firm, aby skupić się tylko na danych własnych.

Dodatkowo kliknij ikonę obok wyróżnionego wpisu w tabeli, aby przejść na kartę Od dołu z grupami według aplikacji innych firm.

Dane pól w etykietach i statystykach markerów

Jeśli masz włączone dane z pola, możesz je wyświetlać w opisach znaczników danych i na karcie Statystyki.

Dane z formularza przed i po dodaniu ich do opisów znaczników oraz karty Statystyki

Problem z Chromium: 368135130.

Statystyka „Wymuszone przeformatowanie”

Na karcie Wydajność > Statystyki pojawią się nowe statystyki: Wymuszone przepływanie. Wymuszone przepływanie występuje, gdy mechanizm renderowania wstrzymuje wykonywanie skryptu, aby obliczyć styl i układ. Wymuszone przepływy mogą być wąskim gardłem, którego warto uniknąć.

Gdy najedziesz kursorem na nowe statystyki, zostaną wyróżnione najczęstsze wywołania funkcji z wymuszonym reflowem, ich ścieżka śledzenia oraz łączny czas reflowu.

Przed i po dodaniu informacji o „Wymuszonym przepływie”.

Problem z Chromium: 369766156.

Statystyka „Optymalizuj rozmiar DOM”

Kolejną nową statystyką jest Optymalizacja rozmiaru DOM. Duży drzewo DOM może spowolnić działanie strony.

Statystyka ta wskazuje w śladzie wydajności długie przeformatowania układu i przeliczenia stylów, na które miał wpływ duży rozmiar DOM, oraz zawiera statystyki dotyczące łącznej liczby elementów, głębokości i największej liczby elementów podrzędnych.

Dane „Optymalizuj rozmiar DOM” przed dodaniem i po dodaniu

Rozszerzanie zrzutu wydajności za pomocą console.timeStamp

Interfejs Extensibility API obsługuje teraz console.timeStamp. Oprócz performance.measure i performance.mark możesz teraz tworzyć ścieżki niestandardowe w śladzie wydajności i rejestrować niestandardowe znaczniki za pomocą console.timeStamp, ponieważ jest to lżejsza alternatywa, która nie dodaje wpisów do wewnętrznej osi czasu wydajności przeglądarki, ale tylko wyświetla je w śladzie wydajności.

Możesz na przykład użyć tej składni:

console.timeStamp("Start");
// Some time later ...
console.timeStamp("End");
// Some time later ...
console.timeStamp("Measure 1", "Start", "End", "Track 1");
// Some time later ...
console.timeStamp("Measure 2", "Start", undefined, "Track 1");

Ustawienie Ustawienia rejestrowania > Pokaż ścieżki niestandardowe powoduje wyświetlenie ścieżki niestandardowej w śladzie:

Przed i po dodaniu obsługi console.timeStamp.

Ulepszenia panelu Elementy

Ta wersja zawiera wiele ulepszeń panelu Elementy.

Wartości w czasie rzeczywistym animowanych stylów

Karta Elementy > Style aktualizuje teraz wartości animowanych stylów w czasie rzeczywistym.

Obsługa pseudoklasy :open i różnych pseudoelementów

Panel Elementy obsługuje teraz pseudoklasę :open w sekcji Style > :hov > Wymuś stan konkretnego elementu dla niektórych elementów HTML, takich jak <details>, <select>, <dialog> i <input>.

Przed i po dodaniu opcji „:open”.

Panel Elementy obsługuje też kilka nowych pseudoelementów: ::checkmark, ::picker-icon oraz elementy związane z karuzelką: ::column, ::scroll-button, ::scroll-marker i ::scroll-marker-group.

Problemy z Chromium: 383157184, 379805728.

Kopiowanie wszystkich komunikatów konsoli

Teraz możesz skopiować wszystkie wiadomości z konsoli naraz, klikając je prawym przyciskiem myszy.

Przed i po dodaniu opcji „Kopiuj konsolę”.

Podobną opcję kopiowania znajdziesz też w menu kontekstowym Sieć > Ładunek żądania.

Problemy z Chromium: 40206460, 384967020.

Jednostki bajtów w panelu Pamięć

Panel Pamięć wyświetla teraz rozmiary z odpowiednimi jednostkami bajtów zamiast dużych liczb w bajtach.

Przed i po pokazaniu jednostek bajtów.

Problem z Chromium: 388589515.

Inne najciekawsze momenty

Oto kilka istotnych poprawek i ulepszeń w tej wersji:

  • Skuteczność:
    • Adnotacje: możesz teraz kliknąć etykietę, aby wybrać odpowiedni wpis (crbug.com/388224764).
    • Statystyki: kliknięcie CLS na karcie Statystyki powoduje teraz wybranie najgorszego klastra zamiast najgorszego przesunięcia.
  • Lista ignorowanych adresów: informacje wewnętrzne węzła zaczynające się od node: są teraz domyślnie ignorowane (crbug.com/382453615).
  • Aktywne wyrażenia: usunęliśmy błąd, który powodował, że aktywne wyrażenie wpływało na polecenie $_ (crbug.com/388437265).
  • Elementy > Style: długości względne mają teraz wyskakujące okienko, które pokazuje wartość bezwzględną (crbug.com/40778486).
  • Ułatwienia dostępu: nagłówki kolumn są teraz odczytywane, jeśli można je sortować.
  • Ikony kart znajdują się teraz po prawej stronie obok nazw kart, a nie po lewej.

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.