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

Kayce Basques
Kayce Basques
X GitHub

Obsługa ponownych 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 stron internetowych, którzy używają konsoli do eksperymentowania z nowym kodem JavaScript.

Na przykład wcześniej, gdy ponownie deklarowano zmienną lokalną za pomocą let, w konsoli pojawiał się błąd:

Zrzut ekranu z konsoli w Chrome 78 pokazujący, że ponowne zadeklarowanie zmiennej za pomocą słowa kluczowego let nie powiodło się.

Konsola umożliwia teraz ponowne zadeklarowanie:

Zrzut ekranu konsoli w Chrome 80 pokazujący, że ponowne zadeklarowanie zmiennej za pomocą słowa kluczowego let zakończyło się powodzeniem.

Problem z Chromium #1004193

Ulepszone debugowanie WebAssembly

Narzędzia deweloperskie zaczęły obsługiwać standard debugowania DWARF, co oznacza większą obsługę przechodzenia przez kod, ustawiania punktów przerwania i rozwiązywania śladów stosu w językach źródłowych w narzędziach deweloperskich. Więcej informacji znajdziesz w artykule Ulepszone debugowanie WebAssembly w Narzędziach deweloperskich w Chrome.

Zrzut ekranu przedstawiający nowe debugowanie WebAssembly oparte na DWARF.

Aktualizacje panelu Sieć

Łańcuchy inicjatora żądania na karcie Inicjator

Możesz teraz wyświetlać inicjatorów i zależności żądania sieciowego w postaci zagnieżdżonej listy. Może to pomóc w określeniu, dlaczego zażądano zasobu lub jaką aktywność sieciową spowodował dany zasób (np. skrypt).

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

Po zarejestrowaniu aktywności sieciowej w panelu Sieć kliknij zasób, a następnie otwórz kartę Inicjator, aby wyświetlić łańcuch inicjatorów żądania:

  • Sprawdzany zasób jest pogrubiony. Na zrzucie ekranu powyżej https://web.dev/default-627898b5.js jest sprawdzanym zasobem.
  • Zasoby znajdujące się nad zbadanym zasobem 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 wysłanie żądania sieciowego dotyczącego https://web.dev/default-627898b5.js.
  • Zasoby znajdujące się pod sprawdzanym zasobem to zależności. Na zrzucie ekranu powyżej element https://web.dev/chunk-f34f99f7.js jest zależny od elementu https://web.dev/default-627898b5.js. Inaczej mówiąc, https://web.dev/default-627898b5.js spowodował(-a) żądanie sieciowe dotyczące https://web.dev/chunk-f34f99f7.js.

Problem z Chromium #842488

Zaznacz wybrane żądanie sieciowe w sekcji Przegląd.

Gdy klikniesz zasób sieciowy, aby go sprawdzić, w panelu Sieć pojawi się niebieska ramka wokół tego zasobu w sekcji Przegląd. Może to pomóc w wykryciu, czy żądanie sieciowe następuje wcześniej lub później niż oczekiwano.

Zrzut ekranu panelu Przegląd z wyróżnionym sprawdzanym zasobem.

Problem z Chromium #988253

Kolumny URL i ścieżka w panelu Sieć

W panelu Sieć użyj nowych kolumn Ścieżka i Adres URL, aby wyświetlić bezwzględną ścieżkę lub pełny adres URL każdego zasobu sieciowego.

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

Kliknij prawym przyciskiem myszy nagłówek tabeli Waterfall (Kaskadowa tabela) i wybierz Path (Ścieżka) lub URL (Adres URL), aby wyświetlić nowe kolumny.

Problem w Chromium #993366

Zaktualizowane ciągi znaków klienta użytkownika

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

Predefiniowane ciągi znaków klienta użytkownika zostały zaktualizowane, aby odzwierciedlać nowoczesne wersje przeglądarek.

Zrzut ekranu menu Klient użytkownika na karcie Stan 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 Audyty

Nowy interfejs konfiguracji

Interfejs konfiguracji ma nowy, elastyczny wygląd, a opcje konfiguracji ograniczania zostały uproszczone. Więcej informacji o zmianach w interfejsie ograniczania znajdziesz w sekcji Ograniczanie w panelu Audyty.

Nowy interfejs konfiguracji.

Zmiany na karcie Pokrycie

Tryby pokrycia według funkcji lub bloku

Na karcie Pokrycie znajduje się nowe menu, które umożliwia określenie, czy dane o pokryciu kodu mają być zbierane na poziomie funkcji czy na poziomie bloku. Zasięg na poziomie bloku jest bardziej szczegółowy, ale też znacznie droższy w zbieraniu. Narzędzia deweloperskie domyślnie korzystają teraz z pokrycia według funkcji.

Menu trybu pokrycia.

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

Przełączanie pokrycia kodu bez ponownego wczytywania strony zostało usunięte, ponieważ dane pokrycia były niewiarygodne. Na przykład funkcja może zostać zgłoszona jako nieużywana, jeśli została wykonana dawno temu, a mechanizm odśmiecania V8 ją usunął.

Problem z Chromium #1004203

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.

Co nowego w Narzędziach deweloperskich

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