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

Kayce Basques
Kayce Basques
X GitHub

Kopiowanie stylów elementu

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

Kopiuj style.

Rysunek 1. Kopiowanie stylów elementów.

Dziękujemy Adamowi Argyle’owi i VisBug za inspirację.

Wizualizacja przesunięć układu

Załóżmy, że czytasz artykuł w ulubionej witrynie z wiadomościami. Podczas czytania strony ciągle gubisz się w tekście, 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.

przesunięcie układu.

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:

Nowy interfejs panelu Audyty.

Rysunek 3. Nowy interfejs panelu Audyty.

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

  • Budżety skuteczności 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 możliwości Lighthouse za pomocą własnych audytów niestandardowych.
  • Pakiety kart Dodaj audyty dostosowane 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 w Edytorze w panelu Źródła jest zaznaczony punkt przerwania, aby otworzyć Edytor punktów przerwania. W edytorze punktów przerwania możesz tworzyć punkty logowania i warunkowe punkty przerwania.

Edytor punktów przerwania.

Rysunek 4. Edytor punktów przerwania.

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

W kolumnie Rozmiar w panelu Sieć wyświetla się teraz symbol (prefetch cache), gdy zasób został 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.

Kolumna Rozmiar pokazująca, że zasoby pochodzą z pamięci podręcznej pobierania z wyprzedzeniem.

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 w Chromium nr 935267

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

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

Podczas sprawdzania obiektu konsola wyświetla teraz pola prywatne, takie jak „#color”.

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 usługi. Powiadomienia pojawiają się, gdy skrypt usługi lub skrypt strony wyświetla informacje użytkownikowi.

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.

Nowe panele Powiadomienia i Wiadomości push.

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.

Kontakt 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.