Nowości w Narzędziach deweloperskich: Chrome 128

Sofia Emelianova
Sofia Emelianova
GitHub

Statystyki konsoli z Gemini są udostępniane w większości krajów europejskich

Ta wersja zawiera obsługę statystyk konsoli przez Gemini w większości krajów europejskich.

Austria, Belgia, Bułgaria, Cypr, Czechy, Dania, Estonia, Finlandia, Francja, Hiszpania, Holandia, Irlandia, Islandia, Liechtenstein, Litwa, Luksemburg, Łotwa, Malta, Niemcy, Norwegia, Polska, Portugalia, Rumunia, Słowacja, Słowenia, Szwecja, Szwajcaria i Włochy.

Jeśli mieszkasz w jednym z tych krajów, możesz poprosić Gemini o statystyki bezpośrednio w Konsoli, aby lepiej zrozumieć błędy i ostrzeżenia.

Statystyka z Gemini dotycząca błędu w konsoli.

Aktualizacje panelu skuteczności

Ta aktualizacja wprowadza kilka ulepszeń panelu Wydajność.

Ulepszona usługa sieciowa

Ścieżka Sieć w panelu Skuteczność została ulepszona, aby wyświetlać najważniejsze informacje na samym początku, np. bardziej szczegółowy czas trwania i drzewo inicjatora sieci, a także aby zapewnić większą przejrzystość wskazówek wizualnych i kolorów. Nie musisz już przełączać się między panelem Sieć a kartą Skuteczność > Podsumowanie. Jeśli nadal musisz przełączyć się na panel Sieć, ułatwiliśmy i przyspieszyliśmy ten proces.

Ścieżka Sieć wykonuje teraz te czynności:

  • Pokazuje legendę kolorów dla typów żądań.
  • Żądania blokujące renderowanie są oznaczone czerwonymi trójkątami w prawym górnym rogu.
  • Po wybraniu za pomocą strzałki wyświetla inicjatora żądania. Pomoże Ci to zrozumieć drzewo inicjatorów sieci, które było wcześniej dostępne tylko w panelu Sieć.
  • Po najechaniu kursorem na element etykieta zawiera teraz uporządkowane informacje o czasie, w tym stan blokowania renderowania i ewentualne zmiany priorytetu.
  • Na karcie Podsumowanie w kolumnie po prawej stronie znajdziesz też podział czasów.

Ulepszona ścieżka sieci z kolorową legendą, tooltipami, wskaźnikami blokowania renderowania i czasem na karcie Podsumowanie.

Dodatkowo na karcie Podsumowanie możesz kliknąć żądanie prawym przyciskiem myszy na ścieżce lub jego adres URL, a potem w menu kliknąć Pokaż w panelu Sieć. Narzędzie DevTools otworzy panel Sieć i wyróżni w tabeli żądanie, którego szukasz.

Menu żądania wyświetlane po kliknięciu prawym przyciskiem myszy z opcją „Pokaż w panelu Sieć”.

Dostosowywanie danych o skuteczności za pomocą interfejsu API do rozszerzania funkcjonalności

Ta wersja wprowadza obsługę danych rozszerzeń w panelu Wydajność. Możesz teraz dodawać do ścieżki wydajności ścieżki niestandardowe ze zdarzeniami i opisami w tooltipach oraz szczegółowe informacje na karcie Podsumowanie i nie tylko. Ta funkcja może być przydatna dla deweloperów frameworków, bibliotek i złożonych aplikacji z niestandardowym instrumentowaniem.

Przykład ścieżki niestandardowej znajdziesz na stronie demonstracyjnej. W sekcji Wydajność > Ustawienia rejestrowania włącz Dane rozszerzenia. Rozpocznij nagrywanie, na stronie demonstracyjnej kliknij Dodaj nowego Corgi, a potem zatrzymaj nagrywanie. Na karcie Podsumowanie zobaczysz ścieżkę niestandardową, która zawiera zdarzenia z niestandardowymi etykietami i szczegółami.

Ścieżka niestandardowa w panelu Wydajność

Krótko mówiąc, aby rozszerzyć dane o wydajność, prześlij określoną strukturę do parametrów measureOption.detail lub markOption.detail w wywołaniach interfejsu API performance.measure() lub performance.mark().

Szczegóły na ścieżce Czas

Jeśli jesteś deweloperem stron internetowych i używasz części dotyczącej czasu użytkownika w interfejsie Performance API, aby dodawać wpisy do ścieżki Czasy, możesz teraz zobaczyć dowolne szczegóły na karcie Podsumowanie dotyczące zdarzeń mark i measure oraz ich sygnatur czasowych.

Zdarzenie niestandardowe na ścieżce Czas z sygnaturą czasową i szczegółami.

Problem z Chromium: 345418915.

Skopiuj wszystkie wymienione żądania w panelu Sieć

Zamiast kopiowania całego dziennika sieci możesz teraz w panelu Sieć stosować filtry i kopiować tylko wymienione żądania.

Kopiowanie opcji tylko w przypadku wymienionych żądań.

Szybsze zrzuty stosu dzięki nazwanym tagom HTML i mniejszej ilości bałaganu

Obrazy sterty w panelu Pamięć są jeszcze szybsze, a obiekty są w nich grupowane według nazwanych tagów HTML. Obrazy te lepiej pasują do semantyki języka JavaScript, ponieważ wyświetlają mniej obiektów wewnętrznych i zawsze zawierają wartości liczbowe.

Obiekty pogrupowane według nazwanych tagów HTML.

Zwiększono wydajność pola wyboru Uwzględniaj wartości liczbowe w zrzucie sterty, włączono je domyślnie i usunięto z panelu Pamięć.

Aby ręcznie uwzględnić obiekty wewnętrzne w migawce, najpierw włącz Ustawienia > Eksperymenty > Pokaż opcję, aby wyświetlić wewnętrzne migawki stosu, a następnie włącz Wyświetl wewnętrzne (...) w panelu Pamięć.

Problemy z Chromium: 41490040, 343341610, 42203857.

Otwórz panel Animacje, aby nagrywać animacje i edytować @keyframes na żywo

Panel Animacje umożliwia teraz:

  • rejestruje animacje, które są już w trakcie odtwarzania w momencie otwarcia panelu, dzięki czemu nie musisz odświeżać strony, aby zarejestrować animacje.
  • Obsługuje edycję w czasie rzeczywistym @keyframes. Inaczej mówiąc, aktualizuje zarejestrowaną animację podczas edytowania sekcji @keyframes w sekcji Elementy > Style.

W następnym filmie możesz zobaczyć, jak działają te funkcje.

Problem z Chromium: 352718055.

Lighthouse 12.1.0

Panel Lighthouse korzysta teraz z Lighthouse w wersji 12.1.0.

Ta aktualizacja wprowadza wiele zmian, w tym usunięcie starego wskaźnika First Meaningful Paint (FMP) na rzecz największego wyrenderowania treści (LCP). 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.

Ułatwienia dostępu

Ta wersja zawiera następujące ułatwienia dostępu:

  • Naciśnięcie Tab po automatycznym uzupełnieniu w polu edycji wyrażeń na żywo spowoduje przeniesienie zaznaczenia na następny punkt zaznaczenia. Wcześniej wcięcie było automatyczne.
  • Kliknięcie narzędzia do zmiany rozmiaru powoduje jego zaznaczenie, dzięki czemu można je przesuwać za pomocą klawiszy strzałek w prawo i w lewo.
  • Czytnik ekranu ogłasza teraz pole edycji Dodaj wyrażenie do obserwacji w sekcji Źródła, a pole Usuń wyrażenie do obserwacji jest teraz wyraźnie widoczne podczas poruszania się za pomocą klawiatury.

Problemy z Chromium: 349939551, 343942719, 349334243, 349428374.

Inne najciekawsze momenty

Oto kilka istotnych poprawek i ulepszeń w tej wersji:

  • Skuteczność:
    • Ścieżka Sieć: dodano zdarzenia połączenia WebSocket 331351979.
    • Panel Wydajność prawidłowo przybliża teraz najbardziej aktywny wątek główny 345599356.
    • Usunęliśmy błąd dotyczący przesyłania nieprawidłowych typów plików z wykresami. Teraz nie można przesłać żadnego typu oprócz .json lub .gz 349864878.
  • Elementy > Style:
    • Menu rozwijane z jednostkami w wartościach właściwości długości zostało wycofane 41495618.
    • Naprawiono błąd dotyczący rozwiązywania aktywnych usług w przypadku zagnieżdżonych reguł at 346732737.
    • Nieaktywne sekcje @position-try są teraz wyszarzone 40246493.
  • Aplikacja:
    • Pliki cookie: rozwiązaliśmy problem, który powodował, że pliki cookie nie były odświeżane po kliknięciu Odśwież 348683488.
    • Pamięć lokalna: możesz teraz sortować klucze alfabetycznie 341129585.

Pobieranie kanałów podglądu

Rozważ użycie jako domyślnej przeglądarki deweloperskiej przeglądarki Chrome w wersji Canary, Dev lub Beta. Te kanały wersji wstępnej zapewniają dostęp do najnowszych funkcji DevTools, umożliwiają testowanie najnowocześniejszych interfejsów API platformy internetowej i pomagają znaleźć problemy w witrynie, zanim zrobią to użytkownicy.

Kontakt z zespołem Narzędzi deweloperskich w Chrome

Aby omówić nowe funkcje, aktualizacje lub inne kwestie związane z Narzędziami deweloperskimi, skorzystaj z tych opcji.

Co nowego w Narzędziach deweloperskich

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