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:

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. Jeśli na przykład JavaScript powoduje pobranie obrazu, w kolumnie Inicjator jest wyświetlany wiersz kodu JavaScript, który spowodował żądanie.

Wcześniej, gdy Twoja platforma opakowała żądania sieciowe w opakowaniu, kolumna Inicjator nie byłaby przydatna. 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. 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. W kolumnie Inicjator ukryte są teraz wszystkie wywołania skryptu, który został przez Ciebie zignorowany.

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ą szablonu, gdy tylko wykryje, że zostały zmniejszone.

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 wydrukować zasoby z karty Odpowiedź za pomocą nowego przycisku Formatuj.

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 na karcie Podgląd w panelu Sieć wyświetlany był kod zasobu HTML w określonych sytuacjach, a w innych – podgląd kodu HTML. Karta Podgląd zawsze renderuje teraz podstawowy kod HTML. Nie jest to przeglądarka z pełną funkcjonalnością, więc kod HTML może się nie wyświetlać w oczekiwany sposób. Jeśli chcesz zobaczyć kod HTML, kliknij kartę Odpowiedź albo 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 dostosowywanie powiększenia, aby 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 brak możliwości śledzenia zmian w stylach zdefiniowanych w kodzie HTML. Na przykład na Rys. 7 w dokumencie head jest 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

Jeśli w Chrome 65 zmienisz deklarację font-weight w panelu Styl w Narzędziach deweloperskich, zastąpienia lokalne nie będą śledzić tej zmiany. Inaczej mówiąc, przy następnym ponownym załadowaniu styl zostanie z powrotem zmieniony na 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ń

Kiedy tworzyłem film Get Started With Debugging JavaScript (Pierwsze kroki z debugowaniem JavaScript), niektórzy widzowie stwierdzili, że punkty przerwania detektora zdarzeń nie są przydatne w przypadku aplikacji opartych na platformach, ponieważ detektory zdarzeń są często umieszczone w kodzie platformy. Na przykład na Rys. 8 ustawiłem punkt przerwania click w Narzędziach deweloperskich. Gdy kliknę przycisk w wersji demonstracyjnej, Narzędzia deweloperskie automatycznie zatrzymują się w pierwszym wierszu kodu detektora. W tym przypadku zostaje ono wstrzymane w kodzie otoki Vue.js w wierszu 1802, co nie jest przydatne.

Punkt przerwania kliknięcia jest zatrzymywany w kodzie otoki Vue.js.

Rysunek 6. Punkt przerwania click zostaje wstrzymany w kodzie otoki Vue.js

Skrypt Vue.js znajduje się w osobnym pliku, więc mogę go zignorować w panelu Stos wywołań, aby zwiększyć przydatność 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, uruchomi on kod Vue.js bez wstrzymywania go, a potem zatrzymuje się na pierwszym wierszu kodu w detektorze aplikacji, czyli tam, gdzie naprawdę chciałem się zatrzymać.

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.
  • Opublikuj tweeta na stronie @ChromeDevTools.
  • Napisz komentarz pod filmem dotyczącym nowości w Narzędziach deweloperskich w Narzędziach deweloperskich w YouTube lub 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.

Chrome 127

Chrome 126

Chrome 125

Chrome 124

Chrome 123

Chrome 122

Chrome 121

Chrome 120

Chrome 119

Chrome 118

Chrome 117

Chrome 116

Chrome 115

Chrome 114

Chrome 113

Chrome 112

Chrome 111

Chrome 110

Chrome 109

Chrome 108

Chrome 107

Chrome 106

Chrome 105

Chrome 104

Chrome 103

Chrome 102

Chrome 101

Chrome 100

Chrome 99

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Chrome 93

Chrome 92

Chrome 91

Chrome 90

Chrome 89

Chrome 88

Chrome 87

Chrome 86

Chrome 85

Chrome 84

Chrome 83

Chrome 82

Chrome 82 został anulowany.

Chrome 81

Chrome 80

Chrome 79

Chrome 78

Chrome 77

Chrome 76

Chrome 75

Chrome 74

Chrome 73

Chrome 72

Chrome 71

Chrome 70

Chrome 68

Chrome 67

Chrome 66

Chrome 65

Chrome 64

Chrome 63

Chrome 62

Chrome 61

Chrome 60

Chrome 59