Nowości w Narzędziach deweloperskich: Chrome 128

Sofia Emelianova
Sofia Emelianova
GitHub

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

Ścieżka Sieć w panelu Skuteczność została udoskonalona, aby od razu wyświetlać istotne informacje, więc nie trzeba przełączać się między panelem Sieć a sekcją Skuteczność > Podsumowanie i pomoże Ci lepiej zrozumieć wskazówki wizualne i kolory. 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 blokowania renderowania są oznaczone czerwonymi trójkątami w prawym górnym rogu i po zaznaczeniu inicjatora żądania – strzałką.
  • Po najechaniu kursorem na nową etykietkę zobaczysz teraz uporządkowane informacje o czasie, w tym ewentualne zmiany priorytetu i blokowania renderowania.
  • 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.

Chrome 128

Chrome 127

Chrome 126

Chrome 125

Chrome 124

Chrome 123

Chrome 122

Chrome 121

Chrome 120

Chrome 119

Chrome 118

Chrome 117

Chrome 116

Chrome 115

Chrome 114

Chrome 113

Chrome 112

Chrome 111

Chrome 110

Chrome 109

Chrome 108

Chrome 107

Chrome 106

Chrome 105

Chrome 104

Chrome 103

Chrome 102

Chrome 101

Chrome 100

Chrome 99

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Chrome 93

Chrome 92

Chrome 91

Chrome 90

Chrome 89

Chrome 88

Chrome 87

Chrome 86

Chrome 85

Chrome 84

Chrome 83

Chrome 82

Chrome 82 został anulowany.

Chrome 81

Chrome 80

Chrome 79

Chrome 78

Chrome 77

Chrome 76

Chrome 75

Chrome 74

Chrome 73

Chrome 72

Chrome 71

Chrome 70

Chrome 68

Chrome 67

Chrome 66

Chrome 65

Chrome 64

Chrome 63

Chrome 62

Chrome 61

Chrome 60

Chrome 59