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.

Kąt CSS

Gdy element HTML na stronie ma zastosowany kąt CSS (np. background: linear-gradient(angle, color-stop1, color-stop2), transform: rotate(angle)), obok kąta w panelu Styli 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 lub przeciągnij wskazówkę.

Wartość kąta można też zmienić za pomocą skrótów klawiszowych i myszy. Więcej informacji znajdziesz w naszej dokumentacji.

Problemy z Chromium: 1126178, 1138633

Emulowanie nieobsługiwanych typów 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 ten kod HTML, który służy do wyświetlania obrazu w formacie AVIF i WebP w nowszych przeglądarkach, a w starszych przeglądarkach jest obraz PNG.

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

Emulowanie typów obrazów

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. Dzięki tej funkcji możesz symulować działanie różnych urządzeń i testować działanie aplikacji w sytuacjach niskiej dostępnej przestrzeni na dysku.

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

Symulowanie rozmiaru limitu miejsca na dane

Problemy z Chromium: 945786, 1146985

Nowy pasek Web Vitals w nagraniach w panelu Wydajność

W nagraniach dotyczących wydajnoś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.

Pasek podstawowych 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 zakończy się niepowodzeniem z powodu współdzielenia zasobów między serwerami (CORS).

W panelu Sieć sprawdź nieudane żądanie sieciowe CORS. W kolumnie „Stan” widać 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ę naszych kolejnych ulepszeń, które zapewnią bardziej szczegółowy opis problemów z CORS.

Błędy 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. Więcej informacji o izolacji witryn z innych domen i o tym, dlaczego będzie ona wymagana w przypadku funkcji takich jak SharedArrayBuffers, znajdziesz w tym artykule.

Informacje o dostępie między domenami

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.

Informacje o procesach internetowych

Problemy z Chromium: 1122507, 1051466

Wyświetlanie szczegółów ramki otwierającej w otwartych oknach

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

Wybierz otwarte okno w drzewie Ramki, aby wyświetlić szczegóły okna. Kliknij link Wprowadzenie (ramka), aby wyświetlić wprowadzenie w panelu Elementy.

Szczegóły ramki otwierającej

Problem z Chromium: 1107766

Otwieranie panelu Sieć z panelu Service Workers

Wyświetlaj wszystkie informacje o przekierowywaniu żądań do usług działających w tle (SW) za pomocą nowego linku Żądania sieciowe. Dzięki temu deweloperzy mają więcej informacji podczas debugowania SW.

Kliknij Aplikacja > Workery usługi, a potem Prośby o dostęp do sieci w workerze usługi. W dolnym panelu otwiera się panel Sieć z wszystkimi żądaniami związanymi z usługami działającymi w tle (żądania sieci są filtrowane według parametru "is:service-worker-intercepted").

Otwieranie panelu Sieć z poziomu usług działających w tle

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.

Kopiowanie wartości 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 tych sekcjach: ładunek żądania (JSON), dane formularza, parametry ciągu kwerendy, nagłówki żądania, nagłówki odpowiedzi.

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.

Kopiowanie zrzutu stosu

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ź kursorem na zmienną, aby wyświetlić jej wartość.

Podgląd zmiennej Wasm po najechaniu kursorem

Problemy z Chromium: 1058836, 1071432

Obliczanie zmiennej Wasm w konsoli

Teraz możesz oceniać zmienną Wasm w Konsoli podczas wstrzymywania na punkcie kontrolnym.

W tym przykładzie punkt przerwania znajduje się w wierszu local.get $input. Podczas debugowania wpisanie $inputw Konsoli spowoduje zwrócenie bieżącej wartości zmiennej, która w tym przypadku wynosi 4.

Obliczanie zmiennej Wasm w konsoli

Problem z Chromium: 1127914

Stałe jednostki miary 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świetlanie pseudoelementów w panelu Elementy

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

Podświetlanie pseudoelementów

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.

Oprócz tego do tych właściwości flexboxa dodano nowe ikony wyrównania:

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

Debugowanie CSS Flex

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

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

Skróty klawiszowe dotyczące akordów

Problem z Chromium: 174309

Pobieranie kanałów podglądu

Rozważ użycie jako domyślnej przeglądarki deweloperskiej wersji Canary, Dev lub Beta przeglądarki Chrome. 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

Aby omówić nowe funkcje, aktualizacje lub inne kwestie związane z Narzędziami deweloperskimi, skorzystaj z tych opcji.

Co nowego w Narzędziach deweloperskich

Lista wszystkich tematów omawianych w cyklu artykułów Co nowego w Narzędziach deweloperskich.