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

Kayce Basques

Witamy z powrotem. Od ostatniej aktualizacji Chrome 68 minęło około 12 tygodni. Pominęliśmy wersję Chrome 69, ponieważ nie wprowadziliśmy w niej wystarczającej liczby nowych funkcji ani zmian w interfejsie, aby uzasadnić publikację.

Nowe funkcje i ważne zmiany w Narzędziach deweloperskich w Chrome 70:

• Wyrazy na żywo na konsoli.
• Wyróżniaj węzły DOM podczas oceny Eager.
• Optymalizacje w panelu Skuteczność.
• Bardziej niezawodne debugowanie.
• Włącz ograniczanie wykorzystania sieci w menu poleceń.
• Autouzupełnianie warunkowych punktów przerwania
• Przerwij na zdarzeniach AudioContext.
• Debugowanie aplikacji Node.js za pomocą ndb
• Dodatkowa wskazówka: możesz mierzyć rzeczywiste interakcje użytkowników za pomocą interfejsu User Timing API.

Czytaj dalej lub obejrzyj filmową wersję tego dokumentu:

Wyrażenia na żywo w Konsoli

Przypnij aktywne wyrażenie u góry konsoli, jeśli chcesz na bieżąco śledzić jego wartość.

1. Kliknij Utwórz wyrażenie na żywo. Otworzy się interfejs Live Expression.

   

   Rysunek 1 Interfejs Live Expression

2. Wpisz wyrażenie, które chcesz monitorować.

   

   Rysunek 2. Wpisuję Date.now() w interfejsie Live Expression

3. Aby zapisać wyrażenie, kliknij poza interfejsem Live Expression.

   

   Rysunek 3. Zapisane wyrażenie na żywo

Wartości funkcji Live Expression są aktualizowane co 250 milisekund.

Wyróżnianie węzłów DOM podczas wartościowania zachłannego

Wpisz w Konsoli wyrażenie, które w wyniku działania staje się węzłem DOM, a wczesna ocena wyróżnia ten węzeł w widoku.

Rysunek 4 Ponieważ bieżące wyrażenie zwraca węzeł, jest on wyróżniony na widoku

Oto kilka wyrażeń, które mogą Ci się przydać:

• document.activeElement do wyróżnienia węzła, który jest obecnie zaznaczony.
• document.querySelector(s) służy do wyróżniania dowolnego węzła, gdzie s to selektor arkusza CSS. Jest to równoznaczne z najechaniem kursorem na węzeł w drzewie DOM.
• $0, aby wyróżnić dowolny węzeł wybrany w drzewie DOM.
• $0.parentElement, aby wyróżnić element nadrzędny aktualnie wybranego węzła.

Optymalizacje w panelu Wydajność

Wcześniej podczas profilowania dużej strony panelowi Skuteczność zajmowało kilkadziesiąt sekund przetwarzanie i wizualizowanie danych. Kliknięcie zdarzenia, aby dowiedzieć się więcej na jego temat na karcie Podsumowanie, czasami też zajmowało kilka sekund. Przetwarzanie i wizualizacja są szybsze w Chrome 70.

Rysunek 5. Przetwarzanie i wczytywanie danych o skuteczności

Bardziej niezawodne debugowanie

Chrome 70 naprawia kilka błędów, które powodowały znikanie punktów przerwania lub ich nieaktywowanie.

Aktualizacja zawiera też poprawki błędów związanych z mapami źródeł. Niektórzy użytkownicy TypeScriptu zalecają ignorowanie określonego pliku TypeScript podczas wykonywania kodu. Zamiast tego ignorują cały pakiet plików JavaScript. Te poprawki rozwiązują też problem, który powodował ogólne spowolnienie działania panelu źródeł.

Włączanie ograniczania przepustowości sieci z poziomu menu poleceń

W menu poleceń możesz teraz ustawić ograniczanie przy szybkim połączeniu 3G lub wolnym połączeniu 3G.

Rysunek 6. Polecenia ograniczania wykorzystania sieci w menu poleceń

Autouzupełnianie warunków punktów przerwania

Używaj interfejsu autouzupełniania, aby szybciej wpisywać wyrażenia warunkowego punktu przerwania.

Rysunek 7. Interfejs autouzupełniania

Czy wiesz, że… Interfejs autouzupełniania jest dostępny dzięki narzędziu CodeMirror, które również działa w Konsoli.

Przerwy w zdarzeniu AudioContext

W panelu Punkty przerwania detektora zdarzeń możesz wstrzymać się na pierwszym wierszu modułu obsługi zdarzeń cyklu życia AudioContext.

AudioContext jest częścią interfejsu Web Audio API, którego możesz używać do przetwarzania i syntezy dźwięku.

Rysunek 8. Zdarzenia AudioContext w panelu Punkty przerwania detektora zdarzeń

Debugowanie aplikacji Node.js za pomocą ndb

ndb to nowy debuger aplikacji Node.js. Oprócz standardowych funkcji debugowania dostępnych w Narzędziach deweloperskich narzędzie ndb oferuje również:

• wykrywanie procesów podrzędnych i łączenia się z nimi;
• Umieszczanie punktów przerwania przed wymaganymi modułami.
• edytować pliki w interfejsie Narzędzi deweloperskich.
• Domyślnie ignorowanie wszystkich skryptów znajdujących się poza bieżącym katalogiem roboczym.

Rysunek 9. Interfejs ndb

Aby dowiedzieć się więcej, zapoznaj się z README ndb.

Wskazówka: korzystaj z interfejsu User Timing API, aby mierzyć interakcje użytkowników z uwzględnieniem rzeczywistych warunków

Chcesz mierzyć, ile czasu zajmuje realnym użytkownikom zrealizowanie kluczowych działań na Twoich stronach? Zastanów się nad dodaniem do kodu obsługi interfejsu User Timing API.

Załóżmy na przykład, że chcesz mierzyć, ile czasu użytkownik spędza na stronie głównej, zanim kliknie przycisk wezwania do działania. Najpierw zaznacz początek ścieżki w obiekcie event handler powiązanym ze zdarzeniem wczytywania strony, np.: DOMContentLoaded:

document.addEventListener('DOMContentLoaded', () => {
  window.performance.mark('start');
});

Następnie po kliknięciu przycisku zaznacz koniec podróży i oblicz jej czas trwania:

document.querySelector('#CTA').addEventListener('click', () => {
  window.performance.mark('end');
  window.performance.measure('CTA', 'start', 'end');
});

Możesz również wyodrębniać wyniki, co ułatwia wysyłanie ich do usługi analitycznej w celu zbierania anonimowych, zbiorczych danych:

const CTA = window.performance.getEntriesByName('CTA')[0].duration;

Narzędzie DevTools automatycznie oznacza pomiary czasu użytkownika w sekcji Czas użytkownika w nagraniach wydajności.

Rysunek 10. Sekcja Czas działań użytkownika

Jest to też przydatne podczas debugowania lub optymalizowania kodu. Jeśli np. chcesz zoptymalizować określony etap cyklu życia, wywołaj funkcję window.performance.mark() na początku i na końcu funkcji cyklu życia. React robi to w trybie deweloperskim.

Pobieranie kanałów podglądu

Rozważ użycie przeglądarki Chrome Canary, Dev lub Beta jako domyślnej przeglądarki deweloperskiej. Te kanały wersji wstępnej zapewniają dostęp do najnowszych funkcji DevTools, umożliwiają testowanie najnowocześniejszych interfejsów API platformy internetowej i pomagają znaleźć problemy w witrynie, zanim zrobią to użytkownicy.

Kontakt z zespołem ds. Narzędzi deweloperskich w Chrome

Aby omówić nowe funkcje, aktualizacje lub inne kwestie związane z Narzędziami deweloperskimi, skorzystaj z tych opcji.

• Przesyłaj opinie i prośby o dodanie funkcji na stronie crbug.com.
• Aby zgłosić problem z Narzędziami deweloperskimi, kliknij more_vert Więcej opcji > Pomoc > Zgłoś problem z Narzędziami deweloperskimi w Narzędziach deweloperskich.
• Wyślij tweeta do @ChromeDevTools.
• Dodaj komentarze do filmów w YouTube z serii „Co nowego w Narzędziach deweloperskich” lub Wskazówki dotyczące Narzędzi deweloperskich.

Co nowego w Narzędziach deweloperskich

Lista wszystkich tematów omawianych w cyklu artykułów Co nowego w Narzędziach deweloperskich.