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

Kayce Basques

Obsługa deklaracji let i class w Konsoli

Konsola obsługuje teraz ponowne deklaracje instrukcji let i class. Brak możliwości ponownego zadeklarowania był częstym problemem dla programistów internetowych, którzy korzystają z Konsoli do eksperymentowania z nowym kodem JavaScript.

Na przykład wcześniej, gdy podczas ponownego zadeklarowania zmiennej lokalnej za pomocą funkcji let konsola wyświetlała błąd:

Zrzut ekranu konsoli w Chrome 78, który pokazuje, że ponowna deklaracja let kończy się niepowodzeniem.

Konsola umożliwia teraz ponowne zadeklarowanie:

Zrzut ekranu konsoli w Chrome 80 pokazujący, że ponowna deklaracja let zakończyła się sukcesem.

Problem z Chromium #1004193

Ulepszone debugowanie WebAssembly

DevTools zaczęło obsługiwać standard debugowania DWARF, co oznacza zwiększone wsparcie dla pomijania kodu, ustawiania punktów przerwania i rozwiązywania ścieżek stosu w językach źródłowych w DevTools. Aby dowiedzieć się więcej, przeczytaj artykuł Ulepszenie debugowania WebAssembly w Chrome DevTools.

Zrzut ekranu przedstawiający nowe debugowanie WebAssembly z wykorzystaniem DWARF

Aktualizacje panelu sieci

Prośba o łańcuchy inicjatora na karcie Inicjator

Możesz teraz wyświetlać inicjatorów i zależności żądania sieci jako listę zagnieżdżoną. Dzięki temu możesz dowiedzieć się, dlaczego wysłano żądanie zasobu lub jaką aktywność w sieci wywołał dany zasób (np. skrypt).

Zrzut ekranu przedstawiający łańcuch inicjatora żądania na karcie Inicjator

Po zapisaniu aktywności sieci w panelu Sieć kliknij zasób, a potem otwórz kartę Initiator, aby wyświetlić łańcuch inicjatora żądania:

  • Sprawdzany zasób jest wyróżniony pogrubioną czcionką. Na zrzucie ekranu powyżej https://web.dev/default-627898b5.jsjest sprawdzanym zasobem.
  • Zasoby powyżej zasobu kontrolowanego to inicjatory. Na zrzucie ekranu powyżej https://web.dev/bootstrap.js jest inicjatorem https://web.dev/default-627898b5.js. Innymi słowy, https://web.dev/bootstrap.js spowodowało żądanie sieci dotyczące https://web.dev/default-627898b5.js.
  • Zasoby poniżej zasobu poddanego inspekcji to zależność. Na zrzucie ekranu powyżej https://web.dev/chunk-f34f99f7.js jest zależnością od https://web.dev/default-627898b5.js. Innymi słowy, https://web.dev/default-627898b5.js spowodowało żądanie sieci dotyczące https://web.dev/chunk-f34f99f7.js.

Problem z Chromium #842488

Zaznacz wybrane żądanie sieciowe w sekcji Przegląd

Gdy klikniesz zasób sieci, aby go sprawdzić, panel sieci w sekcji Przegląd będzie miał wokół tego zasobu niebieską ramkę. Dzięki temu możesz sprawdzić, czy żądanie sieci jest wysyłane wcześniej czy później niż oczekiwano.

Zrzut ekranu z panelem Przegląd z wyróżnionym zasobem

Problem z Chromium #988253

Kolumny adresu URL i ścieżki w panelu Sieć

Aby zobaczyć bezwzględną ścieżkę lub pełny adres URL każdego zasobu sieci, użyj nowych kolumn Ścieżka i URL w panelu Sieć.

Zrzut ekranu pokazujący nowe kolumny Ścieżka i URL w panelu Sieć

Kliknij prawym przyciskiem myszy nagłówek tabeli Kaskada i wybierz Ścieżka lub URL, aby wyświetlić nowe kolumny.

Problem z Chromium #993366

Zaktualizowane ciągi znaków klienta użytkownika

Narzędzia deweloperskie umożliwiają ustawienie niestandardowego ciągu znaków User-Agent na karcie Warunki sieci. Ciąg znaków User-Agent wpływa na nagłówek HTTP User-Agent dołączony do zasobów sieciowych, a także na wartość navigator.userAgent.

Wstępnie zdefiniowane ciągi znaków User-Agent zostały zaktualizowane, aby odzwierciedlały nowe wersje przeglądarek.

Zrzut ekranu pokazujący menu Użytkownik klienta na karcie Warunki sieci

Aby uzyskać dostęp do warunków sieci, otwórz menu poleceń i uruchom polecenie Show Network Conditions.

Problem z Chromium #1029031

Aktualizacje panelu audytów

Nowy interfejs konfiguracji

Interfejs konfiguracji ma teraz nowy, responsywny układ, a opcje konfiguracji ograniczania zostały uproszczone. Więcej informacji o ograniczeniach w panelu audytów znajdziesz w sekcji Ograniczanie w panelu audytów.

Nowy interfejs konfiguracji.

Aktualizacje karty Zasięg

Tryby pokrycia według funkcji lub bloku

Na karcie Pokrycie znajduje się nowe menu, w którym możesz określić, czy dane dotyczące pokrycia kodu mają być zbierane na poziomie funkcji czy na poziomie bloku. Zasięg na blok jest bardziej szczegółowy, ale jego zbieranie jest też znacznie droższe. Narzędzia deweloperskie domyślnie używają teraz pokrycia na podstawie funkcji.

Menu trybu pokrycia.

Pokrywanie musi być teraz inicjowane przez ponowne załadowanie strony

Opcja przełączania pokrycia kodu bez odświeżania strony została usunięta, ponieważ dane o pokryciu były niewiarygodne. Funkcja może zostać zgłoszona jako nieużywana, jeśli jej wykonanie miało miejsce dawno temu i zbieracz śmieci V8 ją usunął.

Problem z Chromium #1004203

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.

Co nowego w Narzędziach deweloperskich

Lista wszystkich tematów omawianych w cyklu artykułów Co nowego w Narzędziach deweloperskich.