Nowości w Narzędziach deweloperskich: Chrome 128

Sofia Emelianova
Sofia Emelianova
GitHub

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

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

Lista nowo obsługiwanych krajów europejskich

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

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

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

Zmiany w panelu wyników

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

Ścieżka Ulepszona sieć

Ścieżka Sieć w panelu Wydajność została ulepszona, aby od razu wyświetlać najważniejsze informacje, np. bardziej szczegółowe drzewo czasu trwania i inicjatora sieci, oraz zapewniać większą przejrzystość wskazówek wizualnych i kolorów. Nie musisz już przełączać się między panelem Sieć a kartą Wydajność > 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:

  • Wyświetla legendę kolorów typów żądań.
  • Oznacza żądania blokujące renderowanie czerwonymi trójkątami w prawym górnym rogu.
  • Po wybraniu inicjatora żądania wyświetla go ze strzałką. Dzięki temu możesz poznać drzewo inicjatorów sieci, które było wcześniej dostępne tylko w panelu Sieć.
  • Po najechaniu kursorem na etykietkę wyświetlają się teraz uporządkowane informacje o czasie, w tym stan blokowania renderowania i zmiany priorytetu (jeśli takie nastąpiły).
  • Na karcie Podsumowanie po prawej stronie znajduje się teraz kolumna z podziałem czasowym.

Ulepszona ścieżka sieci z legendą kolorów, etykietkami, wskaźnikami blokowania renderowania i czasami na karcie Podsumowanie.

Możesz też kliknąć prawym przyciskiem myszy żądanie na ścieżce lub jego adres URL na karcie Podsumowanie i z menu wybrać Pokaż w panelu Sieć. Narzędzia deweloperskie otworzą panel Sieć i wyróżnią w tabeli szukane żądanie.

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

Dostosowywanie danych o skuteczności za pomocą interfejsu API rozszerzalności

W tej wersji dodaliśmy obsługę danych rozszerzeń w panelu Wydajność. Możesz teraz dodawać do śladu wydajności niestandardowe ścieżki ze zdarzeniami i opisami etykietek, szczegóły na karcie Podsumowanie i nie tylko. Ta funkcja może być przydatna dla programistów platform, bibliotek i złożonych aplikacji z niestandardowymi instrumentami.

Przykład niestandardowej ścieżki znajdziesz na tej stronie demonstracyjnej. W sekcji Skuteczność > Ustawienia rejestrowania włącz Dane o rozszerzeniach. Rozpocznij nagrywanie wydajności, na stronie demonstracyjnej kliknij Add new Corgi (Dodaj nowego corgi), a następnie zatrzymaj nagrywanie. W śladzie zobaczysz ścieżkę niestandardową, która zawiera zdarzenia z niestandardowymi etykietkami i szczegółami na karcie Podsumowanie.

niestandardową ścieżkę w panelu Wydajność;

Aby rozszerzyć dane o skuteczności, przekaż 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 stron internetowych, który używa części interfejsu Performance API dotyczącej czasu działania użytkownika, aby dodawać wpisy do ścieżki Czas, możesz teraz wyświetlać dowolne szczegóły na karcie Podsumowanie w przypadku zdarzeń mark i measure oraz ich sygnatur czasowych.

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

Problem w Chromium: 345418915.

Skopiuj wszystkie wymienione żądania w panelu Sieć

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

Opcje kopiowania tylko w przypadku wymienionych żądań.

Szybsze zrzuty sterty z nazwanymi tagami HTML i mniejszą ilością niepotrzebnych informacji

Obrazy sterty w panelu Pamięć działają jeszcze szybciej, a obiekty są w nich grupowane według nazwanych tagów HTML. Lepiej odzwierciedlają semantykę języka JavaScript, ponieważ zawierają mniej obiektów wewnętrznych, i zawsze uwzględniają wartości liczbowe.

Obiekty pogrupowane według nazwanych tagów HTML.

Działanie ustawienia Uwzględniaj wartości liczbowe w zrzucie sterty zostało przyspieszone, jest ono domyślnie włączone i zostało usunięte z panelu Pamięć.

Aby ręcznie uwzględnić obiekty wewnętrzne w migawce, najpierw włącz Ustawienia > Eksperymenty > Pokaż opcję udostępniania elementów wewnętrznych w migawkach sterty, a potem włącz Udostępnij elementy wewnętrzne (...) w panelu Pamięć.

Problemy z Chromium: 41490040, 343341610, 42203857.

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

Panel Animacje umożliwia teraz:

  • Rejestruje animacje, które są już w toku, gdy otworzysz panel, więc nie musisz odświeżać strony, aby je zarejestrować.
  • Obsługuje edytowanie na żywo @keyframes. Innymi słowy, aktualizuje przechwyconą animację podczas edytowania sekcji @keyframes w Elementy > Style.

Obie funkcje w działaniu możesz zobaczyć na tym filmie.

Problem w Chromium: 352718055.

Lighthouse 12.1.0

Panel Lighthouse działa teraz w wersji 12.1.0.

Ta aktualizacja wprowadza szereg zmian, w tym usunięcie starego wskaźnika pierwszego wyrenderowania elementu znaczącego (FMP) na rzecz największego wyrenderowania treści (LCP). Zobacz pełną listę zmian.

Podstawowe informacje o korzystaniu z panelu Lighthouse w Narzędziach deweloperskich znajdziesz w artykule Lighthouse: optymalizacja szybkości witryny.

Problem w Chromium: 772558.

Ułatwienia dostępu

Ta wersja zawiera następujące ulepszenia ułatwień dostępu:

  • Naciśnięcie klawisza Tab po automatycznym uzupełnieniu w polu edycji wyrażeń na żywo przenosi zaznaczenie do następnego punktu zaznaczenia. Wcześniej powodowało to wcięcie tekstu.
  • Kliknięcie elementu zmieniającego rozmiar powoduje jego zaznaczenie, dzięki czemu możesz go przesuwać za pomocą klawiszy strzałek w lewo i w prawo.
  • Czytnik ekranu odczytuje teraz pole edycji Dodaj wyrażenie obserwowane w sekcji Źródła, a opcja Usuń wyrażenie obserwowane jest teraz wyraźnie widoczna podczas poruszania się za pomocą klawiatury.

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

Różne wyróżnione informacje

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

  • Skuteczność:
    • Ścieżka Sieć: dodano zdarzenia połączenia WebSocket 331351979.
    • Panel Wydajność prawidłowo powiększa teraz najbardziej aktywny wątek główny 345599356.
    • Usunęliśmy błąd związany z przesyłaniem nieprawidłowych typów plików śledzenia. Teraz uniemożliwiamy przesyłanie plików innych niż prawidłowe .json lub .gz 349864878.
  • Elementy > Style:
    • Menu jednostek w wartościach właściwości długości zostało wycofane 41495618.
    • Naprawiono rozwiązywanie aktywnych usług w przypadku zagnieżdżonych reguł @ 346732737.
    • Nieaktywne sekcje @position-try są teraz wyszarzone 40246493.
  • Aplikacja:
    • Pliki cookie: naprawiliśmy błąd, który powodował, że pliki cookie nie odświeżały się po kliknięciu Odśwież 348683488.
    • Pamięć lokalna: możesz teraz sortować klucze alfabetycznie 341129585.

Pobieranie kanałów podglądu

Rozważ używanie Chrome w wersji Canary, deweloperskiej lub beta jako domyślnej przeglądarki do programowania. Te kanały wersji testowych zapewniają dostęp do najnowszych funkcji Narzędzi deweloperskich, umożliwiają testowanie najnowocześniejszych interfejsów API platformy internetowej i pomagają znajdować problemy w witrynie, zanim zrobią to użytkownicy.

Kontakt z zespołem Narzędzi deweloperskich w Chrome

Skorzystaj z tych opcji, aby porozmawiać o nowych funkcjach, aktualizacjach lub innych kwestiach związanych z Narzędziami deweloperskimi.

Co nowego w Narzędziach deweloperskich

Lista wszystkich tematów omówionych w serii Nowości w Narzędziach deweloperskich.