Nowości w Narzędziach deweloperskich: Chrome 128

Sofia Emelianova
Sofia Emelianova
GitHub

Statystyki konsoli z Gemini są dostępne w większości krajów europejskich

Ta wersja udostępnia statystyki konsoli w Gemini w większości krajów europejskich.

Lista nowo obsługiwanych krajów europejskich

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

Jeśli mieszkasz w jednym z tych krajów, możesz teraz poprosić Gemini o statystyki bezpośrednio w Konsoli, aby lepiej rozumieć 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ń.
  • Oznacza żądania blokujące renderowanie za pomocą czerwonych trójkątów 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 wyświetla się teraz przerobiona etykieta z ustrukturyzowanymi informacjami o czasie, w tym stan blokowania renderowania i ewentualne zmiany priorytetu.
  • Na karcie Podsumowanie w kolumnie po prawej stronie wyświetla się teraz 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 umożliwiającego rozszerzanie

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óły na karcie Podsumowanie i nie tylko. Ta funkcja może być przydatna dla deweloperów frameworków, bibliotek i złożonych aplikacji z niestandardowymi narzędziami pomiarowymi.

Przykład ścieżki niestandardowej znajdziesz na stronie demonstracyjnej. W sekcji Wydajność > Ustawienia rejestrowania włącz Dane rozszerzenia. Rozpocznij nagrywanie wydajności, kliknij Dodaj nowego Corgi na stronie demonstracyjnej, 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 wywołań interfejsu API performance.measure() lub performance.mark().

Szczegóły na ścieżce Czas

Jeśli jesteś deweloperem internetowym i używasz części dotyczącej czasu użytkownika w Performance API do dodawania wpisów 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 w panelu Sieć możesz teraz stosować filtry i kopiować tylko wymienione żądania.

Kopiowanie opcji tylko w przypadku wymienionych żądań.

Szybsze zrzuty stosu z nazwami tagów HTML i mniejszą 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ć informacje wewnętrzne w migawkach stosu, a potem włącz Wyświetl informacje 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 wersji Lighthouse 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 związany z przesyłaniem nieprawidłowych typów plików z wykresami. Teraz nie można przesyłać żadnych typów 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 z odświeżaniem plików cookie 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 wersji Canary, Dev lub Beta przeglądarki Chrome. 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ędziach deweloperskich.