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ć do schowka kod CSS tego węzła.

kopiować style.

Rysunek 1. kopiować style elementów;

Dziękujemy Adamowi Argyle i VisBug za inspirację.

Wizualizacja przesunięć układu

Załóżmy, że czytasz artykuł w ulubionej witrynie. Podczas czytania strony ciągle tracisz miejsce, ponieważ treść przeskakuje. Ten problem nazywa się przesuwaniem układu. Zwykle dzieje się tak, gdy skończy się wczytywanie obrazów i reklam. Strona nie zarezerwowała miejsca na obrazy i reklamy, więc przeglądarka musi przesunąć wszystkie inne treści w dół, aby zrobić dla nich miejsce. Rozwiązaniem jest użycie wartości zastępczych.

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

  1. Otwórz Menu poleceń.
  2. Zacznij pisać Rendering.
  3. Uruchom polecenie Pokaż renderowanie.
  4. Zaznacz pole wyboru Regiony przesunięcia układu. Gdy wchodzisz w interakcję ze stroną, przesunięcia układu są wyróżnione na niebiesko.

przesunięcie układu.

Rysunek 2. przesunięcie układu.

Problem Chromium #961846

Lighthouse 5.1 w panelu Audyty

Panel audytów korzysta teraz z wersji Lighthouse 5.1. Nowe audyty obejmują:

Nowy interfejs panelu kontroli

Rysunek 3. Nowy interfejs panelu kontroli

Wersje Node i CLI Lighthouse 5.1 mają 3 nowe główne funkcje, które warto sprawdzić:

  • Budżety skuteczności. Zapobiegaj regresji 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 sterowników. Dodawanie audytów dostosowanych do konkretnych zestawów technologii Pakiet WordPress Stack Pack został wysłany jako pierwszy. Pakiety React i AMP Stack są w trakcie tworzenia.

Synchronizacja motywu systemu operacyjnego

Jeśli używasz ciemnego motywu w systemie operacyjnym, DevTools automatycznie przełączy 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), aby otworzyć Edytor punktów przerwania w Edytorze w panelu Źródła. Za pomocą edytora punktów przerwania możesz tworzyć punkty logowania i warunkowe punkty przerwania.

Edytor punktów przerwania.

Rysunek 4. Edytor punktów przerwania.

Pobieranie w poprzednim planie pamięci podręcznej w panelu Sieć

W kolumnie Rozmiar w panelu Sieć widoczna jest teraz wartość (prefetch cache), gdy zasób został załadowany z pamięci podręcznej pobierania z wyprzedzeniem. Pobieranie z wyprzedzeniem to nowa funkcja platformy internetowej, która przyspiesza kolejne wczytywanie stron. Czy mogę używać… podaje, że w lipcu 2019 r. ta funkcja była obsługiwana w 83,33% przeglądarek na świecie.

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

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

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

Problem Chromium #935267

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

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

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

Rysunek 6. Stara wersja Chrome po lewej stronie nie pokazuje pola #color podczas sprawdzania obiektu, podczas gdy nowa wersja po prawej stronie tak.

Powiadomienia i wiadomości push w panelu aplikacji

Sekcja Usługi w tle na panelu Aplikacje obsługuje teraz wiadomości push i powiadomienia. Wiadomości push są wysyłane, gdy serwer przekazuje informacje do service workera. Powiadomienia pojawiają się, gdy pracownik usługi lub skrypt strony wyświetla informacje użytkownikowi.

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

nowe panele Powiadomienia i Powiadomienia push;

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

Problem Chromium #927726

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.