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
• Wyróżnianie 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
• Przerwij w przypadku AudioContextzdarzeń.
• 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 jego wersję wideo:

Wyrażenia na żywo w konsoli

Przypnij wyrażenie Live Expression 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

Wiarygodniejsze 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 instruowali Narzędzia deweloperskie, aby podczas przechodzenia przez kod ignorowały określony plik TypeScriptu, 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 w 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 przy zdarzeniach AudioContext

Użyj panelu Punkty przerwań detektora zdarzeń, aby wstrzymać działanie na pierwszej linii AudioContext obsługi zdarzenia 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 procedurze obsługi 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ś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 programowania.

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.

Skontaktuj się 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.
• Zostawiaj komentarze pod filmami na YouTube z serii „Co nowego w Narzędziach deweloperskich” lub filmami 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.