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

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

.

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.

Ignorowanie pliku „requests.js”.

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.

Domyślnie na karcie Podgląd ładnie wyświetla się zawartość pliku analytics.js.

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.

Ręczne wyświetlanie ładnej zawartości pliku analytics.js za pomocą przycisku Formatuj.

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.

Podgląd HTML na karcie Podgląd.

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.

Przykład stylów zdefiniowanych w kodzie HTML

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

Punkt przerwania kliknięcia jest zatrzymywany w Vue.js otoce.

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.

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

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.

Punkt przerwania kliknięcia jest teraz wstrzymywany w kodzie detektora aplikacji.

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   Więcej > 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.