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 Chrome 69, ponieważ nie mieliśmy wystarczająco dużo nowych funkcji ani zmian w interfejsie, aby uzasadnić opublikowanie posta.

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

• Wyrażenia na żywo w konsoli
• Podświetlanie węzłów DOM podczas wartościowania zachłannego
• Optymalizacje panelu Skuteczność
• Bardziej niezawodne debugowanie
• Włącz ograniczanie przepustowości sieci w menu poleceń.
• Autouzupełnianie warunkowych punktów przerwania
• Przerwa na AudioContextzdarzenia.
• Debugowanie aplikacji Node.js za pomocą ndb
• Dodatkowa wskazówka: mierz rzeczywiste interakcje użytkowników za pomocą interfejsu User Timing API

Przeczytaj ten artykuł lub obejrzyj film:

Wyrażenia na żywo w konsoli

Przypnij wyrażenie na żywo u góry konsoli, jeśli chcesz śledzić jego wartość w czasie rzeczywistym.

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

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

   

   Rysunek 3. zapisane aktywne wyrażenie,

Wartości 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 daje w wyniku węzeł DOM, a szybka ocena wyróżni ten węzeł w obszarze wyświetlania.

Rysunek 4. Ponieważ bieżące wyrażenie daje w wyniku węzeł, jest on wyróżniony w obszarze widoku.

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

• document.activeElement – wyróżnienie węzła, który jest obecnie zaznaczony.
• document.querySelector(s) do wyróżniania dowolnego węzła, gdzie s to selektor CSS. Odpowiada to najechaniu kursorem na węzeł w widoku drzewa DOM.
• $0 – aby wyróżnić węzeł, który jest obecnie wybrany w drzewie DOM.
• $0.parentElement, aby wyróżnić element nadrzędny aktualnie wybranego węzła.

Optymalizacja panelu Skuteczność

Podczas profilowania dużej strony panel Wydajność potrzebował wcześniej kilkudziesięciu sekund na przetworzenie i wyświetlenie danych. Kliknięcie zdarzenia, aby dowiedzieć się o nim więcej na karcie Podsumowanie, również czasami trwał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 niektóre błędy, które powodowały znikanie punktów przerwania lub ich niewywoływanie.

Rozwiązuje też błędy związane z mapami źródeł. Niektórzy użytkownicy TypeScriptu prosili Narzędzia deweloperskie o zignorowanie określonego pliku TypeScriptu podczas przechodzenia przez kod, ale zamiast tego Narzędzia deweloperskie ignorowały cały spakowany plik JavaScriptu. Te poprawki rozwiązują też problem, który powodował ogólne spowolnienie działania panelu Źródła.

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

W menu poleceń możesz teraz ustawić ograniczanie sieci na szybkie lub wolne połączenie 3G.

Rysunek 6. Polecenia ograniczania wykorzystania sieci w menu poleceń

Autouzupełnianie warunkowych 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 możliwy dzięki CodeMirror, który obsługuje też konsolę.

Wstrzymywanie działania przy zdarzeniach AudioContext

Użyj panelu Punkty przerwań detektora zdarzeń, aby wstrzymać działanie w pierwszym wierszu AudioContext funkcji obsługi zdarzeń cyklu życia.

AudioContext jest częścią interfejsu Web Audio API, którego możesz używać do przetwarzania i syntezowania 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 dołączanie do nich;
• Przed modułami należy umieścić punkty przerwania.
• Edytowanie plików w interfejsie Narzędzi deweloperskich.
• Domyślnie ignoruje wszystkie skrypty poza bieżącym katalogiem roboczym.

Rysunek 9. Interfejs ndb

Więcej informacji znajdziesz w pliku README narzędzia ndb.

Dodatkowa wskazówka: mierz interakcje rzeczywistych użytkowników za pomocą interfejsu User Timing API

Chcesz mierzyć, ile czasu zajmuje rzeczywistym użytkownikom przejście kluczowych ścieżek w Twoich witrynach? Rozważ dodanie do kodu obsługi interfejsu User Timing API.

Załóżmy na przykład, że chcesz zmierzyć, ile czasu użytkownik spędza na stronie głównej, zanim kliknie przycisk wezwania do działania. Najpierw oznacz początek ścieżki w obsłudze zdarzeń powiązanej ze zdarzeniem wczytania strony, np. DOMContentLoaded:

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

Następnie po kliknięciu przycisku możesz oznaczyć koniec podróży i obliczyć 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 przesyłać je do usługi analitycznej i zbierać anonimowe, zagregowane dane:

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

Narzędzia deweloperskie automatycznie oznaczają pomiary czasu użytkownika w sekcji Czas użytkownika w nagraniach wydajności.

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

Przydaje się to również podczas debugowania lub optymalizowania kodu. Jeśli na przykład chcesz zoptymalizować określoną fazę 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żywanie Chrome w wersji Canary, deweloperskiej lub beta jako domyślnej przeglądarki do programowania. Te kanały wersji testowych zapewniają dostęp do najnowszych funkcji Narzędzi deweloperskich, umożliwiają testowanie najnowocześniejszych interfejsów API platformy internetowej i pomagają znajdować problemy w witrynie, zanim zrobią to użytkownicy.

Kontakt z zespołem Narzędzi deweloperskich w Chrome

Skorzystaj z tych opcji, aby porozmawiać o nowych funkcjach, aktualizacjach lub innych kwestiach związanych z Narzędziami deweloperskimi.

• Prześlij nam opinię 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.
• Dodawaj komentarze do filmów na YouTube z serii „Co nowego w Narzędziach deweloperskich” lub filmów na YouTube z serii „Wskazówki dotyczące Narzędzi deweloperskich”.

Co nowego w Narzędziach deweloperskich

Lista wszystkich tematów omówionych w serii Nowości w Narzędziach deweloperskich.