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

Kayce Basques

Skopiuj style elementu

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

Rysunek 1. Kopiuj style elementów.

Dziękujemy Adam Argyle i VisBug za inspirację.

Wizualizacja przesunięć układu

Wyobraź sobie, że czytasz artykuł z wiadomościami w swojej ulubionej witrynie. Czytając stronę, że wszystko będzie w porządku, bo treści kręcą się po głowie. Ten problem jest nazywany układem Zwykle dzieje się tak po zakończeniu wczytywania obrazów i reklam. Strona nie zarezerwowała jeszcze miejsca na obrazach i reklamach, więc przeglądarka musi przesunąć całą resztę treści w dół, by zrobić miejsce . Rozwiązaniem jest użycie symboli zastępczych.

Narzędzia deweloperskie mogą teraz pomagać 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. Gdy wchodzisz na stronę, przesunięcia układu podświetlony na niebiesko.

Rysunek 2. Przesunięcie układu.

Problem nr 961846 w Chromium

Lighthouse 5.1 w panelu Audyty

W panelu Audyty działa teraz Lighthouse 5.1. Nowe audyty obejmują:

• Dostarcza prawidłową wartość apple-touch-icon. Sprawdza, czy aplikację PWA można dodać do ekranu głównego iOS.
• Nie ograniczaj liczby żądań ani rozmiaru plików. podaje łączną liczbę żądań sieciowych oraz rozmiary plików dla różnych kategorii, takich jak dokumenty, skrypty, arkusze stylów, obrazy itp.
• Maksymalne potencjalne opóźnienie przy pierwszym działaniu. Mierzy maksymalny potencjalny czas upływający między pierwszej interakcji ze stroną oraz reakcji przeglądarki. Pamiętaj, że ten wskaźnik zastępuje dane Szacowany czas oczekiwania na dane wejściowe. Maksymalne potencjalne opóźnienie przy pierwszym działaniu nie uwzględnia do wyniku kategorii skuteczności.

Rysunek 3. Interfejs nowego panelu kontroli.

Wersje Lighthouse i interfejs wiersza poleceń w wersji Node.5.1 mają 3 nowe główne funkcje, które warto sprawdzić:

• Budżety skuteczności. Określ żądanie, aby zapobiec ponownemu powrotowi witryny w czasie. i wielkości plików, których strony nie powinny przekraczać.
• Wtyczki. Rozszerz Lighthouse z własnych audytów.
• Pakiety stosu. dodawać audyty dostosowane do konkretnych stosów technologicznych. Pakiet stosu WordPress wysyłane jako pierwsze. Trwają prace nad pakietami React i AMP Stack Pack.

Synchronizacja motywu systemu operacyjnego

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

Skrót klawiszowy do otwierania edytora punktów przerwania

Naciśnij Control+Alt+B lub Command + Option + B (Mac) po zaznaczeniu w edytorze panelu Źródła. aby otworzyć edytor punktów przerwania. Za pomocą edytora punktów przerwania możesz tworzyć punkty logowania. Warunkowe punkty przerwania.

Rysunek 4. Edytor punktów przerwania.

Wstępnie pobieraj pamięć podręczną w panelu Sieć

W kolumnie Rozmiar w panelu Sieć widoczna jest teraz wartość (prefetch cache), jeśli zasób został załadowany z z pamięci podręcznej pobierania z wyprzedzeniem. Pobieranie z wyprzedzeniem to nowa funkcja platformy internetowej przyspieszająca wyświetlanie kolejnych stron. . Czy mogę używać... z raportów, że stan na lipiec 2019 roku jest obsługiwany w 83,33% przeglądarek na całym świecie.

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

Aby wypróbować tę funkcję, obejrzyj wersję demonstracyjną pobierania z wyprzedzeniem.

Problem nr 935267 z Chromium

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

Podgląd obiektów konsoli pokazuje teraz pola klas prywatnych.

Rysunek 6. Stara wersja Chrome po lewej stronie nie pokazuje pola #color podczas sprawdzania jak w przypadku nowej wersji po prawej stronie.

Powiadomienia i wiadomości push w panelu aplikacji

Sekcja Usługi w tle w panelu aplikacji obsługuje teraz Wiadomości push i Powiadomienia. Komunikaty push występują, gdy serwer wysyła informacje do skryptu service worker. Powiadomienia pojawiają się, gdy skrypt service worker lub skrypt strony pokazuje użytkownikowi informacje.

Tak jak w przypadku funkcji pobierania w tle i synchronizacji w tle dostępnych w Chrome 76, nagrywanie, wiadomości push i powiadomienia na tej stronie są rejestrowane przez 3 dni, nawet jeśli strona jest zamknięta, nawet wtedy, gdy przeglądarka Chrome jest zamknięta.

Rysunek 7. Nowe okienka Wiadomości push i Powiadomienia w panelu aplikacji.

Problem nr 927726 z Chromium

Pobierz kanały podglądu

Zastanów się, czy nie ustawić Chrome w wersji Canary, Dev lub beta jako domyślnej przeglądarki do programowania. Te kanały wersji testowej dają dostęp do najnowszych funkcji Narzędzi deweloperskich, umożliwiają testowanie najnowocześniejszych interfejsów API platformy internetowej i wykrywanie problemów w witrynie, zanim użytkownicy ją zobaczą.

Kontakt z zespołem ds. Narzędzi deweloperskich w Chrome

Skorzystaj z poniższych opcji, aby porozmawiać o nowych funkcjach i zmianach w poście lub o innych kwestiach związanych z Narzędziami deweloperskimi.

• Prześlij nam sugestię lub opinię na crbug.com.
• Aby zgłosić problem z Narzędziami deweloperskimi, kliknij Więcej opcji   > Pomoc > Zgłoś problemy z Narzędziami deweloperskimi w Narzędziach deweloperskich.
• Opublikuj tweeta na stronie @ChromeDevTools.
• Napisz komentarz w filmach w YouTube o nowościach w Narzędziach deweloperskich lub o filmach w YouTube ze wskazówkami dotyczącymi Narzędzi deweloperskich.

Co nowego w Narzędziach deweloperskich

Lista wszystkich tematów, które zostały omówione w serii Co nowego w Narzędziach deweloperskich.