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 z wieloma opcjami.

Aby uporządkować interfejs, pola wyboru dotyczące ukrywania, blokowania i danych innych firm są umieszczone na liście. Na liście znajduje się liczba, która informuje o liczbie wybranych filtrów.

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ą o nowym wyglądzie.

Problem z Chromium: 362672528.

Eksportowanie plików HAR domyślnie wyklucza dane wrażliwe

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

Aby eksportować logi w formacie HAR z danymi wrażliwymi, włącz Ustawienia > Ustawienia > Sieć > Zezwalaj na generowanie pliku HAR z danymi wrażliwymi. W panelu Sieć przycisk Eksport będzie oznaczony strzałką. Kliknij i przytrzymaj przycisk, a potem w menu wybierz Eksportuj HAR (z danymi wrażliwymi).

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

Problem z Chromium: 361717594.

Ulepszenia panelu Elementy

W tej wersji wprowadziliśmy kilka ulepszeń w 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 właściwości „text-emphasis-*”.

Problem z Chromium: 361471205.

Przewijanie elementów oznaczonych plakietką

Panel Elementy jest teraz oznaczony nową plakietką „przewijanie” elementów, które zawierają przepełniony materiał i mają atrybuty overflow: scroll lub overflow: auto. Dzięki temu możesz łatwo zauważyć przepełnienie podczas 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.

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

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 poniższym przykładzie kodu deklaracja czysta po zagnieżdżonej regule nie powoduje nieoczekiwanej zmiany kolejności 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

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

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 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 podrzędnych elementów. 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”

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

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

Problem z Chromium: 350519222.

Poprawione nazewnictwo zwykłych 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ć 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ć dynamiczne motywy, wyczyść Ustawienia > Preferencje > Wygląd > Dopasuj do schematu kolorów Chrome i załaduj ponownie Narzędzia deweloperskie.

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

Problem z Chromium: 328472696.

Eksperyment w Chrome: udostępnianie procesów

Normalnie, gdy otwierasz wiele kart tej samej witryny (np. Dokumenty Google), Chrome tworzy oddzielny proces renderowania każdej z nich. Eksperyment udostępniania procesu zmienia tę sytuację, zezwalając wielu kartom na współużytkowanie tego samego procesu renderowania, co pozwala zwiększyć wydajność.

Jeśli przy otwartych Narzędziach deweloperskich zobaczysz pasek informacyjny „Ta karta udostępnia zasoby innym kartom...”, należysz do małej grupy z włączonym eksperymentem 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 Lighthouse w wersji 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.

Inne najciekawsze momenty

Oto kilka istotnych 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óżniony schemat adresu URL jest teraz prawidłowo aktualizowany w miarę zmiany etapu bezpieczeństwa źródła (359920086).

Pobierz kanały podglądu

Zastanów się, czy nie ustawić Chrome w wersji Canary, Dev lub Beta jako domyślnej przeglądarki do programowania. Te kanały wersji testowej dają dostęp do najnowszych funkcji Narzędzi deweloperskich, umożliwiają testowanie najnowocześniejszych interfejsów API platform internetowych i pomagają w wykrywaniu problemów w witrynie przed użytkownikami.

Kontakt z zespołem ds. Narzędzi deweloperskich w Chrome

Użyj poniższych opcji, aby omówić nowe funkcje, aktualizacje lub inne informacje związane z Narzędziami deweloperskimi.

Co nowego w Narzędziach deweloperskich

Lista wszystkich tematów, które zostały omówione w serii Co nowego w Narzędziach deweloperskich.