Nowości w Narzędziach deweloperskich: Chrome 128

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

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.

Zmiany w panelu wyników

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

Ścieżka Ulepszona sieć

Ścieżka Sieć na 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ą 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:

• 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ą. Ułatwia to zrozumienie drzewa 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.

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.

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 w dymkach, szczegóły na karcie Podsumowanie i inne informacje. Ta funkcja może być przydatna dla deweloperów platform, bibliotek i złożonych aplikacji z niestandardowym instrumentowaniem.

Przykład niestandardowej ścieżki znajdziesz na tej stronie demonstracyjnej. W sekcji Skuteczność > Ustawienia rejestrowania włącz check_box 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.

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ów, możesz teraz wyświetlać dowolne szczegóły na karcie Podsumowanie dla zdarzeń mark i measure oraz ich sygnatur czasowych.

Problem w Chromium: 345418915.

Skopiuj wszystkie wymienione żądania w panelu Sieć

Zamiast kopiować cały dziennik sieci, w panelu Sieć możesz teraz zastosować filtry i skopiować tylko wymienione żądania.

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, a także zawsze uwzględniają wartości liczbowe.

Działanie ustawienia check_box Uwzględnij wartości liczbowe w przechwytywaniu 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 Ustawienia > Eksperymenty > check_box Pokaż opcję udostępniania elementów wewnętrznych w migawkach sterty, a potem włącz check_box 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 z 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 intensywną aktywność głównego wątku 345599356.
  • Usunęliśmy błąd związany z przesyłaniem nieprawidłowych typów plików śledzenia. Teraz przesyłanie jest możliwe tylko w przypadku prawidłowych typów plików .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 problemu z aktywnymi usługami w przypadku zagnieżdżonych reguł @ 346732737.
  • Nieaktywne sekcje @position-try są teraz wyszarzone 40246493.
• Aplikacja:
  • Pliki cookie: naprawiono błąd, 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.

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.

Skontaktuj się 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.

• Prześlij nam opinię i prośby o dodanie funkcji na stronie crbug.com.
• Zgłoś problem z Narzędziami deweloperskimi, klikając more_vert Więcej opcji > Pomoc > Zgłoś problem z Narzędziami deweloperskimi w Narzędziach deweloperskich.
• Wyślij tweeta do @ChromeDevTools.
• Zostawiaj komentarze pod filmami na YouTube z serii „Co nowego w Narzędziach deweloperskich” lub filmami z serii „Wskazówki dotyczące Narzędzi deweloperskich”.

Co nowego w Narzędziach deweloperskich

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