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 z niskim i średnim poziomem zasobów.

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 zewnętrznych i danych 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 znacznikó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 „Wymuszone przepływanie”.

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, których nazwy zaczynają 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 kolumny 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 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.