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

Kayce Basques

Nowe funkcje i duże zmiany w Narzędziach deweloperskich w Chrome 66 to między innymi:

• Ignoruj skrypt w panelu Sieć
• Automatyczne dostosowywanie powiększenia w trybie urządzenia
• Precyzja w dostosowaniu na kartach Podgląd i Odpowiedź
• Podgląd treści HTML na karcie Podgląd
• Lokalne zastąpienia stylami w kodzie HTML

Przeczytaj poniższe informacje lub obejrzyj film.

Ignoruj skrypt w panelu Sieć

Z kolumny Inicjator w panelu Sieć możesz sprawdzić, dlaczego wysłano żądanie dotyczące zasobu. Dla: Jeśli na przykład JavaScript powoduje pobranie obrazu, w kolumnie Initiator znajdziesz wiersz Kod JavaScript, który spowodował żądanie.

Wcześniej, jeśli platforma opakowała żądania sieciowe w otoczce, kolumna Inicjator nie byłoby przydatne. Wszystkie żądania sieciowe kierowały do tego samego wiersza kodu otoki.

W tym scenariuszu bardzo zależy Ci na tym, żeby zobaczyć kod aplikacji, który powoduje żądanie. To jest teraz jest to możliwe:

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

Rysunek 1. Ignorowanie: requests.js

Ignorowanymi skryptami 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.

Ładne drukowanie na kartach Podgląd i Odpowiedź

Na karcie Podgląd w panelu Sieć domyślnie zasoby są drukowane za pomocą formatowania, gdy wykryje że te zasoby zostały zminimalizowane.

Rysunek 2. Domyślnie na karcie Podgląd ładowana jest zawartość elementu analytics.js

Aby wyświetlić niezminifikowaną wersję zasobu, użyj karty Odpowiedź. Możesz też ręcznie zasobów związanych z drukiem stylistycznym na karcie Odpowiedź za pomocą nowego przycisku Format.

Rysunek 3. Ręczne drukowanie treści w formacie analytics.js za pomocą przycisku Formatuj

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

Wcześniej kod zasobu HTML na karcie Podgląd w panelu Sieć był wyświetlany w określonych sytuacjach, a w innych – podgląd kodu HTML. Karta Podgląd zawsze jest wyświetlana gdy wykonuje podstawowe renderowanie kodu HTML. Nie jest to przeglądarka z pełną funkcjonalnością, więc może nie wyświetlać HTML dokładnie tak, jak chcesz. Jeśli chcesz zobaczyć kod HTML, kliknij kartę Odpowiedź lub kliknij zasób prawym przyciskiem myszy i wybierz Otwórz w panelu Źródła.

Rysunek 4. Podgląd 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 dostosowanie powiększenia. automatycznie zmienia rozmiar widocznego obszaru po każdej zmianie orientacji urządzenia.

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

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

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

Jeśli w Chrome 65 deklaracja font-weight została zmieniona w panelu Styl w Narzędziach deweloperskich, lokalnie Zastąpienia nie śledzą zmiany. Inaczej mówiąc, przy następnym wczytaniu styl styl zostanie przywrócony powrót do domeny font-weight: bold. Jednak w Chrome 66 takie zmiany są zapamiętywane po wczytaniu stron.

Wskazówka dodatkowa: zignoruj skrypty platformy, aby zwiększyć przydatność punktów przerwania detektora zdarzeń

Niektórzy widzowie komentowali mój film Get Started With Debugging JavaScript (Pierwsze kroki z debugowaniem JavaScript). że punkty przerwania detektora zdarzeń nie są przydatne w przypadku aplikacji opartych na platformach, ponieważ detektory są często zawarte w kodzie platformy. Na przykład na Rys. 8 skonfigurowałem click. w Narzędziach deweloperskich. Gdy kliknę przycisk w wersji demonstracyjnej, Narzędzia deweloperskie automatycznie zatrzymują się pierwszego wiersza kodu detektora. W tym przypadku zostaje ono wstrzymane w kodzie otoki Vue.js w wierszu 1802, który nie jest aż tak przydatna.

Rysunek 6. Punkt przerwania click zostaje wstrzymany w pliku Vue.js kod otokowy

Skrypt Vue.js znajduje się w osobnym pliku, więc mogę go zignorować z stosu wywołań. aby zwiększyć użyteczność tego punktu przerwania click.

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

Gdy następnym razem kliknę przycisk i aktywuję punkt przerwania click, spowoduje to wykonanie kodu Vue.js bez zatrzymywania, a potem zatrzymuje się w pierwszym wierszu kodu w detektorze aplikacji, w którym naprawdę chciałam zatrzymać się na każdym etapie.

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

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.