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

Jecelyn Yeen

Szybsze uruchamianie Narzędzi deweloperskich

Uruchamianie Narzędzi deweloperskich działa teraz o ok. 37% szybciej, jeśli chodzi o kompilację JavaScriptu (z 6,9 do 5 s). 🎉

Zespół przeprowadził optymalizację, aby zmniejszyć nakład pracy związany z serializacją, analizowaniem i deserializacją podczas uruchamiania.

Na blogu dla inżynierów opublikujemy posta na temat szczegółowego wdrożenia. Śledź ten temat

Problem z Chromium: 1029427

Nowe narzędzia CSS do wizualizacji pod kątem kąta

Narzędzia deweloperskie zapewniają teraz lepszą obsługę debugowania kąta CSS.

Kąt CSS

Gdy do elementu HTML na stronie zastosowano kąt CSS (np. background: linear-gradient(angle, color-stop1, color-stop2), transform: rotate(angle)), obok kąta w panelu Style wyświetla się ikona zegara. Kliknij ikonę zegara, aby włączyć nakładkę zegara. Kliknij dowolne miejsce na zegarze lub przeciągnij igłę, aby zmienić kąt!

Możesz też użyć skrótów klawiszowych albo myszy, by zmienić wartość kąta. Więcej informacji znajdziesz w dokumentacji.

Problemy z Chromium: 1126178, 1138633

Emuluj nieobsługiwane typy obrazów

W Narzędziach deweloperskich na karcie Renderowanie dodaliśmy 2 nowe emulacje, które pozwalają wyłączyć formaty obrazów AVIF i WebP. Te nowe emulacje ułatwiają programistom testowanie różnych scenariuszy wczytywania obrazów bez konieczności przełączania przeglądarki.

Załóżmy, że mamy poniższy kod HTML, który służy do wyświetlania obrazu w formatach AVIF i WebP w nowszych przeglądarkach oraz zastępczy obraz PNG w starszych.

<picture>
  <source srcset="test.avif" type="image/avif">
  <source srcset="test.webp" type="image/webp">
  <img src="test.png" alt="A test image">
</picture>

Otwórz kartę Renderowanie, wybierz „Wyłącz format obrazu AVIF” i odśwież stronę. Najedź kursorem na ikonę img src. Zasób bieżącego obrazu (currentSrc) jest teraz obrazem zastępczym WebP.

Emuluj typy obrazów

Problem z Chromium: 1130556

Symuluj rozmiar limitu miejsca na dane w panelu Miejsce na dane

Możesz teraz zastąpić limit miejsca na dane w panelu Miejsce na dane. Ta funkcja pozwala symulować różne urządzenia i testować działanie aplikacji w scenariuszach dotyczących małej dostępności dysku.

Wybierz Aplikacja > Miejsce na dane, zaznacz pole wyboru Symuluj niestandardowy limit miejsca na dane i wpisz dowolną prawidłową liczbę, aby zasymulować limit miejsca na dane.

Symuluj rozmiar limitu miejsca na dane

Problemy z Chromium: 945786, 1146985

Nowy poziom wskaźników internetowych w nagraniach panelu Wydajność

Nagrania wydajności mają teraz opcję wyświetlania informacji o wskaźnikach internetowych.

Po zarejestrowaniu wydajności wczytywania zaznacz pole wyboru Wskaźniki internetowe w panelu Wydajność, aby wyświetlić nowy poziom wskaźników internetowych.

Wyświetlane są obecnie informacje o wskaźnikach internetowych, takich jak pierwsze wyrenderowanie treści (FCP), największe wyrenderowanie treści (LCP) i przesunięcie układu (LS).

Na stronie web.dev/vitals znajdziesz więcej informacji o optymalizacji wrażeń użytkowników za pomocą danych dotyczących wartości internetowych.

Wskaźniki internetowe

Problem z Chromium: nie dotyczy

Zgłaszanie błędów CORS w panelu Sieć

Narzędzia deweloperskie wyświetlają teraz błąd CORS, gdy żądanie sieciowe nie powiodło się z powodu współdzielenia zasobów między domenami.

W panelu Sieć sprawdź nieudane żądanie sieciowe CORS. W kolumnie stanu wyświetli się informacja „Błąd CORS”. Najedź kursorem na błąd. Etykietka zawiera teraz kod błędu. Wcześniej w przypadku błędów CORS Narzędzia deweloperskie wyświetlały tylko ogólny stan „(niepowodzenie)”.

Stanowi to podstawę do wprowadzenia kolejnych ulepszeń w zakresie bardziej szczegółowego opisu problemów CORS.

Błędy CORS

Problem z Chromium: 1141824

Aktualizacje widoku szczegółów ramki

Informacje o izolacji zasobów z innych domen w widoku szczegółów ramki

Stan izolacji zasobów z innych domen jest teraz wyświetlany w sekcji Zabezpieczenia i izolacja.

Nowa sekcja Dostępność interfejsu API zawiera informacje o dostępności instancji SharedArrayBuffer (SAB) i o tym, czy można je udostępniać za pomocą postMessage().

Ostrzeżenie o wycofaniu pojawi się, jeśli SAB i postMessage() są obecnie dostępne, ale kontekst nie jest izolowany od zasobów z innych domen. Aby dowiedzieć się więcej o izolacji zasobów z innych domen i o tym, dlaczego będzie ona wymagana w przypadku takich funkcji jak SharedArrayBuffers, przeczytaj ten artykuł.

Informacje z innych domen

Problem w Chromium: 1139899

Informacje o nowych instancjach roboczych w widoku szczegółów ramki

W Narzędziach deweloperskich są teraz wyświetlane dedykowane instancje internetowe pod ramką, która powoduje ich utworzenie.

W panelu Aplikacja rozwiń ramkę przy użyciu instancji roboczych, a następnie wybierz ją w drzewie Instancje robocze, aby wyświetlić szczegóły tej instancji.

Informacje o instancjach roboczych

Problemy z Chromium: 1122507, 1051466

Wyświetlaj szczegóły ramki otwierającej w przypadku otwartych okien

Możesz teraz zobaczyć szczegóły na temat tego, która ramka spowodowała otwarcie innego okna.

Wybierz otwarte okno w drzewie Klatki, aby wyświetlić szczegóły okna. Kliknij link Ramka otwierającego, aby wyświetlić element otwierający w panelu Elementy.

Szczegóły ramki otwierającego

Problem w Chromium: 1107766

Otwórz panel Network z panelu Service Workers

Nowy link Żądania sieciowe umożliwia wyświetlanie informacji o routingu wszystkich żądań mechanizmów Service Worker (SW). Zapewnia to deweloperom dodatkowy kontekst podczas debugowania oprogramowania.

Otwórz Application (Aplikacja) > Service Workers (Skrypty service worker) i kliknij Żądania sieciowe oprogramowania. W dolnym panelu jest otwarty panel Sieć, na którym wyświetlane są wszystkie żądania związane z skryptami service worker (żądania sieciowe są filtrowane według parametru "is:service-worker-intercepted").

Otwórz panel Sieć z poziomu mechanizmów Service Worker

Problem z Chromium: nie dotyczy

Nowe opcje kopiowania w panelu Sieć

Skopiuj wartość właściwości

Nowa opcja „Kopiuj wartość” w menu kontekstowym umożliwia kopiowanie wartości właściwości z żądania sieciowego.

Skopiuj wartość właściwości

W panelu Sieć kliknij żądanie sieciowe, aby otworzyć panel Nagłówki. Kliknij prawym przyciskiem myszy jedną z właściwości w tej sekcji: Parametry zapytania ciągu danych formularza żądania (JSON) Form Data Query Request Headers Response Headers

Następnie możesz kliknąć Kopiuj wartość, aby skopiować wartość właściwości do schowka.

Problem z Chromium: 1132084

Skopiuj zrzut stosu dla inicjatora sieci

Kliknij żądanie sieciowe prawym przyciskiem myszy, a następnie wybierz Kopiuj zrzut stosu, aby skopiować zrzut stosu do schowka.

Skopiuj zrzut stosu

Problem z Chromium: 1139615

Aktualizacje dotyczące debugowania Wasm

Wyświetl podgląd wartości zmiennej Wasm po najechaniu na nie kursorem myszy

Po najechaniu kursorem na zmienną w demontażu WebAssembly (Wasm) po wstrzymaniu w punkcie przerwania Narzędzia deweloperskie pokazują teraz bieżącą wartość zmiennej.

W panelu Źródła otwórz plik Wasm, umieść punkt przerwania i odśwież stronę. Najedź na zmienną, aby zobaczyć jej wartość.

Wyświetl podgląd zmiennej Wasm po najechaniu na nie kursorem myszy

Problemy z Chromium: 1058836, 1071432

Oceń zmienną Wasm w konsoli

Możesz teraz ocenić zmienną Wasm w konsoli, gdy jest ona wstrzymana w punkcie przerwania.

W tym przykładzie umieściliśmy punkt przerwania w wierszu local.get $input. Podczas debugowania wpisz w konsoli $input, który zwróci bieżącą wartość zmiennej, czyli w tym przypadku 4.

Oceń zmienną Wasm w konsoli

Problem z Chromium: 1127914

Spójne jednostki miary rozmiaru plików/pamięci

Obecnie w Narzędziach deweloperskich wyświetlane są rozmiary plików i pamięci w kB. Wcześniej w Narzędziach deweloperskich były łączone kB (1000 bajtów) i KiB (1024 bajty). Na przykład w panelu Sieć poprzednio używane były etykiety „kB”, ale obliczenia odbywały się przy użyciu KiB, co powodowało niepotrzebne dezorientacje.

Problem w Chromium: 1035309

Podświetl pseudoelementy w panelu Elementy

Zwiększyły one kontrast kolorów pseudoelementów, aby ułatwić ich rozpoznanie.

Podświetl pseudoelementy

Problem z Chromium: 1143833

Funkcje eksperymentalne

Narzędzia do debugowania CSS Flexbox

Wkrótce udostępnimy narzędzia do debugowania Flexbox!

Na początek w Narzędziach deweloperskich w panelu Elementy wyświetlają się teraz plakietkę flex w przypadku elementów z zastosowanym ustawieniem display: flex.

Poza tym nowe ikony wyrównania są dodawane we właściwościach elementów Flexbox:

  • flex-direction
  • align-items
  • align-content
  • align-self
  • justify-items
  • justify-content

Ponadto te ikony są zależne od kontekstu. Kierunek ikony zostanie dostosowany w następujący sposób:

  • flex-direction
  • direction
  • writing-mode

Te ikony mają pomagać w lepszej wizualizacji układu strony (flexbox).

Debugowanie CSS Flex

Oto dokumentacja projektu z funkcjami narzędzi Flexbox. Wkrótce dodamy więcej funkcji.

Wypróbuj tę funkcję i daj nam znać, co o niej myślisz.

Problemy z Chromium: 1144090, 1139945

Dostosuj skróty klawiszowe akordów

Od ostatniej wersji Narzędzia deweloperskie dodały eksperymentalną obsługę dostosowywania skrótów klawiszowych.

Możesz teraz tworzyć akordy (skróty obsługiwane przez naciśnięcie kilku klawiszy) w edytorze skrótów.

Otwórz Ustawienia > Skróty, najedź kursorem na polecenie i kliknij przycisk Edytuj (ikona pióra), aby dostosować skrót do akordów.

Skróty klawiszowe akordów

Problem z Chromium: 174309

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