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

Kayce Basques

Kopiowanie stylów elementu

Kliknij prawym przyciskiem myszy węzeł w drzewie DOM, aby skopiować CSS tego węzła DOM do schowka.

Rysunek 1. Kopiowanie stylów elementów.

Dziękujemy Adamowi Argyle i VisBug za inspirację.

Wizualizacja przesunięć układu

Załóżmy, że czytasz artykuł w ulubionej witrynie z wiadomościami. Podczas czytania strony tracisz orientację, ponieważ treść przeskakuje. Ten problem nazywa się przesunięciem układu. Zwykle dzieje się tak, gdy obrazy i reklamy zostaną wczytane. Strona nie zarezerwowała miejsca na obrazy i reklamy, więc przeglądarka musi przesunąć w dół całą pozostałą treść, aby zrobić dla nich miejsce. Rozwiązaniem jest użycie obiektów zastępczych.

Narzędzia deweloperskie mogą teraz pomóc w wykrywaniu przesunięć układu:

1. Otwórz menu poleceń.
2. Zacznij pisać Rendering.
3. Uruchom polecenie Show Rendering (Pokaż renderowanie).
4. Zaznacz pole wyboru Regiony przesunięcia układu. Podczas interakcji ze stroną przesunięcia układu są wyróżniane na niebiesko.

Rysunek 2. przesunięcie układu,

Problem w Chromium nr 961846

Lighthouse 5.1 w panelu Audyty

Panel Audyty korzysta teraz z Lighthouse w wersji 5.1. Nowe kontrole obejmują:

• Dostarcza prawidłowy atrybut apple-touch-icon. Sprawdza, czy aplikację PWA można dodać do ekranu głównego na iOS.
• Zmniejsz liczbę żądań i rozmiar plików. Raportuje łączną liczbę żądań sieciowych i rozmiary plików w różnych kategoriach, takich jak dokumenty, skrypty, arkusze stylów, obrazy itp.
• Maksymalne potencjalne opóźnienie przy pierwszym działaniu Mierzy maksymalny potencjalny czas pomiędzy pierwszym działaniem użytkownika na stronie a reakcją przeglądarki na to działanie. Pamiętaj, że ten wskaźnik zastępuje wskaźnik Szacowane opóźnienie wprowadzania danych. Maksymalne potencjalne opóźnienie przy pierwszym działaniu nie jest uwzględniane w ocenie kategorii Wydajność.

Rysunek 3. Nowy interfejs panelu Audyty.

Wersje Lighthouse 5.1 na Node.js i CLI mają 3 nowe, ważne funkcje, które warto poznać:

• Budżety wydajnościowe Zapobiegaj pogarszaniu się wydajności witryny z upływem czasu, określając liczbę żądań i rozmiary plików, których strony nie powinny przekraczać.
• Wtyczki Rozszerz Lighthouse o własne audyty niestandardowe.
• Pakiety kart Dodawanie audytów dostosowanych do konkretnych stosów technologii. Najpierw wysłaliśmy pakiet WordPress Stack Pack. Pakiety React i AMP są w trakcie opracowywania.

Synchronizacja motywu systemu operacyjnego

Jeśli używasz ciemnego motywu systemu operacyjnego, Narzędzia deweloperskie automatycznie przełączą się na własny ciemny motyw.

Skrót klawiszowy do otwierania edytora punktów przerwania

Naciśnij Control+Alt+B lub Command+Option+B (Mac), gdy zaznaczony jest Edytor w panelu Źródła, aby otworzyć Edytor punktów przerwania. Użyj edytora punktów przerwania, aby utworzyć punkty logowania i warunkowe punkty przerwania.

Rysunek 4. Edytor punktów przerwania.

Pamięć podręczna pobierania wstępnego w panelu Sieć

W kolumnie Rozmiar w panelu Sieć pojawi się teraz symbol (prefetch cache), gdy zasób zostanie wczytany z pamięci podręcznej pobierania z wyprzedzeniem. Pobieranie z wyprzedzeniem to stosunkowo nowa funkcja platformy internetowej, która przyspiesza wczytywanie kolejnych stron. Z raportów Can I use... wynika, że w lipcu 2019 r.była ona obsługiwana w 83,33% przeglądarek na całym świecie.

Rysunek 5. Kolumna Rozmiar pokazuje, że prefetch2.html i prefetch2.css pochodzą z (prefetch cache).

Aby wypróbować tę funkcję, zobacz prezentację wstępnego pobierania.

Problem 935267 w Chromium

Właściwości prywatne podczas wyświetlania obiektów

Konsola wyświetla teraz prywatne pola klasy w podglądach obiektów.

Rysunek 6. Stara wersja Chrome po lewej stronie nie wyświetla pola #color podczas sprawdzania obiektu, a nowa wersja po prawej stronie je wyświetla.

Powiadomienia i wiadomości push w panelu Aplikacja

Sekcja Usługi w tle w panelu Aplikacja obsługuje teraz wiadomości push i powiadomienia. Wiadomości push są wysyłane, gdy serwer przesyła informacje do procesu roboczego usługi. Powiadomienia pojawiają się, gdy skrypt usługi lub skrypt strony wyświetla użytkownikowi informacje.

Podobnie jak w przypadku funkcji pobierania w tle i synchronizacji w tle z Chrome 76, po rozpoczęciu nagrywania wiadomości push i powiadomienia na tej stronie są rejestrowane przez 3 dni, nawet gdy strona jest zamknięta i nawet gdy Chrome jest zamknięty.

Rysunek 7. Nowe panele Wiadomości push i Powiadomienia w panelu Aplikacja.

Problem w Chromium nr 927726

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.