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

Kayce Basques

W Narzędziach deweloperskich w Chrome 72 wprowadzamy nowe funkcje i duże zmiany:

• Wizualizacja danych o skuteczności w panelu Skuteczność.
• Podświetl węzły tekstowe w drzewie DOM.
• Skopiuj ścieżkę JS do węzła DOM z drzewa DOM.
• Aktualizacje panelu audytów, w tym nowy audyt, który wykrywa biblioteki JS i nowe słowa kluczowe w przypadku na panel Audyty z menu poleceń.

Wersja wideo tych informacji o wersji

Wizualizacja danych o skuteczności

Po zarejestrowaniu wczytania strony Narzędzia deweloperskie oznaczają teraz dane o wydajności, takie jak DOMContentLoaded czy Pierwsze wyrenderowanie elementu znaczącego w sekcji Czasy.

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

Zaznacz węzły tekstowe

Gdy najedziesz kursorem na węzeł tekstowy w drzewie DOM, Narzędzia deweloperskie podświetlą teraz ten węzeł tekstowy w widoczny obszar.

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

Kopiuj ścieżkę JS

Załóżmy, że piszesz test automatyzacji, który obejmuje kliknięcie węzła (przy użyciu metody Puppeteer page.click()) i chcesz szybko uzyskać odniesienie do tego węzła DOM. Typowy przepływ pracy to przejście do panelu Elementy, kliknięcie prawym przyciskiem myszy węzła w drzewie DOM, wybranie Kopiuj > Skopiuj selektor arkusza CSS, a następnie przekaż ten selektor arkusza CSS do usługi document.querySelector(). Ale jeśli węzeł jest w modelu Shadow DOM. Ta metoda nie działa, ponieważ selektor zwraca ścieżkę z wewnątrz drzewa cienia.

Aby szybko uzyskać odniesienie do węzła DOM, kliknij go prawym przyciskiem myszy i wybierz Kopiuj > Kopiuj JS ścieżki. Narzędzia deweloperskie kopiuje do schowka wyrażenie document.querySelector() wskazujące do węzła. Jak wspomnieliśmy wcześniej, jest to szczególnie przydatne przy pracy z modelem Shadow DOM, ale możesz też użyć go dla dowolnego węzła DOM.

Rysunek 3. Kopiuj ścieżkę JS

Narzędzia deweloperskie kopiuje do schowka wyrażenie podobne do przedstawionego poniżej:

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

Aktualizacje panelu kontrolnego

W panelu Audyty działa teraz Lighthouse 3.2. Wersja 3.2 zawiera nowy audyt o nazwie Wykryte biblioteki JavaScript. Ten audyt zawiera informacje o tym, co biblioteki JS wykryło w witrynie Lighthouse stronę. Znajdziesz tę kontrolę w swoim raporcie w sekcji Sprawdzone metody > Zaliczone audyty.

Rysunek 4. Wykryte biblioteki JavaScript

Panel Kontrole możesz też otworzyć z menu poleceń, wpisując Lighthouse lub PWA.

Rysunek 5. Wpisuję lighthouse w menu poleceń

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.