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

Kayce Basques

Nowe funkcje i ważne zmiany w Narzędziach deweloperskich w Chrome 72:

• Wyświetlaj dane o skuteczności w panelu Skuteczność.
• Zaznacz węzły tekstowe w drzewie DOM.
• Skopiuj ścieżkę JS do węzła DOM z drzewa DOM.
• aktualizacje panelu kontroli, w tym nową kontrolę, która wykrywa biblioteki JS i nowe słowa kluczowe, aby uzyskać dostęp do panelu kontroli z menu poleceń.

Wersja wideo tych informacji o wersji

Wizualizacja danych o wydajności

Po nagraniu wczytywania strony w Narzędziach deweloperskich w sekcji Czasy są teraz oznaczane wskaźniki wydajności, takie jak DOMContentLoaded i Pierwsze wyrenderowanie elementu znaczącego.

Rysunek 1 Pierwsze wyrenderowanie elementu znaczącego w sekcji Czas reakcji

Wyróżnianie węzłów tekstowych

Gdy najedziesz kursorem na węzeł tekstowy w drzewie DOM, DevTools wyróżni ten węzeł w widoku.

Rysunek 2. Wyróżnianie węzła tekstowego

Kopiowanie ścieżki JS

Załóżmy, że piszesz test automatyzacji, który polega na kliknięciu węzła (za pomocą funkcji page.click() w Puppeterze) i chcesz szybko uzyskać odwołanie do tego węzła DOM. Zazwyczaj należy otworzyć panel Elementy, kliknąć prawym przyciskiem myszy węzeł w drzewie DOM, wybrać Kopiuj > Kopiuj selektor, a potem przekazać ten selektor CSS do document.querySelector(). Jeśli jednak węzeł znajduje się w pobocznym DOM, to podejście nie zadziała, ponieważ selektor zwraca ścieżkę z drzewa cieni.

Aby szybko uzyskać odwołanie do węzła DOM, kliknij go prawym przyciskiem myszy i wybierz Kopiuj > Kopiuj ścieżkę JS. Narzędzie DevTools skopiuje do schowka wyrażenie document.querySelector(), które wskazuje węzeł. Jak już wspomnieliśmy, jest to szczególnie przydatne podczas pracy z Shadow DOM, ale możesz też użyć tego w przypadku dowolnego węzła DOM.

Rysunek 3. Kopiowanie ścieżki JS

Narzędzia dla deweloperów kopiują do schowka wyrażenie podobne do tego:

document.querySelector('#demo1').shadowRoot.querySelector('p:nth-child(2)')

Aktualizacje panelu audytów

Panel audytów korzysta teraz z wersji Lighthouse 3.2. Wersja 3.2 zawiera nową kontrolę o nazwie Wykryte biblioteki JavaScript. Ten audyt zawiera listę bibliotek JS wykrytych przez Lighthouse na stronie. Ten audyt znajdziesz w raporcie w sekcji Sprawdzone metody > Przeszedł audyt.

Rysunek 4 Wykryte biblioteki JavaScript

Możesz też otworzyć panel kontroli z menu poleceń, wpisując Lighthouse lub PWA.

Rysunek 5. Wpisywanie lighthouse w menu poleceń

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.