Nowości w Narzędziach deweloperskich: Chrome 130

Sofia Emelianova
Sofia Emelianova
GitHub

Ulepszenia panelu Sieć

Ta wersja zawiera wiele ulepszeń panelu Sieć.

Nowe filtry sieciowe

Panel Sieć zawiera nowe filtry, które zostały zaprojektowane na podstawie Twoich opinii. Filtry dotyczące typu pozostają bez zmian – to zbiór plakietek na czystym pasku z wieloma opcjami.

Aby uporządkować interfejs, ukryj pola wyboru związane z ukrywaniem, blokowaniem i usługami zewnętrznymi i przesuń je pod menu. Na liście znajduje się liczba, która informuje, ile filtrów jest zaznaczonych w menu.

Przed i po przeniesieniu filtrów związanych z ukrywaniem, blokowaniem i stronami trzecimi do menu.

Aby przywrócić stary wygląd filtra, wyczyść Ustawienia > Eksperymenty > Przeprojektowanie paska filtrów w panelu Sieć.

Podziel się z nami swoją opinią na temat nowego projektu.

Problem z Chromium: 362672528.

Eksporty HAR domyślnie nie zawierają już danych wrażliwych

Aby zmniejszyć ryzyko przypadkowego wycieku informacji poufnych, dzienniki sieci eksportowane w formacie HAR nie będą już domyślnie zawierać nagłówków Cookie, Set-Cookie i Authorization.

Aby wyeksportować dzienniki w formacie HAR z danymi poufnymi, włącz Ustawienia > Ustawienia > Sieć > Zezwalaj na generowanie HAR z danymi poufnymi. W panelu Sieć przycisk Eksportuj będzie oznaczony strzałką. Naciśnij i przytrzymaj przycisk, a potem w menu kliknij Eksportuj HAR (z danymi poufnymi).

Opcje eksportu HAR z danymi poufnymi i bez nich – przed dodaniem i po dodaniu opcji eksportu.

Problem z Chromium: 361717594.

Ulepszenia panelu Elementy

Ta wersja zawiera wiele ulepszeń panelu Elementy.

wartości autouzupełniania właściwości text-emphasis-*,

Autouzupełnianie na karcie Style sugeruje teraz wartości dla tych właściwości CSS:

Przed i po dodaniu opcji autouzupełniania dla właściwości „text-emphasis-*”.

Problem z Chromium: 361471205.

Przewijanie elementów oznaczonych plakietką

Panel Elementy zawiera teraz nową plakietkę „przewijanie”, która oznacza elementy z przepełnionym tekstem i atrybutem overflow: scroll lub overflow: auto, dzięki czemu możesz łatwo zauważyć przepełnienie. Podobnie jak inne plakietki, ta odzwierciedla bieżący DOM i znika, gdy treści przestają się wylewać, np. z powodu zmiany rozmiaru.

Oznaczenie przepełnienia przewijania za pomocą plakietki przed i po.

Problem z Chromium: 40670442.

Deklaracje bez wartości po regułach zagnieżdżonych nie są „przeskakiwane”.

Zgodnie z decyzją grupy roboczej CSS, która zezwoliła na umieszczanie prostych deklaracji po zanurzonych regułach, karta Style nie „przesuwa” tych deklaracji w górę podczas analizy.

W tym przykładzie kodu deklaracja bez elementów po regułach zagnieżdżonych nie powoduje już, że Chrome nieoczekiwanie zmienia kolejność stylów w kaskadzie:

p {
  width: 100px;
  height: 100px;
  @media screen {
    background-color: red;
  }

  background-color: green;
}

Przed i po zezwoleniu na puste deklaracje po regułach zagnieżdżonych.

Problem z Chromium: 358119261.

Ulepszenia panelu wydajności

Ta wersja zawiera wiele ulepszeń panelu Wydajność.

Rekomendacje w danych na żywo

Dane na żywo mogą teraz zawierać rekomendacje dotyczące konkretnych danych, które pomogą Ci skonfigurować środowisko programistyczne tak, aby było jak najbardziej zbliżone do tego, z którego korzystają użytkownicy.

Aby otrzymywać rekomendacje, skonfiguruj pobieranie danych z pól w raporcie na temat użytkowania Chrome (CrUX). W przypadku każdej karty danych (jeśli taka istnieje) rozwiń sekcję Weź pod uwagę lokalne warunki testowe oraz sekcję Weź pod uwagę środowisko rzeczywistych użytkowników w Ustawieniach środowiska.

Rozwinięte sekcje z rekomendacjami.

Postępuj zgodnie z zaleceniami, aby zapewnić użytkownikom podobne wrażenia.

Możesz teraz poruszać się po elementach menu nawigacyjnego na osi czasu nagrania wykonania: „przeskakiwać” między elementami menu nawigacyjnego, zastępować podrzędne elementy menu nawigacyjnego i usuwać wiele elementów podrzędnych. Wcześniej, gdy wybierano element nadrzędny, jego elementy podrzędne znikały.

Ulepszenia panelu pamięci

Ta wersja zawiera wiele ulepszeń panelu Pamięć.

Nowy profil „Odłączone elementy”

Panel Pamięć ma teraz nowy typ profilu – Elementy odłączone. Zawiera obiekty, które są przechowywane przez odwołanie JavaScript.

Stan przed i po dodaniu do panelu Pamięć typu profilu „Odłączone elementy”.

Problem z Chromium: 350519222.

Poprawione nazewnictwo prostych obiektów JS

Aby uporządkować kategorię Object w obrazach sterty, proste obiekty JavaScript są teraz:

  • Nazwano je na podstawie właściwości, które zawierają, np. {firstProperty, secondProperty, ..., *nthProperty}.
  • Można je wyszukiwać według nazw utworzonych przez DevTools.
  • są zgrupowane, jeśli mają te same właściwości.

Przed i po uporządkowaniu kategorii obiektów w migawkach stosu.

Problem z Chromium: 350519222.

Wyłączanie motywów dynamicznych

Możesz teraz wyłączyć automatyczne dopasowywanie kolorów w Narzędziach deweloperskich do niestandardowych kolorów motywu w Chrome.

Aby wyłączyć motywy dynamiczne, wyczyść Ustawienia > Ustawienia > Wygląd > Dopasuj do schematu kolorów Chrome i ponownie załaduj DevTools.

Stan przed i po wyłączeniu motywów dynamicznych.

Problem z Chromium: 328472696.

Eksperyment w Chrome: udostępnianie procesów

Gdy otwierasz wiele kart z tej samej witryny (np. Dokumentów Google), Chrome zwykle tworzy dla każdej z nich osobny proces renderowania. Eksperyment Udostępnianie procesów zmienia to, umożliwiając wielu kartom udostępnianie tego samego procesu renderowania w celu poprawy wydajności.

Jeśli podczas korzystania z Narzędzi deweloperskich widzisz komunikat „Ta karta współdzieli zasoby z innymi kartami…”, należysz do niewielkiej grupy, w której włączono eksperyment Udostępnianie procesu.

Informacje o karcie „Ta karta współdzieli zasoby z innymi kartami…”.

Udostępnianie procesów może wpływać na debugowanie punktów przerwania i analizę wydajności. Więcej informacji znajdziesz w artykule Eksperyment w Chrome: udostępnianie procesów.

Lighthouse 12.2.1

Panel Lighthouse korzysta teraz z wersji Lighthouse 12.2.1.

W tej aktualizacji wprowadzamy próg ignorowania < 20 KB w przypadku sugestii kompresji zasobów, aby pomóc Ci skupić się tylko na znaczących oszczędnościach miejsca na dysku. 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: 772558.

Inne najciekawsze momenty

Oto kilka istotnych poprawek i ulepszeń w tej wersji:

  • Elementy:
    • Wiele poprawek dotyczących edytowania zagnieżdżonego kodu CSS (41486635, 361477264, 328263458, 41487826).
    • Rozwiązano problem z analizowaniem zdefiniowanych, ale pustych właściwości niestandardowych jako niezdefiniowanych (365578428).
  • Konsola: nieescaping znaku „&” w wieloliniowych ciągach znaków w poleceniach cURL (352651673).
  • Pamięć: poprawiono domyślny wybór na stronach z workerami usługowymi. Teraz wybrany jest główny wątek (40669896).
  • Bezpieczeństwo: wyróżnienie schematu adresu URL jest teraz prawidłowo aktualizowane po zmianie poziomu zabezpieczeń pochodzenia (359920086).

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ędziach deweloperskich.