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

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

• Obsługa operatorów await najwyższego poziomu w konsoli.
• Zrzuty ekranu przedstawiające część widocznego obszaru oraz zrzuty ekranu konkretnych węzłów HTML.
• Wyróżnianie siatki CSS
• Nowy interfejs API Console do wysyłania zapytań dotyczących obiektów.
• Filtry wykluczających i filtrów adresów URL w konsoli.
• Importy plików HAR w panelu Sieć.
• Zasoby pamięci podręcznej dostępne do podglądu.
• Bardziej przewidywalne debugowanie pamięci podręcznej.
• Zasięg kodu na poziomie blokady.

.

Operatory oczekiwania najwyższego poziomu w konsoli

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

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

Nowe procedury tworzenia zrzutów ekranu

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

zrzuty ekranu z części widocznego obszaru,

Aby zrobić zrzut ekranu z części widocznego obszaru:

1. Kliknij Zbadaj lub naciśnij Command + Shift + C (Mac) lub Aby włączyć tryb inspekcji elementu, naciśnij Control + Shift + C (Windows, Linux).
2. Przytrzymaj Command (Mac) lub Control (Windows, Linux) i wybierz część widoczny obszar, którego zrzut chcesz zrobić.
3. Zwolnij przycisk myszy. Narzędzia deweloperskie pobierają zrzut ekranu wybranego fragmentu.

Rysunek 2. Zrzut ekranu z części widocznego obszaru.

zrzuty ekranu konkretnych 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, który zawiera tekst Tools. Zwróć uwagę, że ten węzeł jest już wybrany w drzewie DOM Panel Elementy

2. Otwórz menu poleceń.

3. Zacznij pisać node i wybierz Capture node screenshot. Narzędzia deweloperskie pobiera zrzut ekranu wybranego węzła.

   

   Rysunek 4. Wynik polecenia Capture node screenshot

Wyróżnianie siatki CSS

Aby wyświetlić siatkę CSS, która ma wpływ na element, najedź kursorem na element w drzewie DOM interfejsu Panel Elementy. Wokół każdego elementu siatki pojawi się przerywane obramowanie. Ta funkcja działa tylko wtedy, gdy wybrany element lub element nadrzędny wybranego elementu ma zastosowanie do tego elementu: display:grid.

Rysunek 5. Wyróżnianie siatki CSS

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

Nowy interfejs API do wysyłania zapytań dotyczących obiektów sterty

Wywołaj queryObjects(Constructor) z Konsoli, aby zwrócić tablicę obiektów, które zostały utworzony za pomocą podanego 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 utworzone przez: new foo().

Zakres queryObjects() to aktualnie wybrany kontekst wykonania w Konsoli. Zobacz Wybieranie kontekstu wykonania.

Nowe filtry konsoli

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

Filtry wykluczające

Wpisz -<text> w polu Filtr, aby odfiltrować wszystkie wiadomości Console zawierające <text>.

Rysunek 6. Pierwsza instrukcja loguje one, two, three i four w konsoli. two jest ukryta, ponieważ w polu Filtr podano -two

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

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

Filtr negatywny działa również w przypadku wyrażeń regularnych, takich jak -/[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 <text> pojawi się w dowolnym miejscu w adresie URL, w Narzędziach deweloperskich wyświetli się .

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

Importy 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 dostępne do podglądu w panelu aplikacji

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

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

Bardziej przydatne debugowanie elastycznej pamięci podręcznej

W Chrome 61 i starszych wersjach debugowanie pamięci podręcznych utworzonych za pomocą interfejsu Cache API jest bardzo trudne. Dla: 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 utworzysz, zaktualizujesz lub mogą usunąć pamięć podręczną lub zasób. Obejrzyj przykładowy film poniżej.

Zobacz prezentację pamięci podręcznej, aby ją wypróbować.

Zasięg kodu na poziomie blokady

W Chrome 61 i starszych wersjach karta Stan oznacza cały kod w funkcji jako używany, więc dopóki ta funkcja jest wywoływana.

Rysunek 10. Przykład karty Stan w Chrome 61. Wiersz 4 jest oznaczony jako używany, choć nigdy nie jest wykonywana

Począwszy od Chrome 62 na karcie Stan możesz sprawdzić, jaki kod w ramach funkcji jest wywoływany.

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

Pobierz kanały 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 testowej dają dostęp do najnowszych funkcji Narzędzi deweloperskich, umożliwiają testowanie najnowocześniejszych interfejsów API platformy internetowej i wykrywanie problemów w witrynie, zanim użytkownicy ją zobaczą.

Kontakt z zespołem ds. Narzędzi deweloperskich w Chrome

Skorzystaj z poniższych opcji, aby porozmawiać o nowych funkcjach i zmianach w poście lub o innych kwestiach związanych z Narzędziami deweloperskimi.

• Prześlij nam sugestię lub opinię na crbug.com.
• Aby zgłosić problem z Narzędziami deweloperskimi, kliknij Więcej opcji   > Pomoc > Zgłoś problemy z Narzędziami deweloperskimi w Narzędziach deweloperskich.
• Opublikuj tweeta na stronie @ChromeDevTools.
• Napisz komentarz w filmach w YouTube o nowościach w Narzędziach deweloperskich lub o filmach w YouTube ze wskazówkami dotyczącymi Narzędzi deweloperskich.

Co nowego w Narzędziach deweloperskich

Lista wszystkich tematów, które zostały omówione w serii Co nowego w Narzędziach deweloperskich.