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

Kayce Basques

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

• wizualizować dane o skuteczności w panelu Wydajność;
• Wyróżnij węzły tekstowe w widoku drzewa DOM.
• Skopiuj ścieżkę JS do węzła DOM z drzewa DOM.
• Aktualizacje panelu Audyty, w tym nowy audyt wykrywający biblioteki JS i nowe słowa kluczowe umożliwiające dostęp do panelu Audyty z menu poleceń.

Wersja wideo tych informacji o wersji

Wyświetlanie danych o skuteczności

Po zarejestrowaniu wczytywania strony Narzędzia deweloperskie oznaczają teraz w sekcji Czasy wskaźniki wydajności, takie jak DOMContentLoaded i Pierwsze wyrenderowanie elementu znaczącego.

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

Wyróżnianie węzłów tekstowych

Gdy najedziesz kursorem na węzeł tekstowy w drzewie DOM, Narzędzia deweloperskie wyróżnią go w obszarze wyświetlania.

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 (być może za pomocą funkcji page.click() Puppeteer) i chcesz szybko uzyskać odniesienie do tego węzła DOM. Zwykle w tym celu otwierasz panel Elementy, klikasz prawym przyciskiem myszy węzeł w drzewie DOM, wybierasz Kopiuj > Kopiuj selektor, a potem przekazujesz ten selektor CSS do funkcji document.querySelector(). Jeśli jednak węzeł znajduje się w Shadow DOM, to podejście nie działa, ponieważ selektor zwraca ścieżkę z drzewa cieni.

Aby szybko uzyskać odniesienie do węzła DOM, kliknij go prawym przyciskiem myszy i wybierz Kopiuj > Kopiuj ścieżkę JS. Narzędzia deweloperskie skopiują do schowka document.querySelector() wyrażenie wskazujące na węzeł. Jak wspomnieliśmy powyżej, jest to szczególnie przydatne podczas pracy z Shadow DOM, ale możesz używać tej funkcji w przypadku dowolnego węzła DOM.

Rysunek 3. Kopiuj ścieżkę JS

Narzędzia deweloperskie skopiują do schowka wyrażenie podobne do tego poniżej:

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

Aktualizacje panelu Audyty

Panel Audyty korzysta teraz z Lighthouse 3.2. Wersja 3.2 zawiera nową kontrolę o nazwie Wykryte biblioteki JavaScript. Ten audyt zawiera listę bibliotek JavaScript wykrytych przez Lighthouse na stronie. Znajdziesz ją w raporcie w sekcji Sprawdzone metody > Zakończone kontrole.

Rysunek 4. Wykryte biblioteki JavaScript

Panel Audyty jest teraz dostępny w menu poleceń. Aby go otworzyć, wpisz Lighthouse lub PWA.

Rysunek 5. Wpisanie lighthouse w menu poleceń

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.

Skontaktuj się 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.
• Zostawiaj komentarze pod filmami na YouTube z serii „Co nowego w Narzędziach deweloperskich” lub filmami 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.