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

Kayce Basques

Witamy z powrotem. Od ostatniej aktualizacji, która dotyczyła 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.
• Zaznacz węzły DOM podczas wartościowania zachłannego.
• Optymalizacje w panelu Skuteczność.
• Bardziej niezawodne debugowanie.
• Włącz ograniczanie przepustowości sieci w menu poleceń.
• Autouzupełnianie warunkowych punktów przerwania.
• Przerwij na zdarzeniach AudioContext.
• Debugowanie aplikacji Node.js za pomocą ndb
• Wskazówka: zmierz 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

Jeśli chcesz monitorować wartość wyrażenia na żywo w czasie rzeczywistym, przypnij je u góry konsoli.

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. Wpisywanie Date.now() w interfejsie aktywnych wyrażeń

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

   

   Rysunek 3. Zapisane wyrażenie na żywo

Wartości wyrażenia na żywo 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ł, ten węzeł jest wyróżniony na widoku

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

• document.activeElement – wyróżnianie węzła, który jest obecnie zaznaczony.
• document.querySelector(s) do wyróżniania dowolnego węzła, gdzie s to selektor 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 wydawali instrukcje narzędziom DevTools, aby ignorowały określony plik TypeScriptu podczas przechodzenia przez kod, a zamiast tego narzędzia DevTools ignorowały cały pakietowany plik JavaScriptu. 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

Korzystając z interfejsu automatycznego uzupełniania, możesz szybciej wpisywać wyrażenia punktu przerwania warunkowego.

Rysunek 7. Interfejs autouzupełniania

Czy wiesz, że… Interfejs użytkownika automatycznego uzupełniania jest możliwe dzięki bibliotece CodeMirror, która obsługuje też konsolę.

Przerwy w zdarzeniu AudioContext

Aby wstrzymać działanie na pierwszym wierszu AudioContext obsługi zdarzeń cyklu życia, użyj panelu Punkty przerwania detektora zdarzeń.

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 zwykłych funkcji debugowania dostępnych w Narzędziach deweloperskich ndb oferuje też:

• wykrywanie procesów podrzędnych i łączenia się z nimi,
• Umieszczenie punktów przerwania przed modułami jest wymagane.
• 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: używaj interfejsu User Timing API do pomiaru interakcji użytkowników z aplikacją

Chcesz mierzyć, ile czasu zajmuje realnym użytkownikom ukończenie najważniejszych ścieżek w 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 też wyodrębnić pomiary, aby łatwo przesłać je do usługi analitycznej i gromadzić anonimowe, zagregowane dane:

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 jako domyślnej przeglądarki deweloperskiej wersji Canary, Dev lub Beta przeglądarki Chrome. 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 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.
• Zgłoś problem z Narzędziami deweloperskimi, klikając 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.