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

Nowe funkcje i ważne zmiany wprowadzane w Narzędziach deweloperskich w Chrome 66 to między innymi:

Przeczytaj poniższe informacje o wersji lub obejrzyj ich wersję wideo.

Ignoruj skrypt w panelu Sieć

Z kolumny Inicjator w panelu Sieć dowiesz się, dlaczego zażądano zasobu. Jeśli np. JavaScript powoduje pobieranie obrazu, w kolumnie Inicjator zobaczysz wiersz kodu JavaScript, który spowodował żądanie.

Wcześniej kolumna Inicjator nie była przydatna, gdy platforma pakowała żądania sieciowe w otokę. Wszystkie żądania sieciowe wskazywały ten sam wiersz kodu kodu.

W tym scenariuszu naprawdę zależy Ci na tym, by zobaczyć kod aplikacji, który powoduje żądanie. Teraz jest to możliwe:

  1. Najedź kursorem na kolumnę Inicjator. Stos wywołań, który spowodował żądanie, wyświetla się w wyskakującym okienku.
  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 zignorowanego skryptu.

Ignorowanie elementu „requests.js”.

Rysunek 1. Ignoruję użytkownika requests.js

Zignorowanymi skryptami możesz zarządzać na karcie Lista ignorowanych w Ustawieniach.

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

Zastosuj formatowanie stylistyczne na kartach Podgląd i Odpowiedź

Teraz na karcie Podgląd w panelu Sieć domyślnie wyświetlane są zasoby po wykryciu, że zostały zminimalizowane.

Karta Podgląd domyślnie zawiera treść pliku analytics.js.

Rysunek 2. Karta Podgląd domyślnie drukująca zawartość kreacji analytics.js

Aby wyświetlić nieminimalizowaną wersję zasobu, użyj karty Odpowiedź. Możesz też ręcznie wydrukować zasoby z karty Odpowiedź za pomocą nowego przycisku Format.

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

Rysunek 3. Ręczne drukowanie zawartości elementu 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ć wyświetlała kod zasobu HTML w określonych sytuacjach, a podgląd kodu HTML był renderowany w innych sytuacjach. Teraz na karcie Podgląd zawsze jest renderowany podstawowy kod HTML. Nie jest to przeglądarka z pełną funkcjonalnością, dlatego kod HTML może nie wyświetlać się w oczekiwany sposób. 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 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 zmienić 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 w Chrome 65 wprowadziliśmy zastąpienia lokalne, jednym z ograniczeń było to, że nie można było śledzić zmian stylów zdefiniowanych w kodzie HTML. Na przykład na Rys. 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

Jeśli w Chrome 65 zmienisz deklarację font-weight w panelu Styl w Narzędziach deweloperskich, funkcja Lokalne zastąpienia nie będzie śledzić tej zmiany. Oznacza to, że przy następnym ponownym ładowaniu zostanie przywrócony styl font-weight: bold. Jednak w Chrome 66 takie zmiany są teraz widoczne podczas wczytywania stron.

Dodatkowa wskazówka: ignoruj skrypty platformy, by zwiększyć przydatność punktów przerwania detektora.

Gdy przygotowałem film Wprowadzenie do debugowania kodu JavaScript, niektórzy widzowie stwierdzili, że punkty przerwania detektora zdarzeń nie są przydatne w aplikacjach utworzonych na podstawie platform, ponieważ detektory zdarzeń są często umieszczone w kodzie platformy. Na przykład na Rys. 8 konfiguruję 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 wstrzymuje się on w kodzie otoki Vue.js w wierszu 1802, co nie jest przydatne.

Punkt przerwania kliknięcia jest wstrzymywany w kodzie kodu Vue.js.

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

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

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

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

Następnym razem, gdy kliknę przycisk i uruchomię punkt przerwania click, uruchomi się kod Vue.js bez zatrzymywania go, a następnie zatrzyma się na pierwszym wierszu kodu w detektorze aplikacji, w którym naprawdę chciałam się zatrzymać.

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

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

Pobieranie kanałów podglądu

Jako domyślnej przeglądarki dla programistów możesz używać Chrome Canary, Dev lub Beta. Te kanały podglądu dają dostęp do najnowszych funkcji Narzędzi deweloperskich, umożliwiają testowanie najnowocześniejszych interfejsów API platform internetowych oraz wykrywanie problemów w witrynie, zanim zdołają zrobić użytkownicy.

Kontakt z zespołem Narzędzi deweloperskich w Chrome

Użyj poniższych opcji, aby omówić nowe funkcje i zmiany w poście lub wszelkie inne kwestie związane z Narzędziami dla deweloperów.

  • Prześlij nam sugestię lub opinię na stronie crbug.com.
  • Aby zgłosić problem z Narzędziami deweloperskimi, kliknij Więcej opcji   Więcej   > Pomoc > Zgłoś problemy z Narzędziami deweloperskimi.
  • zatweetuj na @ChromeDevTools.
  • Napisz komentarz o nowościach w filmach w YouTube dostępnych w Narzędziach deweloperskich lub z poradami dotyczącymi narzędzi dla deweloperów w filmach w YouTube.

Co nowego w Narzędziach deweloperskich

Lista wszystkich omówionych funkcji w serii Co nowego w Narzędziach deweloperskich.

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

101 Chrome

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

Subskrypcja Chrome 82 została anulowana.

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