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 stanowił częsty problem dla programistów stron internetowych, którzy eksperymentują z nowym kodem JavaScript w konsoli.

Na przykład poprzednio przy ponownym zadeklarowaniu zmiennej lokalnej za pomocą funkcji let konsola zgłaszała 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 zaczynają obsługiwać standard debugowania DWARF, co oznacza, że zwiększyliśmy obsługę przechodzenia kodu, ustawiania punktów przerwania i rozwiązywania zrzutów stosu w językach źródłowych z poziomu Narzędzi deweloperskich. 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 pomóc w zrozumieniu, dlaczego zażądano zasobu lub jaką aktywność sieciową wywołał dany zasób (np. skrypt).

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

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

  • Sprawdzany zasób jest pogrubiony. Na zrzucie ekranu powyżej sprawdzany zasób to https://web.dev/default-627898b5.js.
  • Zasoby powyżej sprawdzanego zasobu są inicjatorami. Na zrzucie ekranu powyżej inicjator zdarzenia https://web.dev/default-627898b5.js to https://web.dev/bootstrap.js. Innymi słowy, przeglądarka https://web.dev/bootstrap.js spowodowała żądanie sieciowe dla adresu https://web.dev/default-627898b5.js.
  • Zasoby poniżej sprawdzanego zasobu to zależności. Na zrzucie ekranu powyżej https://web.dev/chunk-f34f99f7.js to zależność https://web.dev/default-627898b5.js. Inaczej mówiąc, zdarzenie https://web.dev/default-627898b5.js wywołało żądanie sieciowe dla 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 Network (Sieć) umieszcza teraz wokół niego niebieskie obramowanie na stronie Przegląd. Pomaga to określić, czy żądanie sieciowe występuje wcześniej czy później, niż oczekiwano.

Zrzut ekranu panelu Przegląd z zaznaczonym sprawdzanym zasobem.

Problem z Chromium #988253

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

W nowych kolumnach Ścieżka i URL w panelu Sieć możesz sprawdzić ścieżkę bezwzględną lub pełny 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 User-Agent ma wpływ 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 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 polecenie Show Network Conditions.

Problem z Chromium #1029031

Aktualizacje panelu kontrolnego

Nowy interfejs użytkownika konfiguracji

Interfejs konfiguracji ma nowy, elastyczny wygląd oraz uprościliśmy opcje konfiguracji ograniczania. Więcej informacji o zmianach w interfejsie ograniczania znajdziesz w artykule Ograniczanie wykorzystania panelu kontroli.

Nowy interfejs konfiguracji.

Aktualizacje karty Zasięg

Tryby zasięgu według funkcji lub bloku

Na karcie Zasięg znajduje się nowe menu, w którym możesz określić, czy dane o pokryciu kodu mają być zbierane na funkcję czy na blok. Zasięg za blok jest bardziej szczegółowy, ale też znacznie droższy. Narzędzia deweloperskie domyślnie korzystają teraz z pokrycia na funkcję.

Menu trybu pokrycia.

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

Nie udało się przełączyć zasięgu kodu bez ponownego załadowania strony, ponieważ dane o pokryciu były zawodne. Na przykład funkcję można zgłosić jako nieużywaną, jeśli została wykonana dawno temu, a mechanizm odśmiecania V8 ją wyczyścił.

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