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

Kayce Basques

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ł typowym problemem wśród programistów stron internetowych, którzy używają konsoli do eksperymentowania z nowym kodem JavaScript. w kodzie.

Na przykład wcześniej przy ponownym zadeklarowaniu zmiennej lokalnej za pomocą funkcji let konsola zgłaszała żądanie błąd:

Zrzut ekranu konsoli w Chrome 78, na którym widać, że ponowna deklaracja zezwalająca nie powiodła się.

Teraz konsola umożliwia ponowną deklarację:

Zrzut ekranu konsoli w Chrome 80 pokazujący, że ponowna deklaracja została zaakceptowana.

Problem z Chromium #1004193

Ulepszone debugowanie WebAssembly

Narzędzia deweloperskie obsługują już standard debugowania DWARF, co oznacza nad kodem, ustawianie punktów przerwania i rozwiązywaniem zrzutów stosu w językach źródłowych Narzędzia deweloperskie. Więcej informacji znajdziesz w artykule o ulepszonym debugowaniu WebAssembly w Narzędziach deweloperskich w Chrome.

Zrzut ekranu nowego debugowania WebAssembly opartego na DWARF.

Aktualizacje panelu Sieć

Poproś o łańcuchy inicjatora na karcie Inicjator

Możesz teraz wyświetlać inicjatory i zależności żądania sieciowego w postaci zagnieżdżonej listy. Może to spowodować pomaga zrozumieć, dlaczego zażądano zasobu i jaka aktywność sieciowa danego zasobu (na przykład jako skrypt).

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

Po zarejestrowaniu aktywności sieci w panelu Sieć kliknij zasób, a następnie otwórz Karta Initiator (Inicjator), aby wyświetlić łańcuch inicjatora żądań:

  • Sprawdzany zasób jest pogrubiony. Na zrzucie ekranu powyżej https://web.dev/default-627898b5.js jest sprawdzanym zasobem.
  • Zasoby powyżej sprawdzanego zasobu są inicjatorami. Na zrzucie ekranu powyżej https://web.dev/bootstrap.js jest inicjatorem aplikacji https://web.dev/default-627898b5.js. W innym słów, funkcja https://web.dev/bootstrap.js spowodowała żądanie sieciowe dla https://web.dev/default-627898b5.js
  • Zasoby poniżej sprawdzanego zasobu to dependencies. Na zrzucie ekranu powyżej https://web.dev/chunk-f34f99f7.js to zależność typu https://web.dev/default-627898b5.js. W innymi słowami, 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 sieci w sekcji Przegląd

Gdy klikniesz zasób sieciowy w celu jego sprawdzenia, panel Sieć nakłada teraz niebieskie obramowanie w sekcji Omówienie. Pomaga to określić, czy żądanie sieciowe jest i zaczynają się wcześniej lub później niż zwykle.

Zrzut ekranu panelu Przegląd z zaznaczonym sprawdzanym zasobem.

Problem z Chromium #988253

Kolumny adresów URL i ścieżek w panelu Sieć

Użyj nowych kolumn Ścieżka i URL w panelu Sieć, by wyświetlić ścieżkę bezwzględną lub pełną. Adres URL każdego zasobu sieciowego.

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

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

Problem z Chromium #993366

Zaktualizowane ciągi znaków klienta użytkownika

W Narzędziach deweloperskich można ustawić niestandardowy ciąg znaków klienta użytkownika na karcie Warunki sieciowe. 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 nagłówek navigator.userAgent.

Wstępnie zdefiniowane ciągi znaków klienta użytkownika zostały zaktualizowane, aby uwzględniały nowoczesne wersje przeglądarek.

Zrzut ekranu menu klienta użytkownika na karcie Warunki sieciowe.

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

Problem z Chromium #1029031

Aktualizacje panelu kontrolnego

Nowy interfejs użytkownika konfiguracji

Interfejs konfiguracji ma nowy, elastyczny wygląd, a opcje konfiguracji ograniczania zawierają uproszczono. Więcej informacji o interfejsie ograniczania znajdziesz w sekcji Ograniczanie wykorzystania panelu kontroli zmian.

Nowy interfejs konfiguracji.

Aktualizacje karty Zasięg

Tryby zasięgu według funkcji lub bloku

Na karcie Zasięg znajduje się nowe menu, które pozwala określić, czy dane o pokryciu kodu należy zbierać na funkcję lub na blok. Zasięg na blok jest bardziej szczegółowy, a jej zebranie jest znacznie droższe. Narzędzia deweloperskie domyślnie korzystają teraz z pokrycia na funkcję.

Menu trybu pokrycia.

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

Usunęliśmy przełączanie zasięgu kodu bez ponownego załadowania strony, ponieważ dane o pokryciu zawodny. Na przykład funkcja może zostać zgłoszona jako nieużywana, jeśli została wykonana dawno temu a śmieciarka V8 ją wyczyściła.

Problem z Chromium #1004203

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 w Narzędziach deweloperskich.
  • Opublikuj tweeta na stronie @ChromeDevTools.
  • Napisz komentarz w filmach w YouTube o nowościach w Narzędziach deweloperskich lub o 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.