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

Jecelyn Yeen

Szybsze uruchamianie Narzędzi deweloperskich

Uruchomienie Narzędzi deweloperskich jest teraz o ok. 37% szybsze pod względem kompilacji JavaScriptu (z 6,9 s na 5 s). 🎉

Zespół przeprowadził optymalizację, aby zmniejszyć obciążenie wydajnościowe podczas uruchamiania, które jest związane z serializacją, analizą i deserializacją.

Wkrótce opublikujemy na blogu poświęconym zespołowi programistów szczegółowe informacje na temat tej implementacji. Więcej informacji już wkrótce.

Problem z Chromium: 1029427

Nowe narzędzia do wizualizacji kąta w usługach porównywania cen

Narzędzia deweloperskie oferują teraz lepszą obsługę debugowania w 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. Aby włączyć lub wyłączyć nakładkę zegara, kliknij ikonę zegara. Aby zmienić kąt, kliknij dowolne miejsce na tarczy zegara lub przeciągnij wskazówkę.

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 DevTools dodano 2 nowe emulacje na karcie Renderowanie, które umożliwiają wyłączenie formatów obrazów AVIF i WebP. Te nowe emulacje ułatwiają deweloperom testowanie różnych scenariuszy wczytywania obrazów bez konieczności przełączania przeglądarek.

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ę Wyświetlanie, wybierz „Wyłącz format obrazu AVIF” i odśwież stronę. Najedź kursorem na ikonę img src. Aktualne źródło obrazu (currentSrc) jest teraz obrazem WebP.

Problem z Chromium: 1130556

Symulowanie rozmiaru limitu miejsca na dane na karcie Miejsce na dane

W panelu Miejsce na dane możesz teraz zastąpić rozmiar limitu miejsca na dane. Ta funkcja umożliwia symulowanie różnych urządzeń i testowanie działania aplikacji w sytuacjach, gdy na dysku jest mało miejsca.

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

Problemy z Chromium: 945786, 1146985

Nowa ścieżka Web Vitals w nagraniach w panelu Wydajność

W nagraniach skuteczności można teraz wyświetlać informacje dotyczące podstawowych wskaźników internetowych.

Po zarejestrowaniu czasu wczytywania zaznacz pole wyboru Web Vitals w panelu Skuteczność, aby wyświetlić nowy pasek Web Vitals.

Obecnie zawiera on informacje o wskaźnikach Web Vitals, takie jak pierwsze wyrenderowanie treści (FCP), największe wyrenderowanie treści (LCP) i przesunięcie układu (LS).

Aby dowiedzieć się więcej o optymalizowaniu wygody użytkowników za pomocą danych Web Vitals, odwiedź stronę web.dev/vitals.

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, a w wyskakującym okienku zobaczysz kod błędu. Wcześniej w Narzędziach deweloperskich wyświetlano tylko ogólny stan „(failed)” w przypadku błędów CORS.

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

Problem z Chromium: 1141824

Aktualizacje widoku szczegółów ramki

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

Stan izolowania witryn z innych domen jest teraz wyświetlany w sekcji Zabezpieczenia i izolacja.

Nowa sekcja Dostępność interfejsu API pokazuje dostępność SharedArrayBuffer (SAB) oraz informuje, 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ł.

Problem z Chromium: 1139899

Nowe informacje o Web Workers w widoku Szczegóły ramki

Narzędzia deweloperskie wyświetlają teraz dedykowane procesy w sieci pod ramką, która je tworzy.

W panelu Aplikacja rozwiń ramkę z procesorami internetowymi, a następnie w drzewie Workers (Pracownicy) wybierz pracownika, aby wyświetlić jego szczegóły.

Problemy z Chromium: 1122507, 1051466

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

Możesz teraz wyświetlić szczegóły dotyczące tego, która ramka spowodowała otwarcie innego okna.

Aby wyświetlić szczegóły okna, wybierz otwarte okno w drzewie Ramki. Kliknij link Otwieracz w ramce, aby wyświetlić otwieracz w panelu Elementy.

Problem z Chromium: 1107766

Otwieranie panelu Sieć 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.

Kliknij Aplikacja > Workery usługi, a potem Prośby o dostęp do sieci w workerze usługi. W dolnym panelu otwierany jest 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").

Problem z Chromium: nie dotyczy

Nowe opcje kopiowania w panelu Sieć

Kopiowanie wartości właściwości

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

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

Kopiowanie zrzutu stosu dla inicjatora sieci

Kliknij żądanie sieci prawym przyciskiem myszy i wybierz Kopiuj ślad wywołania, aby skopiować ślad wywołania do schowka.

Problem z Chromium: 1139615

Aktualizacje dotyczące debugowania w Wasm

Podgląd wartości zmiennej Wasm po najechaniu kursorem

Gdy najedziesz kursorem na zmienną w rozpakowanym pliku WebAssembly (Wasm) podczas przerwania w punkcie przerwania, DevTools wyświetli 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ść.

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 punkt przerwania znajduje się w wierszu local.get $input. Podczas debugowania wpisz w konsoli $input, który zwróci bieżącą wartość zmiennej, czyli w tym przypadku 4.

Problem z Chromium: 1127914

Stałe jednostki miary dla rozmiarów plików i pamięci

Narzędzia deweloperskie wyświetlają teraz konsekwentnie rozmiary plików i pamięci w kilobajtach. Wcześniej w Narzędziach deweloperskich mieszano kB (1000 bajtów) i KiB (1024 bajty). Na przykład panel Sieć wcześniej używał etykiet „kB”, ale w rzeczywistości wykonywał obliczenia w KiB, co powodowało niepotrzebne zamieszanie.

Problem z Chromium: 1035309

Podświetl pseudoelementy w panelu Elementy

Narzędzie deweloperskie zwiększyło kontrast kolorów pseudoelementów, aby ułatwić ich zauważenie.

Problem z Chromium: 1143833

Funkcje eksperymentalne

Narzędzia do debugowania CSS Flexbox

Już wkrótce udostępnimy narzędzia do debugowania Flexboxa.

Po pierwsze, w panelu Elementy w Narzędziach deweloperskich wyświetla się plakietka flex w przypadku elementów z aplikowanym atrybutem 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

Co więcej, te ikony są kontekstowe. Kierunek ikony będzie dostosowywany zgodnie z:

• flex-direction
• direction
• writing-mode

Te ikony mają ułatwić wizualizację układu flexbox na stronie.

Oto dokument projektowy dotyczący funkcji narzędzi Flexbox. Wkrótce udostępnimy więcej funkcji.

Wypróbuj go i powiedz nam, co o nim myślisz.

Problemy z Chromium: 1144090, 1139945

Dostosowywanie skrótów klawiszowych akordów

Od ostatniej wersji DevTools obsługuje eksperymentalnie dostosowywanie skrótów klawiszowych.

W edytorze skrótów możesz teraz tworzyć akordy (czyli skróty z wieloma naciśnięciami klawiszy).

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

Problem z Chromium: 174309

Pobieranie kanałów podglądu

Rozważ użycie przeglądarki Chrome Canary, Dev lub Beta jako domyślnej przeglądarki deweloperskiej. Te kanały wersji wstępnej zapewniają dostęp do najnowszych funkcji DevTools, umożliwiają testowanie najnowocześniejszych interfejsów API platformy internetowej i pomagają znaleźć problemy w witrynie, zanim zrobią to użytkownicy.

Kontakt z zespołem Narzędzi deweloperskich w Chrome

Użyj poniższych opcji, aby omówić nowe funkcje, aktualizacje lub inne informacje związane z Narzędziami deweloperskimi.

• Przesyłaj opinie i prośby o dodanie funkcji na stronie crbug.com.
• Aby zgłosić problem z Narzędziami deweloperskimi, kliknij more_vert Więcej opcji > Pomoc > Zgłoś problem z Narzędziami deweloperskimi w Narzędziach deweloperskich.
• Wyślij tweeta do @ChromeDevTools.
• Napisz komentarz pod filmem Co nowego w Narzędziach deweloperskich w Narzędziach deweloperskich w YouTube lub filmach ze wskazówkami dotyczącymi Narzędzi deweloperskich w YouTube.

Co nowego w Narzędziach deweloperskich

Lista wszystkich tematów, które zostały omówione w serii Co nowego w Narzędziach deweloperskich.