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, których dotyczy właściwość CSS

Najedź kursorem na właściwość CSS, która wpływa na model pudełkowy 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 powoduje podświetlenie marginesów wszystkich węzłów, na które wpływa ta deklaracja.

Lighthouse w wersji 4 w panelu Audyty

Nowy test Elementy dotykowe nie mają odpowiedniej wielkości sprawdza, czy elementy interaktywne, takie jak przyciski i linki, są odpowiednio duże i rozmieszczone na urządzeniach mobilnych.

Kategoria raportu PWA korzysta teraz z systemu oceniania za pomocą plakietek.

Rysunek 3. Nowy system oceniania odznak w kategorii PWA

Przeglądarka wiadomości binarnych WebSocket

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

1. Otwórz panel Sieć. Więcej informacji o analizowaniu aktywności sieciowej znajdziesz w artykule 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 opcji Tylko WS wyświetlane są połączenia WebSocket.

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. Aby sprawdzić jeden z wpisów Binary Message (Wiadomość binarna), kliknij go.

   

   Rysunek 8. Sprawdzanie wiadomości binarnej

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

Rysunek 9. Wyświetlanie wiadomości binarnej w formacie Base64

Zrób zrzut ekranu obszaru w menu poleceń

Zrzuty obszaru umożliwiają przechwytywanie części widocznego obszaru. Ta funkcja jest dostępna od jakiegoś czasu, ale sposób uzyskiwania do niej dostępu był dość ukryty. Zrzuty ekranu obszaru są teraz dostępne w menu poleceń.

1. Skup się na Narzędziach dla programistów, a następnie naciśnij Ctrl+Shift+P lub Cmd+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 myszą po obszarze widoku, którego zrzut ekranu chcesz utworzyć.

   

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

Filtry instancji roboczej usługi w panelu Sieć

Wpisz is:service-worker-initiated lub is:service-worker-intercepted w polu tekstowym filtra w panelu Sieć, aby wyświetlić żądania, które zostały spowodowane (initiated) lub potencjalnie zmodyfikowane (intercepted) przez 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.

Zmiany w panelu wyników

Nagrania wydajności zawierają teraz oznaczenia długich zadań i pierwszego wyrenderowania.

W artykule Ogranicz pracę w głównym wątku znajdziesz przykład użycia panelu Wydajność do analizowania skuteczności ładowania strony.

Długie zadania w nagraniach wydajności

Nagrania wydajności pokazują teraz długie zadania.

Rysunek 14. Najeżdżanie kursorem na długie zadanie w zrzucie wydajności

Pierwsze wyrenderowanie w sekcji Czas

W sekcji Czas nagrania wydajności jest teraz oznaczony czas pierwszego wyrenderowania.

Rysunek 15. Pierwsze wyrenderowanie w sekcji Czas

Nowy samouczek DOM

Zapoznaj się z artykułem Rozpoczynanie wyświetlania i zmieniania modelu DOM, aby poznać praktyczne zastosowania funkcji związanych z modelem DOM.

Pobieranie kanałów podglądu

Rozważ używanie Chrome w wersji Canary, deweloperskiej lub beta jako domyślnej przeglądarki do programowania. Te kanały wersji testowych zapewniają dostęp do najnowszych funkcji Narzędzi deweloperskich, umożliwiają testowanie najnowocześniejszych interfejsów API platformy internetowej i pomagają znajdować problemy w witrynie, zanim zrobią to użytkownicy.

Kontakt z zespołem Narzędzi deweloperskich w Chrome

Skorzystaj z tych opcji, aby porozmawiać o nowych funkcjach, aktualizacjach lub innych kwestiach związanych z Narzędziami deweloperskimi.

• Prześlij nam opinię 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.
• Dodawaj komentarze do filmów na YouTube z serii „Co nowego w Narzędziach deweloperskich” lub filmów na YouTube z serii „Wskazówki dotyczące Narzędzi deweloperskich”.

Co nowego w Narzędziach deweloperskich

Lista wszystkich tematów omówionych w serii Nowości w Narzędziach deweloperskich.