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

Kayce Basques
Kayce Basques
X GitHub

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

Przeczytaj poniższe informacje o wersji lub obejrzyj film z informacjami o wersji.

Ignorowanie skryptu w panelu Sieć

Kolumna Inicjator w panelu Sieć informuje, dlaczego zażądano zasobu. Jeśli na przykład JavaScript powoduje pobranie obrazu, w kolumnie Initiator zobaczysz wiersz kodu JavaScript, który spowodował wysłanie żądania.

Wcześniej, jeśli Twój framework opakowywał żądania sieciowe, kolumna Inicjator nie była zbyt przydatna. Wszystkie żądania sieciowe były kierowane do tej samej linii kodu opakowującego.

W tej sytuacji chcesz zobaczyć kod aplikacji, który powoduje wysłanie żądania. Teraz jest to możliwe:

  1. Najedź kursorem na kolumnę Inicjator. W wyskakującym okienku pojawi się stos wywołań, który spowodował wysłanie żądania.
  2. Kliknij prawym przyciskiem myszy połączenie, które chcesz ukryć w wynikach inicjatora.
  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ę „requests.js”.

Rysunek 1. Ignorowanie: requests.js

Listą ignorowanych skryptów możesz zarządzać na karcie Lista ignorowanych fragmentów kodu w Ustawieniach.

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

Formatowanie w zakładkach Podgląd i Odpowiedź

Karta Podgląd w panelu Sieć domyślnie wyświetla teraz zasoby w czytelnej formie, gdy wykryje, że zostały one zminimalizowane.

Na karcie Podgląd domyślnie wyświetlana jest sformatowana zawartość pliku analytics.js.

Rysunek 2. Karta Podgląd domyślnie wyświetla zawartość analytics.js w czytelnej formie.

Aby wyświetlić nieskompresowaną wersję zasobu, użyj karty Odpowiedź. Możesz też ręcznie sformatować zasoby na karcie Odpowiedź, klikając nowy przycisk Formatuj.

Ręczne formatowanie zawartości pliku analytics.js za pomocą przycisku Format.

Rysunek 3. Ręczne formatowanie zawartości analytics.js za pomocą przycisku Formatuj

Wyświetlanie podglądu treści HTML na karcie Podgląd

Wcześniej karta Podgląd w panelu Sieć w określonych sytuacjach wyświetlała kod zasobu HTML, a w innych – podgląd HTML. Karta Podgląd zawsze renderuje HTML w podstawowy sposób. Nie jest to pełna przeglądarka, więc może nie wyświetlać kodu HTML dokładnie tak, jak oczekujesz. 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.

Lokalne zastąpienia działają teraz z niektórymi stylami zdefiniowanymi w HTML

Gdy w Chrome 65 wprowadziliśmy lokalne zastępowanie w Narzędziach deweloperskich, jednym z ograniczeń było to, że nie można było śledzić zmian w stylach zdefiniowanych w HTML. Na przykład na rysunku 7 w head dokumentu znajduje się reguła stylu, 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 zmienisz deklarację font-weight w panelu Styl Narzędzi deweloperskich, Lokalne zastąpienia nie będą śledzić tej zmiany. Innymi słowy, przy następnym ponownym załadowaniu styl zostanie przywrócony do font-weight: bold. W Chrome 66 zmiany tego typu są jednak zachowywane po wczytaniu strony.

Dodatkowa wskazówka: ignoruj skrypty frameworka, aby punkty przerwań detektora zdarzeń były bardziej przydatne

Gdy tworzyłem film Rozpoczęcie debugowania JavaScriptu, niektórzy widzowie komentowali, że punkty przerwania w przypadku detektorów zdarzeń nie są przydatne w aplikacjach opartych na platformach, ponieważ detektory zdarzeń są często opakowane w kod platformy. Na przykład na rysunku 8 w Narzędziach deweloperskich ustawiłem clickpunkt przerwania. Gdy kliknę przycisk w wersji demonstracyjnej, Narzędzia deweloperskie automatycznie wstrzymają działanie w pierwszej linii kodu odbiornika. W tym przypadku zatrzymuje się w kodzie opakowującym Vue.js w wierszu 1802, co nie jest zbyt pomocne.

Punkt przerwania kliknięcia wstrzymuje działanie w kodzie otoki Vue.js.

Rysunek 6. Punkt przerwania click wstrzymuje działanie kodu opakowującego w Vue.js

Skrypt Vue.js znajduje się w osobnym pliku, więc mogę go zignorować w panelu Stos wywołań, aby ten click punkt przerwania był bardziej przydatny.

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

Rysunek 7. Ignorowanie skryptu Vue.js w panelu Stos wywołań

Gdy następnym razem kliknę przycisk i wywołam punkt przerwania click, kod Vue.js zostanie wykonany bez wstrzymywania, a następnie wstrzymany w pierwszym wierszu kodu w funkcji nasłuchującej mojej aplikacji, czyli tam, gdzie od początku chciałem wstrzymać działanie.

Punkt przerwania kliknięcia wstrzymuje teraz działanie kodu detektora aplikacji.

Rysunek 8. Punkt przerwania click wstrzymuje teraz działanie kodu detektora aplikacji.

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.

Kontakt 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.

Co nowego w Narzędziach deweloperskich

Lista wszystkich tematów omówionych w serii Nowości w Narzędziach deweloperskich.