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ącej liczby nowych funkcji lub zmian interfejsu, aby opublikować ten post.

Nowe funkcje i duże zmiany w Narzędziach deweloperskich w Chrome 70 to między innymi:

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

Zapoznaj się z tym dokumentem lub obejrzyj go w wersji wideo:

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. Na żywo Otworzy się interfejs wyrażeń.

   

   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 Live Express

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

Podświetl węzły DOM podczas oceny Eager

Wpisz w konsoli wyrażenie oceniające węzeł DOM, a następnie Eager Evaluation podświetli ten węzeł w widoku.

Rysunek 4. Jako że bieżące wyrażenie zwraca wartość węzła, jest on wyróżniony w widoczny obszar

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

• document.activeElement za wyróżnienie 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. Ten jest równoważne najechaniu kursorem na węzeł w drzewie DOM.
• $0 do wyróżnienia węzła, który jest obecnie wybrany w drzewie DOM.
• $0.parentElement, aby wyróżnić element nadrzędny obecnie wybranego węzła.

Optymalizacje panelu Skuteczność

Podczas profilowania dużej strony przetwarzanie panelu Wydajność trwało kilkadziesiąt sekund, wizualizować dane. Czasami kliknięcie zdarzenia w celu uzyskania informacji na jego temat na karcie Podsumowanie również czasami Wczytywanie trwało kilka sekund. Przetwarzanie i wizualizacja jest szybsze w Chrome 70.

Rysunek 5. Przetwarzanie i wczytywanie danych o wydajności

Bardziej niezawodne debugowanie

Chrome 70 zawiera poprawki błędów, które powodowały znikanie lub nieuruchamianie punktów przerwania.

Naprawiliśmy też błędy związane z mapami źródłowymi. Niektórzy użytkownicy TypeScript uznaliby, że narzędzia deweloperskie mają ignorować określony plik TypeScript podczas wykonywania kodu, a Narzędzia deweloperskie ignorują całego pakietu JavaScriptu. Te poprawki rozwiązują też problem, który powodował wyświetlanie panelu Źródła. która zwykle działa powoli.

Włączanie ograniczania wykorzystania sieci w menu poleceń

W menu poleceń możesz teraz ustawić ograniczanie przepustowości sieci do szybkich lub spowolnionych połączeń 3G.

Rysunek 6. Polecenia ograniczania wykorzystania sieci w menu poleceń

Punkty przerwania warunkowego autouzupełniania

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 interfejsowi CodeMirror, który jest również częścią interfejsu Konsola.

Przerwa na zdarzenia AudioContext

Korzystając z panelu Punkty przerwania detektora zdarzeń, możesz wstrzymać odtwarzanie w pierwszym wierszu tagu AudioContext. modułu obsługi zdarzeń cyklu życia.

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

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

Debugowanie aplikacji Node.js przy użyciu ndb

ndb to nowy debuger aplikacji Node.js. Oprócz standardowych funkcji debugowania, które są dostępne za pomocą Narzędzi deweloperskich, a dodatkowo ndb oferuje:

• Wykrywanie i łączenie się z procesami potomnymi.
• Umieszczanie punktów przerwania przed wymaganymi modułami.
• Edytowanie plików w interfejsie Narzędzi deweloperskich.
• Domyślnie ignorowane są wszystkie skrypty spoza bieżącego katalogu roboczego.

Rysunek 9. Interfejs ndb

Aby dowiedzieć się więcej, zajrzyj do ndb README.

Dodatkowa wskazówka: możesz mierzyć rzeczywiste interakcje użytkowników za pomocą interfejsu User Timing API

Chcesz mierzyć, ile czasu zajmuje realnym użytkownikom zrealizowanie kluczowych działań na Twoich stronach? Rozważ instrumentacji kodu za pomocą interfejsu User Timing API.

Załóżmy np., że chcesz sprawdzić, ile czasu użytkownik spędzi na stronie głównej, zanim kliknie przycisk wezwania do działania. Najpierw trzeba zaznaczyć początek podróży moduł obsługi zdarzeń powiązany ze zdarzeniem wczytania strony, np. DOMContentLoaded:

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

Następnie oznaczasz koniec ścieżki i obliczasz jej czas trwania po kliknięciu przycisku:

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

Możesz również wyodrębnić wyniki, co ułatwi przesłanie ich do usługi analitycznej zbieranie anonimowych danych zbiorczych:

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

Narzędzia deweloperskie automatycznie zaznaczają pomiary czasu użytkownika w sekcji Czas użytkownika na stronie Nagrania występów.

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

Jest to też przydatne podczas debugowania lub optymalizacji kodu. Jeśli na przykład chcesz zoptymalizować na określonym etapie cyklu życia produktu, wywołaj window.performance.mark() na początku i na końcu funkcji cyklu życia. React działa w trybie deweloperskim.

Pobierz kanały podglądu

Zastanów się, czy nie ustawić Chrome w wersji Canary, Dev lub beta jako domyślnej przeglądarki do programowania. Te kanały wersji testowej dają dostęp do najnowszych funkcji Narzędzi deweloperskich, umożliwiają testowanie najnowocześniejszych interfejsów API platformy internetowej i wykrywanie problemów w witrynie, zanim użytkownicy ją zobaczą.

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

Skorzystaj z poniższych opcji, aby porozmawiać o nowych funkcjach i zmianach w poście lub o innych kwestiach związanych z Narzędziami deweloperskimi.

• Prześlij nam sugestię lub opinię na crbug.com.
• Aby zgłosić problem z Narzędziami deweloperskimi, kliknij Więcej opcji   > Pomoc > Zgłoś problemy z Narzędziami deweloperskimi w Narzędziach deweloperskich.
• Opublikuj tweeta na stronie @ChromeDevTools.
• Napisz komentarz pod filmem dotyczącym nowości w Narzędziach deweloperskich w Narzędziach deweloperskich w YouTube lub filmach w YouTube ze wskazówkami dotyczącymi Narzędzi deweloperskich.

Co nowego w Narzędziach deweloperskich

Lista wszystkich tematów, które zostały omówione w serii Co nowego w Narzędziach deweloperskich.