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

Kayce Basques

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

Czytaj dalej lub obejrzyj film z informacjami o aktualizacji.

Ignorowanie skryptu w panelu Sieć

Kolumna Inicjator w panelu Sieć informuje, dlaczego zasób został zażądany. Jeśli na przykład kod JavaScript powoduje pobranie obrazu, w kolumnie Initiator (Inicjator) zobaczysz wiersz kodu JavaScript, który spowodował to żądanie.

Wcześniej, jeśli Twoja platforma owijała żądania sieci w opakowaniu, kolumna Initiator nie była tak przydatna. Wszystkie żądania sieciowe wskazują na ten sam wiersz kodu owijającego.

W tym scenariuszu chcesz zobaczyć kod aplikacji, który powoduje wysłanie żądania. Teraz możesz:

  1. Najedź kursorem na kolumnę Inicjator. W wyskakującym okienku wyświetli się stos wywołań, który spowodował żądanie.
  2. Kliknij prawym przyciskiem myszy połączenie, które chcesz ukryć w wynikach wywołania.
  3. Wybierz Dodaj skrypt do listy ignorowanych fragmentów kodu. Kolumna Inicjator teraz ukrywa wszystkie wywołania skryptu, które zostały zignorowane.

Ignoruję plik „requests.js”.

Rysunek 1 Ignoruję requests.js

Ignorowane skrypty możesz zarządzać na karcie Lista ignorowanych w Ustawieniach.

Więcej informacji o ignorowaniu skryptów znajdziesz w artykule Ignorowanie skryptu lub wzorca skryptów.

Formatowanie na kartach Podgląd i Odpowiedź

Karta Podgląd w panelu Sieć wyświetla teraz domyślnie ładne wydruki zasobów, gdy wykryje, że zostały one zminiaturyzowane.

Na karcie Podgląd domyślnie wyświetlana jest ładniejsza wersja kodu analytics.js.

Rysunek 2. Karta Podgląd domyślnie ładnie formatuje zawartość pliku analytics.js.

Aby wyświetlić nieskompresowaną wersję zasobu, użyj karty Odpowiedź. Możesz też ręcznie ustawić czcionkę dla zasobów na karcie Odpowiedź, korzystając z nowego przycisku Format.

Ręczne upiększanie wydruku zawartości kodu analytics.js za pomocą przycisku Formatowanie.

Rysunek 3. Ręczne drukowanie ładnego wydruku zawartości pliku analytics.js za pomocą przycisku Format

Podgląd treści HTML na karcie Podgląd

Wcześniej karta Podgląd w panelu Sieć wyświetlała kod zasobu HTML w określonych sytuacjach, a w innych renderowała podgląd kodu HTML. Karta Podgląd zawsze wykonuje teraz podstawowe renderowanie kodu HTML. Nie jest to pełna przeglądarka, więc może nie wyświetlać kodu HTML zgodnie z oczekiwaniami. Jeśli chcesz zobaczyć kod HTML, kliknij kartę Odpowiedź lub kliknij prawym przyciskiem myszy zasób i wybierz Otwórz w panelu Źródła.

Podgląd kodu HTML na karcie Podgląd.

Rysunek 4 Podgląd kodu HTML na karcie Podgląd

Automatyczne dostosowywanie powiększenia w trybie urządzenia

W trybie urządzenia otwórz menu Powiększenie i wybierz Automatyczne dostosowywanie powiększenia, aby automatycznie zmieniać rozmiar widocznego obszaru po zmianie orientacji urządzenia.

Zastępcze elementy lokalne działają teraz z niektórymi stylami zdefiniowanymi w kodzie HTML

Gdy w Chrome 65 wprowadziliśmy zastępowania lokalne w Narzędziach deweloperskich, jedną z ograniczeń było to, że nie można było śledzić zmian w stylach zdefiniowanych w HTML. Na przykład na rysunku 7 widać regułę stylów w sekcji head dokumentu, która deklaruje font-weight: bold dla elementów h1.

Przykład stylów zdefiniowanych w kodzie HTML

Rysunek 5. Przykład stylów zdefiniowanych w kodzie HTML

W Chrome 65, jeśli w panelu Style w Narzędziach deweloperskich zmienisz deklarację font-weight, zastąpienia lokalne nie będą śledzić tej zmiany. Inaczej mówiąc, przy następnym załadowaniu styl wróci do wartości font-weight: bold. W Chrome 66 takie zmiany są jednak zachowywane po wczytaniu stron.

Wskazówka: ignoruj skrypty frameworku, aby punkty przerwania detektora zdarzeń były bardziej przydatne

Gdy tworzyłem film Pierwsze kroki w debugowaniu JavaScriptu, niektórzy widzowie zauważyli, że punkty przerwania związanych ze zdarzeniami nie są przydatne w przypadku aplikacji opartych na frameworkach, ponieważ są one często ujęte w ramy kodu frameworku. Na przykład na rysunku 8 umieściłem w Narzędziach deweloperskich punkt przerwania click. Gdy klikam przycisk w demo, Narzędzie deweloperów automatycznie zatrzymuje się na pierwszym wierszu kodu listenera. W tym przypadku zatrzymuje się w kodzie owijającym Vue.js na linii 1802, co nie jest zbyt pomocne.

Punkt przerwania kliknięcia powoduje wstrzymanie w kodzie owijającym Vue.js.

Rysunek 6. Punkt przerwania click jest wstrzymywany w kodzie owijającym Vue.js

Ponieważ skrypt Vue.js znajduje się w osobnym pliku, mogę go zignorować w panelu zbiór wywołań, aby punkt przerwania click był bardziej przydatny.

Ignorowanie skryptu Vue.js w panelu wywołań.

Rysunek 7. Pomijanie skryptu Vue.js w panelu zbiór wywołań

Gdy następnym razem kliknę przycisk i uruchomię punkt przerwania click, kod Vue.js zostanie wykonany bez wstrzymywania, a potem wstrzymany na pierwszym wierszu kodu w słuchaczu aplikacji, czyli w miejscu, w którym zawsze chciałem, aby było wstrzymanie.

Punkt przerwania kliknięcia teraz wstrzymuje się na kodzie detektora aplikacji.

Rysunek 8. Punkt przerwania click jest teraz wstrzymywany w kodzie detektora aplikacji

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.

Co nowego w Narzędziach deweloperskich

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