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

Kayce Basques

Witamy z powrotem. Nowości

Wersja wideo tej strony

Zaznacz wszystkie węzły, na które wpływa właściwość CSS

Najedź kursorem na właściwość CSS, która ma wpływ na model pudełkowy węzła, na przykład padding lub margin, aby zaznacz wszystkie węzły, których dotyczy ta deklaracja.

Rysunek 1. Najechanie kursorem na właściwość margin powoduje podświetlenie marginesów wszystkich węzłów, których to dotyczy deklaracja

Lighthouse w wersji 4 w panelu Audyty

Nowe elementy docelowe kliknięcia nie mają odpowiedniego rozmiaru. Dzięki nim można sprawdzić, czy interaktywne elementy takie jak na urządzeniach mobilnych są odpowiednio duże i oddalone od siebie.

Kategoria aplikacji PWA w raporcie korzysta teraz z systemu punktowego odznak.

Rysunek 3. Nowy system punktacji plakietek dla kategorii PWA

Przeglądarka komunikatów binarnych WebSocket

Aby wyświetlić zawartość pliku binarnego WebSocket:

1. Otwórz panel Sieć. Podstawy analizy znajdziesz w artykule Sprawdzanie aktywności w sieci. aktywność sieciową.

   

   Rysunek 4. Panel Sieć

2. Kliknij WS, aby odfiltrować wszystkie zasoby, które nie są połączeniami WebSocket.

   

   Rysunek 5. Po kliknięciu WS wyświetlane są tylko połączenia WebSockety.

3. Kliknij nazwę połączenia WebSocket, aby je sprawdzić.

   

   Rysunek 6. Sprawdzanie połączenia WebSocket

4. Kliknij kartę Wiadomości.

   

   Rysunek 7. Karta Wiadomości

5. Kliknij jeden z wpisów Binary Message (Komunikat binarny), aby go sprawdzić.

   

   Rysunek 8. Sprawdzanie komunikatu binarnego

Za pomocą menu u dołu przeglądarki możesz przekonwertować wiadomość na format Base64 lub UTF-8. Kliknij Kopiuj do schowka , aby skopiować wartość pliku binarnego do schowka.

Rysunek 9. Wyświetlanie komunikatu binarnego w formacie Base64

Zrób zrzut ekranu obszaru w menu poleceń

Zrzuty ekranu przedstawiające obszar umożliwiają zrobienie zrzutu ekranu wybranego obszaru. Ta funkcja została ale proces uzyskiwania dostępu do niego był dość ukryty. Zrzuty ekranu obszaru są teraz dostępne w menu poleceń.

1. Zaznacz Narzędzia deweloperskie i naciśnij Control + Shift + P lub Command + Shift + P (Mac), aby otworzyć menu poleceń.

   

   Rysunek 10. Menu polecenia

2. Zacznij pisać area, wybierz Zarejestruj zrzuty ekranu obszaru, a następnie naciśnij Enter.

3. Przeciągnij myszą obszar widocznego obszaru, którego zrzut chcesz zrobić.

   

   Rysunek 11. Wybieranie części widocznego obszaru do zrzutu ekranu

Filtry mechanizmów Service Worker w panelu Sieć

Wpisz is:service-worker-initiated lub is:service-worker-intercepted w filtrze panelu Sieć pola tekstowego do wyświetlania żądań, które zostały wywołane przez (initiated) lub potencjalnie zmodyfikowane (intercepted) przez skrypt service worker.

Rysunek 12. Filtrowanie według: is:service-worker-initiated

Rysunek 13. Filtrowanie według: is:service-worker-intercepted

Więcej informacji o filtrowaniu logów sieciowych znajdziesz w artykule Filtrowanie zasobów.

Aktualizacje panelu wydajności

Nagrania z występów zawierają teraz znaczniki długich zadań i pierwsze wyrenderowanie.

Przeczytaj artykuł o usuwaniu głównego wątku, aby dowiedzieć się, jak wykorzystać panel Wydajność do analizy. wydajność wczytywania strony.

Długie zadania w nagraniach z występów

Nagrania koncertowe zawierają teraz długie zadania.

Rysunek 14. Najechanie kursorem na długie zadanie w nagraniu wydajności

Pierwsze wyrenderowanie w sekcji Czasy

W sekcji Czasy w nagraniu dotyczącym skuteczności następuje teraz pierwsze wyrenderowanie.

Rysunek 15. Pierwsze wyrenderowanie w sekcji Czasy

Nowy samouczek dotyczący modelu DOM

Na stronie Get Started With Viewing and Change The DOM (Pierwsze kroki z wyświetlaniem i zmienianiem modelu DOM) znajdziesz praktyczne omówienie zagadnień związanych z DOM. funkcje zabezpieczeń.

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.