Nowości w Narzędziach deweloperskich: Chrome 128

Statystyki konsoli 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.

Jeśli znajdujesz się w jednym z tych krajów, możesz teraz poprosić Gemini o przesłanie statystyk bezpośrednio w konsoli, aby lepiej zrozumieć błędy i ostrzeżenia.

Aktualizacje panelu wydajności

Ta aktualizacja wprowadza kilka ulepszeń w panelu Skuteczność.

Rozszerzona ścieżka sieciowa

Ulepszyliśmy ścieżkę Sieć w panelu Wydajność, dzięki czemu od razu pojawiają się najważniejsze informacje, takie jak bardziej szczegółowy czas trwania i drzewo inicjatora sieci, oraz zwiększa przejrzystość wskazówek wizualnych i kolorów. Nie trzeba więc przełączać się między panelem Sieć a sekcją Skuteczność > Podsumowanie. Jeśli dodatkowo musisz przełączyć się na panel Sieć, jest to łatwiejsze i szybsze.

Ś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.
• Pokazuje inicjator żądania po zaznaczeniu elementów ze strzałką. 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.
• Karta Podsumowanie zawiera teraz także zestawienie danych czasowych w kolumnie po prawej stronie.

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ć. W Narzędziach deweloperskich otworzy się panel Sieć i wyróżnisz żądanie, którego szukasz w tabeli.

Dostosuj dane o skuteczności za pomocą interfejsu API Extensibility API

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 programistów platform, bibliotek i złożonych aplikacji z własną instrumentacją.

Na tej stronie demonstracyjnej znajdziesz przykład ścieżki niestandardowej. W sekcji Skuteczność > Ustawienia przechwytywania, włącz check_box Dane rozszerzenia. Rozpocznij nagrywanie występu, kliknij Add new Corgi (Dodaj nowego psa) na stronie demonstracyjnej, a potem zatrzymaj nagrywanie. W śledzeniu pojawi się ścieżka niestandardowa, która zawiera zdarzenia z niestandardowymi etykietkami oraz szczegółowe informacje na karcie Podsumowanie.

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ś deweloperem 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.

Problem z Chromium: 345418915.

Skopiuj wszystkie żądania wymienione w panelu Sieć

Zamiast kopiować cały dziennik sieci, panel Sieć umożliwia teraz stosowanie filtrów i kopiowanie tylko wymienionych żądań.

Szybsze zrzuty stosu dzięki nazwanym tagom HTML i większy porządek

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.

Działanie ustawienia check_box 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 Ustawienia > Eksperymenty > check_box Pokaż opcję udostępniania zasobów wewnętrznych w zrzutach sterty, a następnie włącz check_box Udostępnij zasoby 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:

• Przechwytuje trwające animacje po otwarciu panelu, dzięki czemu nie musisz odświeżać strony.
• Obsługuje edycję na żywo pliku @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 szereg zmian, w tym usunięcie starego wskaźnika Pierwsze wyrenderowanie treści (FMP) i zastąpienie go największym wyrenderowaniem 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 uzupełnieniu w polu edycji aktywnych wyrażeń powoduje przeniesienie zaznaczenia na następny punkt zaznaczenia. Wcześniej powoduje to stosowanie wcięć.
• 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 wypowiada pole edycji Dodaj wyrażenie obserwacyjne w sekcji Źródła, a pole Usuń zegarek z zegarka jest teraz wyraźnie widoczne podczas nawigacji 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ść:
  • Ścieżka sieciowa: 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 usuwanie aktywnych właściwości zagnieżdżonych w regułach 346732737.
  • Nieaktywne sekcje @position-try są teraz wyszarzone 40246493.
• Aplikacja:
  • Pliki cookie: usunięto błąd, który nie powodował odświeżania plików cookie po kliknięciu przycisku Odśwież 348683488.
  • Pamięć lokalna: możesz teraz sortować dane według klawiszy w kolejności alfabetycznej 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 testowej dają dostęp do najnowszych funkcji Narzędzi deweloperskich, umożliwiają testowanie najnowocześniejszych interfejsów API platformy internetowej i wykrywanie problemów w witrynie, zanim użytkownicy ją zobaczą.

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

Skorzystaj z poniższych opcji, aby porozmawiać o nowych funkcjach i zmianach w poście lub o innych kwestiach związanych z Narzędziami deweloperskimi.

• Prześlij nam sugestię lub opinię na crbug.com.
• Aby zgłosić problem z Narzędziami deweloperskimi, kliknij Więcej opcji   > Pomoc > Zgłoś problemy z Narzędziami deweloperskimi w Narzędziach deweloperskich.
• Opublikuj tweeta na stronie @ChromeDevTools.
• Napisz komentarz w filmach w YouTube o nowościach w Narzędziach deweloperskich lub o filmach w YouTube ze wskazówkami dotyczącymi Narzędzi deweloperskich.

Co nowego w Narzędziach deweloperskich

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