Nowości w DevTools w Chrome 134

Sofia Emelianova

Panel Prywatność i bezpieczeństwo

Stary panel Bezpieczeństwo został przekształcony w panel Prywatność i bezpieczeństwo, w którym pojawiła się nowa sekcja poświęcona prywatności. W tej sekcji możesz:

• Gdy Narzędzia deweloperskie są otwarte, możesz tymczasowo ograniczyć pliki cookie innych firm z wyjątkami lub bez nich i sprawdzić, jak działa witryna.
• Zobacz tabelę z informacjami o plikach cookie innych firm, w tym o tym, czy zostały zablokowane lub wyłączone przez tymczasowy tryb ograniczeń, oraz o rodzajach plików cookie, na które może to mieć wpływ.

Problem w Chromium: 352364594.

Ulepszenia panelu wydajności

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

Skalibrowane gotowe ustawienia ograniczania wykorzystania procesora

Możesz teraz automatycznie kalibrować i uzyskać 2 dodatkowe ustawienia wstępne ograniczania procesora, które dokładniej przybliżają urządzenia mobilne z niższej i średniej półki.

W menu Wydajność > Ograniczanie przepustowości procesora wybierz Kalibruj..., a potem w Ustawieniach kliknij Kalibruj i Dalej. Poczekaj, aż Narzędzia dla deweloperów obliczą współczynniki spowolnienia na Twoim urządzeniu. Opcje skalibrowanego ograniczania znajdziesz w menu Wydajność > Ograniczanie procesora.

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 danych własnych i danych firm zewnętrznych w sekcji Skuteczność

W panelu Skuteczność na karcie Podsumowanie pojawi się nowa tabela, która umożliwia rozróżnianie danych własnych, danych innych firm i danych z rozszerzeń.

Najedź kursorem na wpisy w tabeli, aby zobaczyć odpowiednie zdarzenia wyróżnione w śladzie wydajności. Zaznacz opcję Przyciemnij dane innych firm, aby skupić się tylko na danych własnych.

Dodatkowo kliknij ikonę account_tree obok wyróżnionego wpisu w tabeli, aby przejść na kartę Od dołu pogrupowaną według firm zewnętrznych.

Dane pól w etykietkach i statystykach narzędzia do oznaczania

Jeśli masz włączone dane z terenu, możesz je teraz wyświetlać w etykietkach narzędzi wskaźników danych i na karcie Statystyki.

Problem z Chromium: 368135130.

Statystyki „Wymuszone przeformatowanie”

Na karcie Skuteczność > Statystyki pojawi się nowy rodzaj statystyk: Wymuszone ponowne renderowanie. Wymuszone ponowne wczytanie następuje, gdy mechanizm renderowania wstrzymuje wykonywanie skryptu, aby obliczyć styl i układ. Wymuszone ponowne renderowanie może być wąskim gardłem, którego warto unikać.

Gdy najedziesz kursorem na nowy wniosek, wyróżni on najważniejsze wywołanie funkcji z wymuszonym ponownym przepływem, jego ślad stosu i całkowity czas ponownego przepływu.

Problem w Chromium: 369766156.

Statystyka „Optymalizuj rozmiar DOM”

Kolejną nową statystyką jest Optymalizuj rozmiar DOM. Duże drzewo DOM może spowalniać działanie strony.

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

Przedłużanie zrzutu wydajności za pomocą console.timeStamp

Interfejs Extensibility API obsługuje terazconsole.timeStamp. Oprócz performance.measure i performance.mark możesz teraz tworzyć niestandardowe ścieżki w śledzeniu wydajności i rejestrować niestandardowe znaczniki za pomocą console.timeStamp. Jest to lżejsza alternatywa, która nie dodaje wpisów do wewnętrznej osi czasu wydajności przeglądarki, ale wyświetla je tylko w śledzeniu 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");

Wybierz Ustawienia przechwytywania > check_box Pokaż ścieżki niestandardowe, aby zobaczyć ścieżkę niestandardową w śladzie:

Ulepszenia panelu Elementy

W tej wersji wprowadziliśmy kilka ulepszeń w panelu Elementy.

Wartości animowanych stylów w czasie rzeczywistym

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

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

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

Dodatkowo panel Elementy obsługuje teraz kilka nowych pseudoelementów: ::checkmark, ::picker-icon i związane z karuzelą ::column, ::scroll-button, ::scroll-marker i ::scroll-marker-group.

Problemy z Chromium: 383157184, 379805728.

Kopiowanie wszystkich wiadomości z konsoli

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

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 w odpowiednich jednostkach bajtów zamiast dużych liczb bajtów.

Problem w Chromium: 388589515.

Różne wyróżnione informacje

Oto kilka ważnych 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: wewnętrzne elementy 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 informują teraz, czy 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ż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.

Skontaktuj się 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.

• Prześlij nam opinię i prośby o dodanie funkcji na stronie crbug.com.
• Zgłoś problem z Narzędziami deweloperskimi, klikając more_vert Więcej opcji > Pomoc > Zgłoś problem z Narzędziami deweloperskimi w Narzędziach deweloperskich.
• Wyślij tweeta do @ChromeDevTools.
• Zostawiaj komentarze pod filmami na YouTube z serii „Co nowego w Narzędziach deweloperskich” lub filmami z serii „Wskazówki dotyczące Narzędzi deweloperskich”.

Co nowego w Narzędziach deweloperskich

Lista wszystkich tematów omówionych w serii Nowości w Narzędziach deweloperskich.