Nowości w Narzędziach deweloperskich: Chrome 130

Sofia Emelianova
Sofia Emelianova
GitHub

Ulepszenia panelu Sieć

W tej wersji wprowadziliśmy szereg ulepszeń w panelu Sieć.

Nowe oblicze filtrów sieci

Panel Sieć zawiera nowe filtry, których wygląd zmieniły się na podstawie Waszych opinii. Filtry dotyczące typu pozostają bez zmian – to zbiór plakietek na czystym pasku wielokrotnego wyboru.

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 przeniesieniem filtrów związanych z ukryciem, blokowaniem i usługami innych firm w menu.

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

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

Problem z Chromium: 362672528.

Eksporty HAR domyślnie wykluczają dane wrażliwe

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. Na panelu Sieć będzie widoczny przycisk Eksportuj ze strzałką. Kliknij i przytrzymaj przycisk, a potem w menu wybierz Eksportuj HAR (z danymi wrażliwymi).

Dodanie opcji eksportu z danymi wrażliwymi i bez nich do eksportu HAR i po nim.

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 podaje teraz wartości tych właściwości CSS:

Przed dodaniem opcji autouzupełniania dla „text-emphasis-*” usług.

Problem z Chromium: 361471205.

Przewijanie elementów oznaczonych plakietką

Panel Elementy jest teraz oznaczony nowym elementem „scroll” plakietki są oznaczane elementami, które zawierają nadwyżkę treści i mają overflow: scroll lub overflow: auto, dzięki czemu można łatwo zauważyć przepełnienia przewijania. Podobnie jak inne plakietki, ta plakietka odzwierciedla bieżący DOM i znika, jeśli zawartość przestanie się wypełniać z powodu np. zmiany rozmiaru.

Przed oznaczeniem przewijania i po nim wyświetla się plakietka.

Problem z Chromium: 40670442.

Czyste deklaracje po zagnieżdżonych regułach nie powodują przesunięcia w górę

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

W tym przykładowym kodzie 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 zagnieżdżonych regułach.

Problem z Chromium: 358119261.

Ulepszenia panelu wydajności

Ta wersja zawiera wiele ulepszeń panelu Wydajność.

Rekomendacje w danych na żywo

Bieżące dane dostarczają teraz zalecenia na podstawie konkretnych danych, które pomogą Ci skonfigurować środowisko programistyczne tak, jak to jest możliwe w przypadku wrażeń użytkowników.

Aby otrzymywać rekomendacje, skonfiguruj pobieranie danych z terenu w Raporcie na temat użytkowania Chrome (CrUX) i rozwiń sekcję Weź pod uwagę lokalne warunki testu na każdej karcie danych (jeśli jest taka możliwość) i w Ustawieniach środowiska rozwiń sekcję Weź pod uwagę rzeczywiste środowiska użytkowników.

Rozwinięte sekcje z rekomendacjami.

Postępuj zgodnie z zaleceniami, aby w przybliżeniu zwiększyć wygodę użytkowników.

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 podrzędnych elementów. Wcześniej po wybraniu nadrzędnego menu nawigacyjnego, jego elementy podrzędne znikały.

Ulepszenia panelu pamięci

Ta wersja zawiera wiele ulepszeń panelu Pamięć.

Nowa opcja „Odłączone elementy” profil

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

Przed dodaniem opcji „Odłączone elementy” i po nim typ profilu na panel Pamięć.

Problem z Chromium: 350519222.

Poprawione nazewnictwo zwykłych obiektów JS

Zwykłe obiekty JavaScriptu umożliwiają teraz porządkowanie i oczyszczenie kategorii Object w zrzutach sterty:

  • Nazwano je na podstawie właściwości, które zawierają, np. {firstProperty, secondProperty, ..., *nthProperty}.
  • Dostępne do wyszukiwania pod tymi nazwami utworzonymi w Narzędziach deweloperskich.
  • są grupowane razem, jeśli mają te same właściwości.

Porządkowanie kategorii obiektu przed i po w zrzutach sterty.

Problem z Chromium: 350519222.

Wyłączanie motywów dynamicznych

Teraz możesz wyłączyć automatyczne dopasowywanie kolorów z Narzędzi 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.

Informacje o wyłączeniu dynamicznego motywu i po nim.

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 zwiększenia 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 mieć wpływ 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 tym wydaniu 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 w rozmiarze plików. 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.

Różne wyróżnienia

Oto kilka ważnych poprawek i ulepszeń w tej wersji:

  • Elementy:
    • Kilka 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: naprawiono symbol ampersand bez zmiany znaczenia w ciągach wielowierszowych w poleceniach cURL (352651673).
  • Pamięć: poprawiono domyślny wybór na stronach z instancjami roboczymi. Wątek główny jest teraz wybrany (40669896).
  • Bezpieczeństwo: wyróżnienie schematu adresu URL jest teraz prawidłowo aktualizowane po zmianie etapu zabezpieczeń pochodzenia (359920086).

Pobieranie kanałów podglądu

Rozważ użycie przeglądarki Chrome Canary, Dev lub Beta jako domyślnej przeglądarki dla programistów. Te kanały podglądu dają Ci dostęp do najnowszych funkcji Narzędzi deweloperskich, umożliwiają testowanie najnowocześniejszych interfejsów API platformy internetowej i wykrywanie problemów w witrynie, zanim zrobią to użytkownicy.

Kontakt z zespołem Narzędzi deweloperskich w Chrome

Skorzystaj z poniższych opcji, aby porozmawiać o nowych funkcjach i zmianach w poście lub o innych kwestiach związanych z Narzędziami deweloperskimi.

Co nowego w Narzędziach deweloperskich

Lista wszystkich tematów omawianych w cyklu artykułów Co nowego w Narzędziech deweloperskich.