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

Jecelyn Yeen

Szybsze uruchamianie Narzędzi deweloperskich

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

Zespół przeprowadził optymalizację, aby zmniejszyć obciążenie wydajności związane z serializacją, analizowaniem i deserializacją podczas uruchamiania.

Wkrótce opublikujemy post na blogu dla inżynierów, w którym szczegółowo wyjaśnimy implementację. Więcej informacji już wkrótce.

Problem w Chromium: 1029427

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

Narzędzia deweloperskie lepiej obsługują teraz debugowanie kątów CSS.

Gdy do elementu HTML na stronie zastosowany jest 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ć lub wyłączyć nakładkę zegara. Kliknij dowolne miejsce na zegarze lub przeciągnij wskazówkę, aby zmienić kąt.

Istnieją też skróty klawiszowe i skróty myszy, które umożliwiają zmianę wartości kąta. Więcej informacji znajdziesz w naszej dokumentacji.

Problemy z Chromium: 1126178, 1138633

Emulowanie nieobsługiwanych typów obrazów

W narzędziach deweloperskich dodaliśmy 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 wyświetla obraz w formatach AVIF i WebP w nowszych przeglądarkach, a w starszych przeglądarkach wyświetla 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ę Renderowanie, wybierz „Wyłącz format obrazu AVIF” i odśwież stronę. Najedź kursorem na img src. Aktualne źródło obrazu (currentSrc) jest teraz obrazem WebP, który jest używany w przypadku braku obsługi.

Problem z Chromium: 1130556

Symulowanie rozmiaru limitu miejsca na dane w panelu Pamięć

W panelu Pamięć 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 scenariuszach z małą ilością miejsca na dysku.

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

Problemy z Chromium: 945786, 1146985

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

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

Po zarejestrowaniu wydajności ładowania zaznacz pole wyboru Web Vitals w panelu Wydajność, aby wyświetlić nowy pas Web Vitals.

Obecnie w tym wierszu wyświetlane są informacje o wskaźnikach internetowych, takie jak pierwsze wyrenderowanie treści (FCP), największe wyrenderowanie treści (LCP) i przesunięcie układu (LS).

Więcej informacji o tym, jak optymalizować wrażenia użytkowników za pomocą danych Web Vitals, znajdziesz na stronie 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 powiedzie się z powodu współdzielenia zasobów między serwerami z różnych domen (CORS).

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

To podstawa do wprowadzenia kolejnych ulepszeń, które pozwolą nam dostarczać bardziej szczegółowe opisy problemów z CORS.

Problem w Chromium: 1141824

Aktualizacje widoku szczegółów ramki

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

Stan izolacji od innych domen jest teraz wyświetlany w sekcji Zabezpieczenia i izolacja.

W nowej sekcji Dostępność interfejsu API wyświetla się dostępność SharedArrayBuffer (SAB) i informacja, czy można je udostępniać za pomocą postMessage().

Jeśli SAB i postMessage() są obecnie dostępne, ale kontekst nie jest izolowany od zasobów z innych domen, wyświetli się ostrzeżenie o wycofaniu. Więcej informacji o izolacji witryny od zasobów z innych domen i o tym, dlaczego będzie ona wymagana w przypadku funkcji takich jak SharedArrayBuffers, znajdziesz w tym artykule.

Problem w Chromium: 1139899

Nowe informacje o Web Workerach w widoku szczegółów ramki

Narzędzia deweloperskie wyświetlają teraz wyznaczone instancje robocze w ramce, która je tworzy.

W panelu Aplikacja rozwiń ramkę z procesami roboczymi, a następnie wybierz proces roboczy w drzewie Procesy robocze, aby wyświetlić jego szczegóły.

Problemy z Chromium: 1122507, 1051466

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

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

Wybierz otwarte okno w drzewie Frames, aby wyświetlić szczegóły okna. Kliknij link Opener Frame, aby pokazać otwierający w panelu Elementy.

Problem w Chromium: 1107766

Otwieranie panelu Sieć z okienka Service Workers

Wyświetl wszystkie informacje o kierowaniu żądań do komponentu Service Worker (SW) za pomocą nowego linku Żądania sieciowe. Dzięki temu programiści mają dodatkowy kontekst podczas debugowania SW.

Otwórz Aplikacja > Service Workers i kliknij Żądania sieciowe w przypadku SW. W dolnym panelu otworzy się panel Sieć, w którym będą wyświetlane wszystkie żądania związane z service workerem (żądania sieciowe są filtrowane według "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 skopiowanie wartości właściwości żądania sieciowego.

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

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

Problem w Chromium: 1132084

Kopiowanie zrzutu stosu inicjatora sieci

Kliknij prawym przyciskiem myszy żądanie sieciowe, a następnie wybierz Copy stacktrace (Skopiuj ślad stosu), aby skopiować ślad stosu do schowka.

Problem w Chromium: 1139615

Aktualizacje debugowania Wasm

Wyświetlanie podglądu wartości zmiennej Wasm po najechaniu kursorem

Gdy zatrzymasz debugowanie w punkcie przerwania i najedziesz kursorem na zmienną w dezasemblacji WebAssembly (Wasm), DevTools wyświetli jej bieżącą wartość.

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

Problemy z Chromium: 1058836, 1071432

Sprawdzanie zmiennej Wasm w konsoli

Możesz teraz oceniać zmienną Wasm w konsoli, gdy program jest wstrzymany w punkcie przerwania.

W tym przykładzie umieszczamy punkt przerwania w wierszu local.get $input. Podczas debugowania wpisanie w konsoli $input zwróci bieżącą wartość zmiennej, która w tym przypadku wynosi 4.

Problem w Chromium: 1127914

Spójne jednostki miary rozmiarów plików i pamięci

Narzędzia deweloperskie konsekwentnie używają kB do wyświetlania rozmiarów plików i pamięci. Wcześniej Narzędzia dla programistów używały zamiennie 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 przy użyciu KiB, co powodowało niepotrzebne zamieszanie.

Problem w Chromium: 1035309

Wyróżnianie pseudoelementów w panelu Elementy

W Narzędziach deweloperskich zwiększyliśmy kontrast kolorów pseudoelementów, aby ułatwić ich rozpoznawanie.

Problem w Chromium: 1143833

Funkcje eksperymentalne

Narzędzia do debugowania CSS Flexbox

Narzędzia do debugowania układu flexbox już wkrótce!

Na początek w panelu Elementy narzędzia deweloperskie wyświetlają teraz plakietkę flex w przypadku elementów, do których zastosowano display: flex.

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

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

Dodatkowo ikony te są dostosowane do kontekstu. Kierunek ikony zostanie dostosowany zgodnie z:

• flex-direction
• direction
• writing-mode

Te ikony pomagają lepiej wizualizować układ flexbox strony.

Tutaj znajdziesz dokument projektowy funkcji narzędzi Flexbox. Wkrótce dodamy więcej funkcji.

Wypróbuj go i daj nam znać, co o nim sądzisz.

Problemy z Chromium: 1144090, 1139945

Dostosowywanie skrótów klawiszowych akordów

Od ostatniej wersji narzędzia DevTools eksperymentalnie obsługują 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 (ikonę ołówka), aby dostosować skrót klawiszowy.

Problem w Chromium: 174309

Pobieranie kanałów podglądu

Rozważ używanie Chrome w wersji Canary, deweloperskiej lub beta jako domyślnej przeglądarki do programowania. Te kanały wersji testowych zapewniają dostęp do najnowszych funkcji Narzędzi deweloperskich, umożliwiają testowanie najnowocześniejszych interfejsów API platformy internetowej i pomagają znajdować problemy w witrynie, zanim zrobią to użytkownicy.

Skontaktuj się z zespołem Narzędzi deweloperskich w Chrome

Skorzystaj z tych opcji, aby porozmawiać o nowych funkcjach, aktualizacjach lub innych kwestiach związanych z Narzędziami deweloperskimi.

• Prześlij nam opinię i prośby o dodanie funkcji na stronie crbug.com.
• Zgłoś problem z Narzędziami deweloperskimi, klikając more_vert Więcej opcji > Pomoc > Zgłoś problem z Narzędziami deweloperskimi w Narzędziach deweloperskich.
• Wyślij tweeta do @ChromeDevTools.
• Zostawiaj komentarze pod filmami na YouTube z serii „Co nowego w Narzędziach deweloperskich” lub filmami z serii „Wskazówki dotyczące Narzędzi deweloperskich”.

Co nowego w Narzędziach deweloperskich

Lista wszystkich tematów omówionych w serii Nowości w Narzędziach deweloperskich.