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 zbyt przydatna. Wszystkie żądania sieci wskazywały 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łującego.
  3. Wybierz Dodaj skrypt do listy ignorowanych fragmentów kodu. Kolumna Inicjator ukrywa teraz wszystkie wywołania ze skryptu, które zostały przez Ciebie zignorowane.

Ignoruję plik „requests.js”.

Rysunek 1 Omijam: requests.js

Ignorowanymi skryptami możesz zarządzać na karcie Lista ignorowanych w sekcji Ustawienia.

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.

Karta Podgląd domyślnie ładuje ładnie wydrukowaną zawartość pliku 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 drukowanie ulepszonego wyświetlania 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.

Wyświetlanie podglądu kodu HTML na karcie Podgląd.

Rysunek 4 Wyświetlanie podglądu 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ępowania lokalne działają teraz z niektórymi stylami zdefiniowanymi w kodzie HTML

Gdy w Chrome 65 wprowadziliśmy zastępowanie lokalne w Narzędziach deweloperskich, było ono ograniczone tym, że nie mogło śledzić zmian stylów 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.

Jeśli masz skrypt, który dynamicznie dodaje style do dokumentu HTML, zastąpienia lokalne nadal nie będą mogły wykryć tych zmian.

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

Gdy tworzyłem film Poznaj debugowanie JavaScriptu, niektórzy widzowie komentowali, że punkty przerwania związanych ze zdarzeniami nie są przydatne w przypadku aplikacji opartych na frameworkach, ponieważ te punkty są często ujęte w ramach 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 ten punkt przerwania click był bardziej przydatny.

Ignorowanie skryptu Vue.js w panelu wywołania.

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 następnie 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ędziech deweloperskich.