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

Kayce Basques
Kayce Basques
X GitHub

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

Nowa karta Problemy w panelu ma na celu zmniejszenie liczby powiadomień i zmniejszenie bałaganu w konsoli. Obecnie konsola jest centralnym miejscem, w którym programiści stron internetowych, bibliotek i frameworków oraz sama przeglądarka Chrome mogą rejestrować komunikaty, ostrzeżenia i błędy. Karta Problemy wyświetla ostrzeżenia z przeglądarki w uporządkowany, zagregowany i umożliwiający podjęcie działań sposób, zawiera linki do zasobów, których dotyczą problemy, w narzędziach deweloperskich oraz wskazówki dotyczące rozwiązywania problemów. Z czasem coraz więcej ostrzeżeń Chrome będzie wyświetlanych na karcie Problemy, a nie w Konsoli, co powinno pomóc zmniejszyć jej zagracenie.

Aby zacząć, przeczytaj artykuł Znajdowanie i rozwiązywanie problemów na karcie Problemy w Narzędziach deweloperskich w Chrome.

Karta Problemy.

Błąd w Chromium: #1068116

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

Etykietka trybu inspekcji wskazuje teraz, czy element ma nazwę i rolę na potrzeby ułatwień dostępu oraz czy można go wybrać za pomocą klawiatury.

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

Błąd w Chromium: #1040025

Zmiany w panelu wydajności

Wyświetlanie informacji o wskaźniku Total Blocking Time (TBT) w stopce

Po zarejestrowaniu skuteczności ładowania w stopce panelu Skuteczność pojawią się informacje o całkowitym czasie blokowania (TBT). TBT to dane dotyczące wydajności wczytywania, które pomagają określić, ile czasu zajmuje, zanim strona stanie się użyteczna. Mierzy on w zasadzie, jak długo strona wydaje się być gotowa do użycia (ponieważ jej zawartość została wyrenderowana na ekranie), ale w rzeczywistości nie jest, ponieważ JavaScript blokuje wątek główny, a tym samym strona nie może reagować na dane wprowadzane przez użytkownika. TBT to główny wskaźnik laboratoryjny służący do przybliżania opóźnienia przy pierwszym działaniu, które jest jednym z nowych podstawowych wskaźników internetowych Google.

Aby uzyskać informacje o całkowitym czasie blokowania, nie używaj przepływu pracy Odśwież stronę Załaduj ponownie stronę do rejestrowania skuteczności ładowania strony. Zamiast tego kliknij Rejestruj Nagraj, ręcznie załaduj ponownie stronę, poczekaj, aż się załaduje, a potem zatrzymaj nagrywanie. Jeśli widzisz Total Blocking Time: Unavailable, oznacza to, że Narzędzia deweloperskie nie otrzymały potrzebnych informacji z wewnętrznych danych profilowania Chrome.

Informacje o łącznym czasie blokowania w stopce nagrania z panelu Wydajność.

Błąd w Chromium: #1054381

Zdarzenia zmiany układu w nowej sekcji Doświadczenie

Nowa sekcja Wrażenia w panelu Skuteczność może pomóc w wykrywaniu zmian układu. Skumulowane przesunięcie układu (CLS) to wskaźnik, który pomaga określić niepożądaną niestabilność wizualną i jest 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. Najedź kursorem na pola Przeniesiono z i Przeniesiono do, aby zobaczyć, gdzie nastąpiło przesunięcie układu.

Szczegóły przesunięcia układu.

Dokładniejsze terminy dotyczące obietnic w Konsoli

Podczas rejestrowania Promise konsola nieprawidłowo opisywała stan Promise jako resolved:

Przykład użycia w konsoli starego terminu „rozwiązany”.

W konsoli używamy teraz terminu fulfilled, który jest zgodny ze Promise specyfikacją:

Przykład konsoli z nowym terminem „zrealizowano”.

Błąd V8: #6751

Aktualizacje panelu stylów

Obsługa słowa kluczowego revert

Interfejs autouzupełniania w panelu Style wykrywa teraz słowo kluczowe CSS revert, które przywraca kaskadową wartość właściwości do wartości, jaką miałaby ona, gdyby nie wprowadzono żadnych zmian w stylu elementu.

Ustawianie wartości właściwości, do której chcesz przywrócić poprzednią wartość.

Błąd w Chromium: #1075437

Podglądy obrazów

Najedź kursorem na wartość background-image w panelu Style, aby wyświetlić podgląd obrazu w etykiecie.

Najedź kursorem na wartość background-image.

Błąd w Chromium: #1040019

Selektor kolorów używa teraz notacji kolorów funkcyjnych rozdzielonych spacjami

Moduł kolorów CSS na poziomie 4 określa, że funkcje kolorów, takie jak rgb(), powinny obsługiwać argumenty rozdzielone spacjami. Na przykład rgb(0, 0, 0) jest równoważne z rgb(0 0 0).

Gdy wybierzesz kolory za pomocą selektora kolorów lub będziesz przełączać się między reprezentacjami kolorów w panelu Style, przytrzymując klawisz Shift i klikając wartość koloru, zobaczysz teraz składnię argumentu rozdzielonego spacjami.

Używanie argumentów oddzielonych spacjami w panelu Style.

Składnia jest też widoczna w panelu Obliczone i w etykiecie narzędzia Tryb inspekcji.

Narzędzia deweloperskie używają nowej składni, ponieważ nadchodzące funkcje CSS, takie jak color(), nie obsługują wycofanej składni argumentów rozdzielonych przecinkami.

Składnia argumentów rozdzielonych spacjami jest obsługiwana w większości przeglądarek od dłuższego czasu. Zobacz Czy mogę używać notacji kolorów funkcyjnych rozdzielonych spacjami?

Błąd w Chromium: #1072952

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

Panel Właściwości w panelu Elementy został wycofany. 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 rozpoczynać typowe lub zalecane zadania 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.

Więcej informacji znajdziesz w artykule Szybkie wykonywanie zadań za pomocą skrótów do aplikacji.

Skróty do aplikacji w panelu Manifest.

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ą wykrywać problemy w witrynie, zanim zauważą je 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.

Co nowego w Narzędziach deweloperskich

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