Nowości w Narzędziach deweloperskich: Chrome 128

Sofia Emelianova
Sofia Emelianova

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.

Lista nowych obsługiwanych krajów europejskich

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

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.

Statystyki Gemini dotyczące błędu w konsoli.

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.

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

Menu dostępne prawym przyciskiem myszy dla żądania z panelem „Pokaż w sieci” .

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.

Niestandardowa ścieżka w panelu Skuteczność.

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.

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

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

Kopiuj opcje tylko w przypadku 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.

Obiekty pogrupowane według nazwanych tagów HTML.

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   Więcej > 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.