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

Kayce Basques

Witamy z powrotem. Co nowego:

Wersja wideo tej strony

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

Najedź kursorem na właściwość CSS, która wpływa na model pudełka węzła, np. padding lub margin, aby wyróżnić wszystkie węzły, na które wpływa ta deklaracja.

Rysunek 1 Najechanie kursorem na właściwość margin podświetla marginesy wszystkich węzłów objętych deklaracją.

Lighthouse w wersji 4 w panelu Audyty

Nowa kontrola Elementy dotykowe nie mają odpowiedniej wielkości sprawdza, czy elementy interaktywne, takie jak przyciski i linki, mają odpowiednią wielkość i odstępy na urządzeniach mobilnych.

Kategoria aplikacji PWAs w raporcie korzysta teraz z systemu punktacji plakietki.

Rysunek 3. Nowy system punktacji odznaki w kategorii PWA

Wyświetlacz wiadomości binarnych WebSocket

Aby wyświetlić zawartość binarnej wiadomości WebSocket:

1. Otwórz panel Sieć. Aby poznać podstawy analizowania aktywności sieciowej, przeczytaj artykuł Sprawdzanie aktywności sieciowej.

   

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

3. Aby sprawdzić połączenie WebSocket, kliknij Nazwa.

   

   Rysunek 6. Sprawdzanie połączenia WebSocket

4. Kliknij kartę Wiadomości.

   

   Rysunek 7. Karta Wiadomości

5. Kliknij jeden z wpisów Wiadomość binarna, aby go sprawdzić.

   

   Rysunek 8. Sprawdzanie wiadomości binarnej

Aby przekonwertować wiadomość na format Base64 lub UTF-8, użyj menu u dołu przeglądarki. Aby skopiować wiadomość binarną do schowka, kliknij Kopiuj do schowka .

Rysunek 9. Wyświetlanie wiadomości binarnej jako Base64

Zrób zrzut ekranu obszaru w menu poleceń

Zrzuty ekranu obszaru umożliwiają zrobienie zrzutu ekranu części widoku. Ta funkcja istnieje już od jakiegoś czasu, ale proces uzyskiwania do niej dostępu był dość ukryty. Zrzuty ekranu obszaru są teraz dostępne w menu poleceń.

1. Aby ustawić fokus na Narzędziach dla programistów, naciśnij Control + Shift + P lub Command + Shift + P (Mac), aby otworzyć menu poleceń.

   

   Rysunek 10. Menu poleceń

2. Zacznij wpisywać area, wybierz Zrzuty ekranu obszaru, a następnie naciśnij Enter.

3. Przeciągnij kursor myszy po obszarze widoku, którego chcesz zrobić zrzut ekranu.

   

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

Filtry instancji roboczej usługi w panelu Sieć

Aby wyświetlić żądania wywołane (initiated) lub potencjalnie zmodyfikowane (intercepted) przez service workera, wpisz is:service-worker-initiated lub is:service-worker-intercepted w polu tekstowym filtra w panelu Sieć.

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 sieci znajdziesz w artykule Zasoby dotyczące filtrów.

Aktualizacje panelu skuteczności

W nagraniach wydajności zaznaczane są teraz długie zadania i pierwsze wyrenderowanie.

Przykład użycia panelu Wydajność do analizowania szybkości wczytywania stron znajdziesz w artykule Zmniejsz obciążenie głównego wątku.

Długotrwałe zadania w nagraniach z Centrum skuteczności

Nagrania dotyczące wydajności zawierają teraz długie zadania.

Rysunek 14. Najedź kursorem na długie zadanie w nagraniu skuteczności

Pierwsze wyrenderowanie w sekcji Czasy ładowania

W sekcji Czasy w rejestracji wydajności jest teraz zaznaczone Pierwsze wyrenderowanie.

Rysunek 15. Pierwsze wyrenderowanie w sekcji Czasy ładowania

Nowy samouczek dotyczący DOM

Zapoznaj się z artykułem Zaczynaj od wyświetlania i zmieniania modelu DOM, aby poznać funkcje związane z DOM.

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.

• Przesyłaj opinie i prośby o dodanie funkcji na stronie crbug.com.
• Zgłoś problem z Narzędziami deweloperskimi, klikając more_vert Więcej opcji > Pomoc > Zgłoś problem z Narzędziami deweloperskimi w Narzędziach deweloperskich.
• Wyślij tweeta do @ChromeDevTools.
• Dodaj komentarze do filmów w YouTube z serii „Co nowego w Narzędziach deweloperskich” lub Wskazówki dotyczące Narzędzi deweloperskich.

Co nowego w Narzędziach deweloperskich

Lista wszystkich tematów omawianych w cyklu artykułów Co nowego w Narzędziach deweloperskich.