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

Jecelyn Yeen

Szybsze uruchamianie Narzędzi deweloperskich

Uruchomienie Narzędzi deweloperskich jest teraz o około 37% szybsze, jeśli chodzi o kompilację JavaScriptu (od 6,9 s do 5 s). 🎉

Zespół przeprowadził optymalizację, aby zmniejszyć koszty związane z serialacją, analizą i deerializacją w trakcie uruchamiania.

Niedługo zamieścimy na blogu dla inżynierów post z informacjami o implementacji. Więcej informacji już wkrótce.

Problem z Chromium: 1029427

Nowe narzędzia do wizualizacji kątów CSS

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

Kąt CSS

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

Dostępne są też skróty klawiszowe i myszki do zmiany wartości kąta. Więcej informacji znajdziesz w dokumentacji.

Problemy z Chromium: 1126178, 1138633

Emuluj nieobsługiwane typy obrazów

W Narzędziach deweloperskich dodaliśmy 2 nowe emulacje na karcie Renderowanie, co umożliwia wyłączenie formatów obrazów AVIF i WebP. Te nowe emulacje ułatwiają deweloperom testowanie różnych scen wczytywania obrazów bez konieczności zmiany przeglądarki.

Załóżmy, że mamy poniższy kod HTML do wyświetlania obrazu w formatach AVIF i WebP dla nowszych przeglądarek z zastępczym obrazem w formacie PNG przeznaczonym dla starszych przeglądarek.

<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 opcję „Wyłącz format obrazu AVIF” i odśwież stronę. Najedź kursorem na img src. Bieżące źródło obrazu (currentSrc) to teraz zastępczy obraz WebP.

Emuluj typy obrazów

Problem z Chromium: 1130556

Symulowanie rozmiaru limitu miejsca na dane w panelu Miejsce na dane

Rozmiar limitu miejsca na dane możesz teraz zastąpić w panelu Pamięć. Ta funkcja umożliwia symulowanie różnych urządzeń i testowanie działania aplikacji w przypadku małej dostępności dysku.

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

Symulowanie rozmiaru limitu miejsca na dane

Problemy z Chromium: 945786, 1146985

Nowa ścieżka wskaźników internetowych w nagraniach w panelu Skuteczność

Nagrania z wyników 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 obszar wskaźników internetowych.

Obecnie na tym pasie wyświetlają się informacje dotyczące wskaźników internetowych, np. pierwsze wyrenderowanie treści (FCP), największe wyrenderowanie treści (LCP) i przesunięcie układu (LS).

Wejdź na web.dev/vitals, aby dowiedzieć się więcej o optymalizacji wygody użytkowników za pomocą danych Web Vitals.

Pasmo wskaźników internetowych

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 (CORS).

W panelu Sieć zobacz nieudane żądanie sieciowe CORS. W kolumnie stanu widoczny jest komunikat „CORS”. Najedź kursorem na błąd. Etykietka zawiera kod błędu. Wcześniej w przypadku błędów CORS narzędzia deweloperskie wyświetlały tylko ogólny stan „(failed)”.

Służą one do przygotowania kolejnych ulepszeń, które umożliwiają bardziej szczegółowy opis problemów związanych z CORS.

Błędy CORS

Problem z Chromium: 1141824

Zmiany w widoku szczegółów ramki

Informacje o izolacji z innych domen w widoku szczegółów klatki

Stan izolacji od zasobów z innych domen wyświetla się teraz w sekcji Bezpieczeństwo i izolacja.

Nowa sekcja Dostępność interfejsu API wyświetla dostępność interfejsów SharedArrayBuffer (SAB) i określa, 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. Z tego artykułu dowiesz się więcej o izolacji zasobów z innych domen oraz o tym, dlaczego jest ona wymagana w przypadku funkcji takich jak SharedArrayBuffers.

Informacje z innych domen

Problem z Chromium: 1139899

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

W Narzędziach deweloperskich w ramce, która je tworzy, wyświetlane są teraz dedykowane instancje robocze.

W panelu Aplikacja rozwiń ramkę ze skryptami roboczymi, a następnie wybierz instancję roboczą pod drzewem Workeries, aby wyświetlić szczegóły tej instancji roboczej.

Informacje o instancjach roboczych

Problemy z Chromium: 1122507, 1051466

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

Możesz teraz zobaczyć szczegółowe informacje o tym, która ramka spowodowała otwarcie innego okna.

Wybierz otwarte okno pod drzewem Ramki, aby wyświetlić jego szczegóły. Kliknij link Ramka otwierająca, aby wyświetlić okno, które otworzy się w panelu Elementy.

Szczegóły ramki otwierającego

Problem z Chromium: 1107766

Otwórz panel Network (Sieć) w panelu Skrypty service worker

Nowy link Żądania sieciowe pozwala wyświetlać wszystkie informacje o routingu żądań wysyłanych przez mechanizmy Service Worker (SW). Dzięki temu deweloperzy mają dodatkowy kontekst podczas debugowania oprogramowania.

Przejdź do Application > Service Workers i kliknij Network requests (Żądania sieciowe) oprogramowania SW. W dolnym panelu jest otwarty panel Sieć, w którym wyświetlane są wszystkie żądania związane z skryptem service worker (żądania sieciowe są filtrowane według elementu "is:service-worker-intercepted").

Otwórz panel Network (Sieć) w instancjach Service Worker

Problem z Chromium: nie dotyczy

Nowe opcje kopiowania w panelu Sieć

Kopiuj wartość właściwości

Nowa opcja „Kopiuj wartość” w menu kontekstowym pozwala skopiować wartość właściwości żądania sieciowego.

Kopiuj 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 sekcji „Żądanie ładunku” (JSON) – parametry ciągu zapytania dotyczącego danych formularza (nagłówki odpowiedzi)

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

Problem z Chromium: 1132084

Skopiuj zrzut stosu dla inicjatora sieci

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

Skopiuj zrzut stosu

Problem z Chromium: 1139615

Aktualizacje debugowania Wasm

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

Gdy najedziesz kursorem na zmienną w komponencie WebAssembly (Wasm) i zatrzymujesz ją w punkcie przerwania, DevTools pokazuje teraz bieżącą wartość zmiennej.

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

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

Problemy z Chromium: 1058836, 1071432

Ocena zmiennej Wasm w konsoli

Zmienną Wasm możesz teraz ocenić w konsoli, gdy wstrzymasz ją w punkcie przerwania.

W tym przykładzie punkt przerwania umieszczamy na linii local.get $input. Podczas debugowania wpisz w konsoli ciąg $input, aby zwrócić bieżącą wartość zmiennej, czyli w tym przypadku 4.

Ocena zmiennej Wasm w konsoli

Problem z Chromium: 1127914

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

Do wyświetlania rozmiarów plików/pamięci Narzędzia deweloperskie konsekwentnie używają teraz kB. Wcześniej narzędzia deweloperskie miały mieszane kB (1000 bajtów) i KiB (1024 bajty). Na przykład panel Sieć używał wcześniej etykiet „kB”, ale wykonujeł obliczenia przy użyciu KiB, co powodowało niepotrzebną dezorientację.

Problem z Chromium: 1035309

Podświetl pseudoelementy w panelu Elementy

W Narzędziach deweloperskich zwiększył kontrast kolorów pseudoelementów, aby można było je lepiej rozpoznać.

Podświetl pseudoelementy

Problem z Chromium: 1143833

Funkcje eksperymentalne

Narzędzia do debugowania CSS Flexbox

Już wkrótce pojawią się narzędzia do debugowania Flexbox!

Przede wszystkim w Narzędziach deweloperskich w panelu Elementy widać teraz plakietkę flex w przypadku elementów z zastosowaniem parametru display: flex.

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

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

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

  • flex-direction
  • direction
  • writing-mode

Te ikony mają pomóc Ci lepiej zwizualizować układ strony Flexbox.

Debugowanie CSS Flex

Oto dokumentacja projektu funkcji 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.

W edytorze skrótów możesz teraz tworzyć akordy (skróty klawiszowe obsługujące wiele klawiszy).

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

Skróty klawiszowe funkcji Czaty

Problem z Chromium: 174309

Pobieranie kanałów podglądu

Jako domyślnej przeglądarki dla programistów możesz używać Chrome Canary, Dev lub Beta. Te kanały podglądu dają dostęp do najnowszych funkcji Narzędzi deweloperskich, umożliwiają testowanie najnowocześniejszych interfejsów API platform internetowych oraz wykrywanie problemów w witrynie, zanim zdołają zrobić użytkownicy.

Kontakt z zespołem Narzędzi deweloperskich w Chrome

Użyj poniższych opcji, aby omówić nowe funkcje i zmiany w poście lub wszelkie inne kwestie związane z Narzędziami dla deweloperów.

  • Prześlij nam sugestię lub opinię na stronie crbug.com.
  • Aby zgłosić problem z Narzędziami deweloperskimi, kliknij Więcej opcji   Więcej   > Pomoc > Zgłoś problemy z Narzędziami deweloperskimi.
  • zatweetuj na @ChromeDevTools.
  • Napisz komentarz o nowościach w filmach w YouTube dostępnych w Narzędziach deweloperskich lub z poradami dotyczącymi narzędzi dla deweloperów w filmach w YouTube.

Co nowego w Narzędziach deweloperskich

Lista wszystkich omówionych funkcji w serii Co nowego w Narzędziach deweloperskich.

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

101 Chrome

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

Subskrypcja Chrome 82 została anulowana.

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