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

Kayce Basques

Kopiowanie stylów elementu

Aby skopiować do schowka kod CSS węzła DOM, kliknij go prawym przyciskiem myszy w drzewie DOM.

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ści przeskakują. 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 w wykrywaniu przesunięcia 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 kontrole 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 elementó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), gdy kursor znajduje się w edytorze panelu Źródła, aby otworzyć Edytor punktów przerwania. 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 wyświetla 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 przeglądarki Chrome w wersji Canary, Dev lub Beta. 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ędziech deweloperskich.