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, by opublikować posta.

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

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 Utwórz wyrażenie na żywo. Otworzy się interfejs Live Express.

    Interfejs Live Expression

    Rysunek 1. Interfejs Live Expression

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

    Wpisz Date.now() w interfejsie Live Expression.

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

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

    Zapisane wyrażenie Live Express.

    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 wyrażenie, które w konsoli wskazuje węzeł DOM, a funkcja Eager Evaluation wyróżnia ten węzeł w widocznym obszarze.

Gdy wpiszesz document.activeElement w konsoli, w widocznym obszarze zostanie wyróżniony węzeł.

Rysunek 4. Bieżące wyrażenie wskazuje węzeł, więc ten węzeł jest wyróżniony w widocznym obszarze

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. Odpowiada to 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 przetworzenie i wyświetlenie danych w panelu wydajności trwało kilkadziesiąt sekund. Kliknięcie zdarzenia w celu uzyskania informacji na jego temat na karcie Podsumowanie również czasem trwało kilka sekund. Przetwarzanie i wizualizacja jest szybsze w Chrome 70.

Przetwarzanie i wczytywanie danych o wydajności.

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 TypeScriptu poleciliby ignorowanie określonego pliku TypeScript podczas wykonywania kodu. Zamiast tego ignorują cały pakiet plików JavaScript. Te poprawki rozwiązuje również problem, który powodował wolne działanie panelu Źródła.

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.

Polecenia ograniczania wykorzystania sieci w menu poleceń.

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.

Interfejs autouzupełniania

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.

Przerwa na zdarzenia AudioContext

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

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

Zdarzenia AudioContext w panelu Punkty przerwania detektora zdarzeń.

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 dostępnych w Narzędziach deweloperskich narzędzie ndb oferuje również:

  • 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.

Interfejs ndb.

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ż wykorzystanie do swojego kodu interfejsu User Timing API.

Załóżmy np., że chcesz sprawdzić, ile czasu użytkownik spędza na stronie głównej, zanim kliknie przycisk wezwania do działania. Najpierw oznaczasz początek ścieżki w module obsługi zdarzeń powiązanym ze zdarzeniem wczytywania 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ę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ędzia deweloperskie automatycznie oznaczają pomiary czasu działań użytkownika w sekcji Czas użytkownika w nagraniach skuteczności.

W sekcji Czas użytkownika.

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

Jest to też przydatne podczas debugowania lub optymalizacji kodu. Jeśli na przykład chcesz zoptymalizować określony etap cyklu życia, wywołaj window.performance.mark() na początku i 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   Więcej   > Pomoc > Zgłoś problemy z Narzędziami deweloperskimi.
  • 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.

Chrome 127

Chrome 126

Chrome 125

Chrome 124

Chrome 123

Chrome 122

Chrome 121

Chrome 120

Chrome 119

Chrome 118

Chrome 117

Chrome 116

Chrome 115

Chrome 114

Chrome 113

Chrome 112

Chrome 111

Chrome 110

Chrome 109

Chrome 108

Chrome 107

Chrome 106

Chrome 105

Chrome 104

Chrome 103

Chrome 102

Chrome 101

Chrome 100

Chrome 99

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Chrome 93

Chrome 92

Chrome 91

Chrome 90

Chrome 89

Chrome 88

Chrome 87

Chrome 86

Chrome 85

Chrome 84

Chrome 83

Chrome 82

Chrome 82 został anulowany.

Chrome 81

Chrome 80

Chrome 79

Chrome 78

Chrome 77

Chrome 76

Chrome 75

Chrome 74

Chrome 73

Chrome 72

Chrome 71

Chrome 70

Chrome 68

Chrome 67

Chrome 66

Chrome 65

Chrome 64

Chrome 63

Chrome 62

Chrome 61

Chrome 60

Chrome 59