Nowości w Narzędziach deweloperskich: Chrome 130

Sofia Emelianova
Sofia Emelianova
GitHub

Ulepszenia panelu Sieć

Ta wersja wprowadza szereg ulepszeń w panelu Sieć.

Nowe filtry sieciowe

Panel Sieć zyska nowe filtry, które zostały przeprojektowane na podstawie Twoich opinii. Filtry specyficzne dla typu pozostają bez zmian – to zestaw plakietek na przejrzystym pasku wielokrotnego wyboru.

Aby uprościć interfejs, pola wyboru związane z ukrywaniem, blokowaniem i firmami zewnętrznymi zostały przeniesione na listę rozwijaną. 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 firmami zewnętrznymi do menu.

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

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

Problem w Chromium: 362672528.

Eksporty HAR domyślnie nie zawierają już danych poufnych

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

Aby wyeksportować dzienniki w formacie HAR z danymi poufnymi, włącz Ustawienia > Preferencje > Sieć > Zezwól na generowanie pliku HAR z danymi poufnymi. Panel Sieć oznaczy strzałką przycisk Eksportuj. Naciśnij i przytrzymaj przycisk, a potem w menu wybierz Eksportuj HAR (z danymi poufnymi).

Przed i po dodaniu opcji eksportowania z danymi poufnymi i bez nich do eksportu HAR.

Problem w Chromium: 361717594.

Ulepszenia panelu Elementy

Ta wersja zawiera szereg ulepszeń panelu Elementy.

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

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

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

Problem z Chromium: 361471205.

Przewijane elementy są oznaczone plakietką

W panelu Elementy elementy, które zawierają przepełnione treści i mają atrybut overflow: scroll lub overflow: auto, są teraz oznaczane nową plakietką „przewijanie”. Dzięki temu możesz łatwo wykrywać przepełnienia. Podobnie jak inne plakietki, ta plakietka odzwierciedla bieżący DOM i znika, jeśli treść przestanie się przepełniać, np. z powodu zmiany rozmiaru.

Przed i po oznaczeniu przepełnień przewijania plakietką.

Problem z Chromium: 40670442.

Deklaracje podstawowe po regułach zagnieżdżonych nie są „przesuwane w górę”.

Zgodnie z decyzją grupy roboczej CSS, która zezwala na umieszczanie deklaracji bez nawiasów klamrowych po regułach zagnieżdżonych, karta Style nie „przesuwa” już tych deklaracji w górę podczas analizowania.

W poniższym przykładzie kodu deklaracja bez otoczki po zagnieżdżonej regule nie powoduje już nieoczekiwanego ponownego uporządkowania stylów w kaskadzie przez Chrome:

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

  background-color: green;
}

Przed i po zezwoleniu na deklaracje podstawowe, które mogą występować po regułach zagnieżdżonych.

Problem w Chromium: 358119261.

Ulepszenia panelu wydajności

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

Rekomendacje w danych na żywo

Dane na żywo mogą teraz dostarczać rekomendacje dotyczące konkretnych danych, które pomogą Ci skonfigurować środowisko deweloperskie tak, aby jak najbardziej przypominało to, z czego korzystają użytkownicy.

Aby uzyskać rekomendacje, skonfiguruj pobieranie danych z pól z raportu na temat użytkowania Chrome (CrUX) i rozwiń sekcje Weź pod uwagę lokalne warunki testu na każdej karcie danych (jeśli jest dostępna) oraz Weź pod uwagę środowiska prawdziwych użytkowników w Ustawieniach środowiska.

Rozwinięte sekcje z rekomendacjami.

Postępuj zgodnie z zaleceniami, aby przybliżyć sobie wrażenia użytkowników.

W osi czasu nagrania wydajności możesz teraz poruszać się po elementach menu nawigacyjnego: przeskakiwać między nimi, zastępować podrzędne elementy menu nawigacyjnego i usuwać wiele elementów podrzędnych. Wcześniej po wybraniu elementu nadrzędnego ścieżki jego elementy podrzędne znikały.

Ulepszenia panelu Pamięć

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

Nowy profil „Odłączone elementy”

W panelu Pamięć pojawi się nowy typ profilu – Odłączone elementy. Zawiera obiekty, które są przechowywane przez odwołanie JavaScript.

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

Problem w Chromium: 350519222.

Ulepszone nazewnictwo zwykłych obiektów JS

Aby uporządkować i oczyścić kategorię Object w obrazach sterty, zwykłe obiekty JavaScript są teraz:

  • Nazwy są tworzone na podstawie zawartych w nich właściwości, np. {firstProperty, secondProperty, ..., *nthProperty}.
  • Można je wyszukiwać według nazw utworzonych przez Narzędzia deweloperskie.
  • są grupowane, jeśli mają te same właściwości.

Przed i po uporządkowaniu kategorii Obiekt w zrzutach sterty.

Problem w Chromium: 350519222.

Wyłączanie dynamicznego motywu

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

Aby wyłączyć dynamiczne motywy, otwórz Ustawienia > Preferencje > Wygląd > Dopasuj schemat kolorów Chrome i ponownie załaduj Narzędzia deweloperskie.

Przed i po wyłączeniu dynamicznego motywu.

Problem w Chromium: 328472696.

Eksperyment w Chrome: udostępnianie procesów

Zwykle, gdy otwierasz wiele kart z tej samej witryny (np. Dokumentów Google), Chrome 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 po otwarciu Narzędzi deweloperskich zobaczysz pasek informacyjny z komunikatem „Ta karta współdzieli zasoby z innymi kartami…”, oznacza to, że należysz do niewielkiej grupy użytkowników, u których włączono eksperyment Współdzielenie procesów.

Pasek informacyjny „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 Chrome: udostępnianie procesów.

Lighthouse 12.2.1

Panel Lighthouse działa teraz w wersji 12.2.1.

Ta aktualizacja wprowadza < 20 KB próg ignorowania sugestii dotyczących kompresji zasobów, aby pomóc Ci skupić się tylko na znaczących oszczędnościach rozmiaru plików. Zobacz pełną listę zmian.

Podstawowe informacje o korzystaniu z panelu Lighthouse w Narzędziach deweloperskich znajdziesz w artykule Lighthouse: optymalizacja szybkości witryny.

Problem z Chromium: 772558.

Różne wyróżnione informacje

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

  • Elementy:
    • Wiele poprawek dotyczących edytowania zagnieżdżonego kodu CSS (41486635, 361477264, 328263458, 41487826).
    • Rozwiązanie problemu z parsowaniem zdefiniowanych, ale pustych właściwości niestandardowych jako niezdefiniowanych (365578428).
  • Konsola: naprawiono nieprawidłowo zapisany znak „&” w wielowierszowych ciągach znaków w poleceniach cURL (352651673).
  • Pamięć: poprawiono domyślny wybór na stronach z usługami Service Worker – teraz wybierany jest wątek główny (40669896).
  • Bezpieczeństwo: wyróżnienie schematu adresu URL jest teraz prawidłowo aktualizowane, gdy zmienia się poziom bezpieczeństwa pochodzenia (359920086).

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.

Co nowego w Narzędziach deweloperskich

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