Nowości w Narzędziach deweloperskich: Chrome 130

Sofia Emelianova
Sofia Emelianova
GitHub

Ulepszenia panelu Sieć

Ta wersja zawiera szereg ulepszeń panelu Sieć.

Nowe filtry sieciowe

Panel Sieć zyska nowe filtry, które zostały przeprojektowane na podstawie Twoich opinii. Filtry dotyczące konkretnych typów 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 wyeksportowany 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. W panelu Sieć przycisk Eksportuj zostanie oznaczony strzałką . 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 wprowadza szereg ulepszeń w 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.

Przewijanie przepełnień oznaczonych plakietką

W panelu Elementy elementy, które zawierają przepełnioną treść 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 zagnieżdżonych regułach 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 Skuteczność.

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ęci

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 Udostępnianie 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 w 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 procesami roboczymi usługi. Teraz wybierany jest wątek główny (40669896).
  • Bezpieczeństwo: wyróżnianie 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ą wykrywać problemy w witrynie, zanim zauważą je użytkownicy.

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

Nowości w Narzędziach deweloperskich

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