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

Kayce Basques

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

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.

Pierwsze wyrenderowanie elementu znaczącego w sekcji Czas reakcji

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.

Wyróżnianie węzła tekstowego

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.

Kopiowanie ścieżki JS

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.

Wykryte biblioteki JavaScript

Rysunek 4 Wykryte biblioteki JavaScript

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

Wpisanie „lighthouse” w menu poleceń

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.

Co nowego w Narzędziach deweloperskich

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