Nowości w Narzędziach deweloperskich: Chrome 130

Sofia Emelianova

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.

Aby przywrócić stary wygląd filtra, wyczyść ustawienia Ustawienia > Eksperymenty > check_box_outline_blank 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 Ustawienia > Preferencje > Sieć > check_box Zezwól na generowanie pliku HAR z danymi poufnymi. Panel Sieć oznaczy strzałką przycisk pobierania Eksportuj. Naciśnij i przytrzymaj przycisk, a potem w menu wybierz Eksportuj HAR (z danymi poufnymi).

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:

• text-emphasis skrót
• text-emphasis-style
• text-emphasis-color
• text-emphasis-position

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.

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;
}

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.

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

Poruszanie się po menu nawigacyjnym

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.

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.

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 Ustawienia > Preferencje > Wygląd > check_box_outline_blank Dopasuj schemat kolorów Chrome i ponownie załaduj Narzędzia deweloperskie.

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.

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.

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