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

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

• Obsługa operatorów najwyższego poziomu await w Konsoli.
• zrzuty ekranu części obszaru wyświetlania i zrzuty ekranu konkretnych węzłów HTML.
• Wyróżnianie siatki CSS
• Nowy interfejs API Console 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ć.
• Bardziej przewidywalne debugowanie pamięci podręcznej
• Pokrycie kodu na poziomie bloku.

Operatory await najwyższego poziomu w konsoli

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

Rysunek 1. Używanie operatorów najwyższego poziomu await w konsoli

Nowe przepływy pracy związane ze zrzutami ekranu

Możesz teraz zrobić zrzut ekranu części obszaru widoku lub konkretnego węzła HTML.

zrzuty ekranu części obszaru wyświetlania.

Aby zrobić zrzut ekranu części obszaru widoku:

1. Kliknij Zbadaj lub naciśnij Command+Shift+C (Mac) lub Control+Shift+C (Windows, Linux), aby przejść do trybu zbadania elementu.
2. Przytrzymaj klawisz Command (Mac) lub Control (Windows, Linux) i zaznacz część obszaru wyświetlania, której zrzut chcesz zrobić.
3. Zwolnij mysz. Narzędzia deweloperskie pobiorą zrzut ekranu wybranego fragmentu.

Rysunek 2. Tworzenie zrzutu ekranu części obszaru wyświetlania

zrzuty ekranu z określonych węzłów HTML,

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

1. Wybierz element w panelu Elementy.

   

   Rysunek 3. W tym przykładzie celem jest zrobienie zrzutu ekranu niebieskiego nagłówka zawierającego tekst Tools. Pamiętaj, że 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 deweloperskie pobierają zrzut ekranu wybranego węzła.

   

   Rysunek 4. Wynik polecenia Capture node screenshot

Wyróżnianie siatki CSS

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

Rysunek 5. Wyróżnianie siatki CSS

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

Nowy interfejs API do wysyłania zapytań o obiekty sterty

Wywołaj funkcję queryObjects(Constructor) z konsoli, aby zwrócić tablicę 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 utworzone za pomocą funkcji new foo().

Zakres queryObjects() to aktualnie wybrany kontekst wykonania w Konsoli. Więcej informacji znajdziesz w artykule Wybieranie kontekstu wykonywania.

Nowe filtry w Konsoli

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

Filtry negatywne

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

Rysunek 6. Pierwsza instrukcja rejestruje w konsoli wartości one, two, three i four. two jest ukryty, ponieważ w polu Filtr wpisano -two

Narzędzia deweloperskie odfiltrowują wiadomość, jeśli znajdą w niej <text>:

• W treści wiadomości.
• W nazwie pliku, z którego pochodzi wiadomość.
• w tekście śladu stosu,

Filtr negatywny działa też z wyrażeniami regularnymi, np. -/[4-5]*ms/.

Filtry adresów URL

Wpisz url:<text> w polu Filtr, aby wyświetlić tylko wiadomości pochodzące ze skryptu, którego adres URL zawiera <text>.

Filtr korzysta z dopasowania przybliżonego. Jeśli w adresie URL pojawi się <text>, Narzędzia deweloperskie wyświetlą komunikat.

Rysunek 7. Filtrowanie adresów URL w celu wyświetlania tylko wiadomości pochodzących ze skryptów, których adres URL zawiera hymn. Gdy najedziesz kursorem na nazwę skryptu, zobaczysz, że nazwa hosta zawiera ten 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 z możliwością podglądu w panelu Aplikacja

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

Rysunek 9. Wyświetlanie podglądu zasobu z pamięci podręcznej

Szybsze debugowanie pamięci podręcznej

W Chrome 61 i starszych wersjach debugowanie pamięci podręcznych utworzonych za pomocą interfejsu Cache API jest… trudne. Na przykład gdy strona tworzy nową pamięć podręczną, musisz ręcznie odświeżyć stronę lub Narzędzia deweloperskie, aby zobaczyć nową pamięć podręczną.

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

Aby wypróbować tę funkcję, zapoznaj się z wersją demonstracyjną pamięci podręcznej.

Pokrycie kodu na poziomie bloku

W Chrome 61 i starszych wersjach karta Pokrycie oznacza cały kod w funkcji jako używany, o ile funkcja jest wywoływana.

Rysunek 10. Przykład karty Coverage w Chrome 61. Wiersz 4 jest oznaczony jako używany, mimo że nigdy nie jest wykonywany.

Od Chrome 62 karta Coverage informuje, który kod w funkcji jest wywoływany.

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

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.