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

Kayce Basques

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

• Wizualizacja danych 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ń.

Film z informacjami o wersji

Wizualizacja danych o wydajności

Po nagraniu wczytania 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

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

Kopiuj ścieżkę JS

Załóżmy, że piszesz test automatyzacji, który polega na kliknięciu węzła (np. 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(). Jednak jeśli węzeł jest w modelu DOM, ta metoda nie działa, ponieważ selektor generuje ś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 deweloperskie kopiuje do schowka wyrażenie podobne do przedstawionego poniżej:

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

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

Rysunek 5. Wpisuję lighthouse w menu poleceń

Pobieranie kanałów 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 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 ds. 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.
• Aby zgłosić problem z Narzędziami deweloperskimi, kliknij more_vert Więcej opcji > Pomoc > Zgłoś problem z Narzędziami deweloperskimi w Narzędziach deweloperskich.
• Wyślij tweeta do @ChromeDevTools.
• Napisz komentarz pod filmem Co nowego w Narzędziach deweloperskich w Narzędziach deweloperskich w YouTube lub filmach ze wskazówkami dotyczącymi Narzędzi deweloperskich w YouTube.

Co nowego w Narzędziach deweloperskich

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