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

Kayce Basques

Nowe funkcje i zmiany w narzędziach deweloperskich w Chrome 62:

• Obsługa operatorów await na najwyższym poziomie w Konsoli.
• zrzuty ekranu części widoku i zrzuty ekranu konkretnych węzłów HTML.
• Podświetlanie siatki CSS.
• Nowy interfejs API Konsoli do wysyłania zapytań o obiekty.
• Filtry negatywne i filtry adresów URL w Konsoli.
• Importowanie plików HAR w panelu Sieć.
• Zasoby pamięci podręcznej, które można wyświetlić w podglądzie.
• Bardziej przewidywalne debugowanie pamięci podręcznej.
• Pokrycie kodu na poziomie bloku.

Operatorzy na najwyższym poziomie w Search Console

Konsola obsługuje teraz operatory najwyższego poziomu await.

Rysunek 1 Korzystanie z operatorów await najwyższego poziomu w Konsoli

Nowe procesy związane ze zrzutami ekranu

Teraz możesz zrobić zrzut ekranu części widoku w oknie lub konkretnego węzła HTML.

Zrzuty ekranu przedstawiające fragment widoku

Aby zrobić zrzut części widoku:

1. Aby przejść do trybu sprawdzania elementu, kliknij Sprawdź lub naciśnij Command + Shift + C (Mac) lub Control + Shift + C (Windows, Linux).
2. Przytrzymaj klawisz Command (Mac) lub Control (Windows, Linux) i wybierz część widoku, której zrzut chcesz zrobić.
3. Zwolnij mysz. DevTools pobiera zrzut ekranu wybranego fragmentu.

Rysunek 2. Zrzut części widoku

Zrzuty ekranu konkretnych węzłów HTML

Aby zrobić zrzut ekranu konkretnego węzła HTML:

1. W panelu Elementy wybierz element.

   

   Rysunek 3. W tym przykładzie celem jest zrobienie zrzutu ekranu niebieskiego nagłówka zawierającego tekst Tools. Ten węzeł jest już wybrany w drzewie DOM w panelu Elementy.

2. Otwórz Menu poleceń.

3. Zacznij pisać node i wybierz Capture node screenshot. Narzędzia dla programistów pobierają zrzut ekranu wybranego węzła.

   

   Rysunek 4 Wynik polecenia Capture node screenshot

Podświetlanie siatki CSS

Aby wyświetlić siatkę CSS, która wpływa na element, najedź na niego kursorem w drzewie DOM w panelu Elementy. Wokół każdego elementu siatki pojawi się przerywane obramowanie. Działa to tylko wtedy, gdy wybrany element lub jego element nadrzędny ma zastosowany styl display:grid.

Rysunek 5. Podświetlanie siatki CSS

Obejrzyj poniższy film, aby poznać podstawy CSS Grid w mniej niż 2 minuty.

Nowy interfejs API do wysyłania zapytań do obiektów stosu

Aby wywołać funkcję queryObjects(Constructor) w Konsoli, użyj tablicy obiektów utworzonych za pomocą określonego konstruktora. Na przykład:

• queryObjects(Promise). Zwraca wszystkie obietnice.
• queryObjects(HTMLElement). Zwraca wszystkie elementy HTML.
• queryObjects(foo), gdzie foo to nazwa funkcji. Zwraca wszystkie obiekty, które zostały zainicjowane za pomocą funkcji new foo().

Zakres queryObjects() to wybrany w Konsoli bieżący kontekst wykonania. Zobacz Wybieranie kontekstu wykonania.

Filtry w nowej Konsoli

Konsola obsługuje teraz filtry wykluczające i filtry adresów URL.

Filtry negatyw

Wpisz -<text> w polu Filtr, aby odfiltrować wszystkie wiadomości z Konsoli, które zawierają <text>.

Rysunek 6. Pierwsze polecenie rejestruje wartości one, two, three i four w Konsoli. two jest ukryty, ponieważ w polu Filtr wpisano -two

Narzędzia deweloperskie odfiltrowują wiadomość, jeśli zostanie znaleziony <text>:

• W tekście wiadomości.
• W nazwie pliku, z którego pochodzi wiadomość.
• W tekście śledzenia błędów.

Filtr wykluczający działa też z wyrazami regularnymi, np. -/[4-5]*ms/.

Filtry adresów URL

Aby wyświetlać tylko wiadomości pochodzące ze skryptu, którego adres URL zawiera ciąg znaków <text>, wpisz url:<text> w polu Filtr.

Filtr używa dopasowania przybliżonego. Jeśli <text> pojawi się w dowolnym miejscu w adresie URL, Narzędzia deweloperskie wyświetlą wiadomość.

Rysunek 7. Używanie filtrowania adresów URL do wyświetlania tylko wiadomości pochodzących ze skryptów, których adres URL zawiera hymn. Gdy najedziesz kursorem na nazwę skryptu, zobaczysz, że zawiera ona tekst

Importowanie plików HAR w panelu Sieć

Aby zaimportować plik HAR, przeciągnij go i upuść w panelu Sieć.

Rysunek 8. Importowanie pliku HAR

Zasoby pamięci podręcznej, które można wyświetlić w panelu Aplikacja

Kliknij wiersz w tabeli Pamięć podręczna, aby wyświetlić podgląd tego zasobu pod tabelą.

Rysunek 9. Podgląd zasobu pamięci podręcznej

Więcej informacji o debugowaniu pamięci podręcznej w przypadku stron elastycznych

W Chrome 61 i starszych wersjach debugowanie pamięci podręcznej utworzonej za pomocą interfejsu Cache API jest… trudne. Na przykład, gdy strona utworzy nową pamięć podręczną, musisz ręcznie odświeżyć stronę lub narzędzia dla deweloperów, aby zobaczyć nową pamięć podręczną.

W Chrome 62 karta Pamięć podręczna pamięci podręcznej jest aktualizowana w czasie rzeczywistym za każdym razem, gdy utworzysz, zaktualizujesz lub usuniesz pamięć podręczną lub zasób. Przykład znajdziesz w filmie poniżej.

Aby wypróbować tę funkcję, obejrzyj prezentację pamięci podręcznej.

Pokrycie kodu na poziomie bloku

W Chrome 61 i starszych kartka Pokrycie oznacza cały kod w funkcji jako wykorzystany, o ile funkcja jest wywoływana.

Rysunek 10. Przykład karty Pokrycie w Chrome 61. Wiersz 4 jest oznaczony jako używany, mimo że nigdy się nie wykonuje

Od wersji Chrome 62 na karcie Pokrycie możesz sprawdzić, który kod w ramach funkcji jest wywoływany.

Rysunek 11. Przykład karty Pokrycie w Chrome 62. Wiersz 4 jest oznaczony jako nieużywany

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.