Nowości w Narzędziach deweloperskich (Chrome 84)

Kayce Basques

Rozwiązywanie problemów z witryną za pomocą nowej karty Problemy

Nowa karta Problemy w schowku ma na celu ograniczenie zmęczenia powiadomieniami i zaśmiecania konsoli. Obecnie konsola jest centralnym miejscem, w którym programiści stron internetowych, biblioteki, frameworki i sama przeglądarka Chrome mogą rejestrować komunikaty, ostrzeżenia i błędy. Karta Problemy zawiera ostrzeżenia z przeglądarki w usystematyzowanej, zagregowanej i możliwej do zastosowania formie, a także linki do zasobów, których dotyczy problem, w Narzędziach deweloperskich. Zawiera też wskazówki dotyczące rozwiązywania problemów. Z czasem coraz więcej ostrzeżeń z Chrome będzie wyświetlanych na karcie Problemy, a nie w Konsoli, co powinno pomóc w ograniczeniu bałaganu w Konsoli.

Aby rozpocząć, przeczytaj artykuł Znajdowanie i rozwiązywanie problemów za pomocą karty Problemy w Narzędziach deweloperskich Chrome.

Karta Problemy.

Chromium Bug: #1068116

Wyświetlanie informacji o ułatwieniach dostępu w etykiecie trybu inspekcji

Wskazówka trybu inspekcji wskazuje teraz, czy element ma nazwę i rolę, a także czy można go wybrać za pomocą klawiatury.

Etykietka trybu inspekcji z informacjami o ułatwieniach dostępu

Chromium Bug: #1040025

Aktualizacje panelu skuteczności

Wyświetlanie informacji o łącznym czasie blokowania w stopce

Po zarejestrowaniu wydajności wczytywania w stopce panelu Skuteczność pojawi się informacja o Czasie całkowitego blokowania (CTB). TBT to wskaźnik wydajności wczytywania, który pozwala określić, ile czasu zajmuje załadowanie strony. W podstawie mierzy czas, przez jaki strona wydaje się być użyteczna (ponieważ jej zawartość została wyrenderowana na ekranie), ale nie jest tak naprawdę użyteczna, ponieważ JavaScript blokuje główny wątek, przez co strona nie może reagować na dane wprowadzone przez użytkownika. TBT to główny wskaźnik laboratoryjny służący do przybliżonego określenia opóźnienia przy pierwszym działaniu, który jest jednym z nowych podstawowych wskaźników internetowych Google.

Aby uzyskać informacje o łącznym czasie blokowania, nie używaj procedury Odśwież stronę Załaduj ponownie stronę do rejestrowania wydajności wczytywania strony. Zamiast tego kliknij Rejestruj Rekord, załaduj ponownie stronę ręcznie, poczekaj, aż się załaduje, a potem zatrzymaj nagrywanie. Jeśli widzisz komunikat Total Blocking Time: Unavailable, oznacza to, że Narzędzia deweloperskie nie otrzymały potrzebnych informacji z danych do profilowania wewnętrznego Chrome.

Informacje o łącznym czasie blokowania w stopce nagrania w panelu skuteczności.

Chromium Bug: #1054381

Zdarzenia zmiany układu w nowej sekcji Doświadczenie

Nowa sekcja Doświadczenie w panelu Skuteczność może pomóc w wykryciu zmian układu. Skumulowane przesunięcie układu (CLS) to wskaźnik, który pozwala określić niechcianą niestabilność wizualną. Jest on jednym z nowych podstawowych wskaźników internetowych Google.

Kliknij zdarzenie Zmiana układu, aby wyświetlić szczegóły zmiany układu na karcie Podsumowanie. Aby zobaczyć, gdzie nastąpiła zmiana układu, najedź kursorem na pola Przeniesione z i Przeniesione do.

Szczegóły zmiany układu.

Bardziej dokładna terminologia w Konsoli

Podczas rejestrowania Promise Konsola błędnie określiła stan Promise jako resolved:

Przykład konsoli z użyciem starej terminologii „rozwiązano”.

Konsola używa teraz terminu fulfilled, który jest zgodny ze specyfikacją Promise:

Przykład Konsoli z użyciem nowej terminologii „zrealizowane”.

Błąd w V8: #6751

Aktualizacje panelu stylów

Obsługa słowa kluczowego revert

Interfejs automatycznego uzupełniania w panelu Styli rozpoznaje teraz słowo kluczowe CSS revert, które przywraca wartość kaskadową właściwości do wartości, jaką miałaby, gdyby nie wprowadzono żadnych zmian w stylizacji elementu.

Ustawienie wartości właściwości do przywrócenia.

Chromium Bug: #1075437

Podglądy obrazów

Najedź kursorem na wartość background-image w panelu Styl, aby wyświetlić podgląd obrazu w skrótce.

Najedź kursorem na wartość atrybutu background-image.

Chromium Bug: #1040019

Selektor kolorów używa teraz notacji kolorów funkcjonalnych oddzielonych spacjami

CSS Color Module Level 4 określa, że funkcje kolorów, takie jak rgb(), powinny obsługiwać argumenty rozdzielane spacjami. Na przykład rgb(0, 0, 0) jest równoważne rgb(0 0 0).

Gdy wybierzesz kolory za pomocą selektora kolorów lub przełączysz się między reprezentacjami kolorów w panelu Styl, przytrzymując klawisz Shift i klikając wartość koloru, zobaczysz składni argumentów oddzielonych spacjami.

za pomocą argumentów oddzielonych spacjami w panelu Styl.

Składnię zobaczysz też w panelu Obliczenia i w opisie w trybie inspekcji.

Narzędzie DevTools używa nowej składni, ponieważ nadchodzące funkcje CSS, takie jak color(), nie obsługują wycofanej składni argumentów oddzielonych przecinkami.

Składnia argumentów oddzielonych spacjami jest od jakiegoś czasu obsługiwana w większości przeglądarek. Zobacz Czy mogę używać zapisu kolorów funkcjonalnych oddzielonych spacjami?.

Chromium Bug: #1072952

Wycofanie panelu Właściwości w panelu Elementy

Panel Właściwości w panelu Elementy został wycofany. Zamiast tego uruchom console.dir($0) w Konsoli.

Wycofany panel Właściwości.

Źródła:

Obsługa skrótów do aplikacji w panelu Manifest

Skróty do aplikacji pomagają użytkownikom szybko uruchamiać typowe lub zalecane czynności w aplikacji internetowej. Menu skrótów do aplikacji jest wyświetlane tylko w przypadku progresywnych aplikacji internetowych zainstalowanych na komputerze lub urządzeniu mobilnym użytkownika.

Aby dowiedzieć się więcej, przeczytaj artykuł Szybkie wykonywanie zadań dzięki skrótom aplikacji.

Skróty do aplikacji na panelu Manifest.

Pobieranie kanałów podglądu

Rozważ użycie jako domyślnej przeglądarki deweloperskiej wersji Canary, Dev lub Beta przeglądarki Chrome. Te kanały wersji wstępnej zapewniają dostęp do najnowszych funkcji DevTools, umożliwiają testowanie najnowocześniejszych interfejsów API platformy internetowej i pomagają znaleźć problemy w witrynie, zanim zrobią to użytkownicy.

Kontakt z zespołem Narzędzi deweloperskich w Chrome

Aby omówić nowe funkcje, aktualizacje lub inne kwestie związane z Narzędziami deweloperskimi, skorzystaj z tych opcji.

Co nowego w Narzędziach deweloperskich

Lista wszystkich tematów omawianych w cyklu artykułów Co nowego w Narzędziach deweloperskich.