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 obsługuje w większości krajów europejskich statystyki konsoli od Gemini.

Lista nowych 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ć wygląda teraz tak:

  • Wyświetla legendę kolorów dla typów żądań.
  • Żądania blokujące renderowanie oznacza w prawym górnym rogu czerwone trójkąty.
  • Po wybraniu za pomocą strzałki wyświetla inicjatora żądania. Ułatwia to zrozumienie drzewa inicjatorów sieci, które wcześniej było dostępne tylko w panelu Sieć.
  • Po najechaniu kursorem na nową etykietkę zobaczysz teraz uporządkowane informacje 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 sieciowa z legendą kolorów, etykietkami, wskaźnikami blokowania renderowania i kodami czasowymi na karcie Podsumowanie.

Na karcie Podsumowanie możesz też kliknąć prawym przyciskiem myszy prośbę na ścieżce lub jej adresie URL i w menu wybrać 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 obsługuje dane rozszerzeń w panelu Skuteczność. Możesz teraz dodawać ścieżki niestandardowe ze zdarzeniami i opisami etykietek do śledzenia skuteczności, szczegółów na kartach 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 przechwytywania zaznacz Dane rozszerzenia. Rozpocznij nagrywanie występu, kliknij Add new Corgi (Dodaj nowego psa) na stronie demonstracyjnej, a potem zatrzymaj nagrywanie. Na karcie Podsumowanie zobaczysz ścieżkę niestandardową zawierającą zdarzenia z niestandardowymi etykietami i szczegółami.

Ścieżka niestandardowa w panelu Wydajność

Krótko mówiąc, aby rozszerzyć dane o skuteczności, przekaż konkretną strukturę do parametrów measureOption.detail lub markOption.detail w wywołaniach interfejsu API performance.measure() lub performance.mark().

Szczegóły na ścieżce czasu

Jeśli jesteś programistą stron internetowych i korzystasz z funkcji Czas działań użytkownika w interfejsie Performance API, aby dodawać wpisy do ścieżki Czasy, możesz teraz zobaczyć dowolne szczegóły zdarzeń mark i measure oraz ich sygnatury czasowe na karcie Podsumowanie.

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

Problem z Chromium: 345418915.

Skopiuj wszystkie żądania wymienione w panelu Sieć

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

Kopiuj opcje tylko w przypadku wymienionych żądań.

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

Zrzuty sterty w panelu Pamięć działają jeszcze szybciej, mają teraz obiekty pogrupowane według nazwanych tagów HTML, są lepiej dopasowane do semantyki języka JavaScript dzięki wyświetlaniu mniejszej liczby obiektów wewnętrznych i zawsze zawierają wartości liczbowe.

Obiekty pogrupowane według nazwanych tagów HTML.

Działanie ustawienia Uwzględnij wartości liczbowe w przechwytywaniu zostało przyspieszone, domyślnie włączone i usunięte z panelu Pamięć.

Aby ręcznie uwzględnić w zrzucie obiekty wewnętrzne, włącz najpierw Ustawienia > Eksperymenty > Pokaż opcję udostępniania obiektów wewnętrznych w zrzutach stosu, a następnie zaznacz Udostępnij obiekty wewnętrzne (...) w panelu Pamięć.

Problemy z Chromium: 41490040, 343341610, 42203857.

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

Panel Animacje wykona teraz te działania:

  • 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 przechwyconą animację podczas edytowania sekcji @keyframes w sekcji Elementy > Style.

W tym filmie pokażemy, jak działają obie 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.

Podstawowe informacje na temat korzystania z panelu Lighthouse w Narzędziach deweloperskich znajdziesz w artykule Lighthouse: optymalizacja szybkości witryny.

Problem z Chromium: 772558.

Ułatwienia dostępu

W tej wersji ulepszyliśmy 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 zaznaczenie go, dzięki czemu możesz go przesuwać, używając 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.

Różne wyróżnienia

Oto kilka ważnych poprawek i ulepszeń w tej wersji:

  • Skuteczność:
    • Śledzenie sieci: dodano zdarzenia połączenia WebSocket 331351979.
    • Panel Wydajność prawidłowo powiększa teraz najbardziej intensywną aktywność w wątku głównym 345599356.
    • Naprawiliśmy błąd związany z przesyłaniem nieprawidłowych typów plików śledzenia. Teraz uniemożliwia przesyłanie dowolnych typów innych niż prawidłowe .json lub .gz 349864878.
  • Elementy > Style:
    • Menu jednostki 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.
  • Wniosek:
    • 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.

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