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

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 deserializacja podczas uruchamiania.

Na blogu dla inżynierów opublikujemy posta na temat szczegółowego wdrożenia. Więcej informacji już wkrótce.

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.

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

Istnieją też skróty klawiszowe umożliwiające zmianę wartości kąta dokumentacja.

Problemy z Chromium: 1126178, 1138633

Emuluj nieobsługiwane typy obrazów

W Narzędziach deweloperskich na karcie Renderowanie dodano 2 nowe emulacje umożliwiające wyłączenie obrazów AVIF i WebP formatów reklam. Te nowe emulacje ułatwiają programistom testowanie różnych opcji wczytywania obrazów. bez konieczności przełączania się między przeglądarką.

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

<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 i wybierz „Wyłącz format obrazu AVIF”. i odśwież stronę. Najedź kursorem myszy na ikonę img src Zasób bieżącego obrazu (currentSrc) jest teraz obrazem zastępczym WebP.

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 umożliwia: symulować różne urządzenia i testować działanie aplikacji w sytuacjach, gdy jest mało miejsca na dysku.

Otwórz Aplikacja > Miejsce na dane, zaznacz pole wyboru Symuluj niestandardowy limit miejsca na dane oraz wpisz dowolną prawidłową liczbę, aby zasymulować limit 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 poznać nowe wskaźniki internetowe.

Na pasie są obecnie wyświetlane informacje o wskaźnikach internetowych, takie 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 w internecie. Wskaźniki życiowe.

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 udostępniania zasobów między domenami (CORS).

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

Stanowią one podstawę dla naszych kolejnych ulepszeń w zakresie bardziej szczegółowego opisu Problemy 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 Izolacja.

Nowa sekcja Dostępność interfejsu API wyświetla dostępność SharedArrayBuffer (SAB) i czy można je udostępniać przy użyciu postMessage().

Jeśli SAB i postMessage() są obecnie dostępne, pojawi się ostrzeżenie o wycofaniu, ale nie jest izolowany od zasobów z innych domen. Dowiedz się więcej o izolacji zasobów z innych domen i powodach jej występowania wymagane w przypadku funkcji takich jak SharedArrayBuffers opisanych w tym artykule.

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ę zawierającą instancje robocze, a następnie wybierz instancję w obszarze Drzewo instancji roboczych, aby wyświetlić szczegóły instancji roboczej.

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 przycisk Otwórz Ramka, aby wyświetlić element otwierający w panelu Elementy.

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 Aplikacja > Service Workers, kliknij Żądania sieciowe oprogramowania. W dolnym panelu jest otwarty panel Sieć, na którym wyświetlane są wszystkie żądania związane z skrypcją service worker ( żądania sieciowe są filtrowane według parametru "is:service-worker-intercepted").

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 sieci. użytkownika.

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 z ładunku danych żądania (JSON) formularza zapytania w formularzu. Nagłówki odpowiedzi w nagłówkach żądań

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 prawym przyciskiem myszy żądanie sieciowe, a następnie wybierz Kopiuj zrzut stosu, aby skopiować zrzut stosu do schowku.

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 rozwiązaniu WebAssembly (Wasm) przy 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ź kursorem na , 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 umieściliśmy punkt przerwania w wierszu local.get $input. Podczas debugowania wpisz $input w konsoli zwróci bieżącą wartość zmiennej, którą w tym przypadku jest 4.

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. Poprzednio mieszane Narzędzia deweloperskie (kB) (1000 bajtów) i KiB (1024 bajty). Na przykład w panelu Sieć poprzednio używana była „kB” etykiety, ale przeprowadził obliczenia przy użyciu KiB, co powodowało niepotrzebne dezorientację.

Problem w Chromium: 1035309

Podświetl pseudoelementy w panelu Elementy

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

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świetla się teraz plakietka flex Zastosowano 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).

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 po najechaniu kursorem na polecenie i kliknięciu przycisku Edytuj (ikona pióra). aby dostosować skrót do 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   > Pomoc > Zgłoś problemy z Narzędziami deweloperskimi w Narzędziach deweloperskich.
• Opublikuj tweeta na stronie @ChromeDevTools.
• Napisz komentarz w filmach w YouTube o nowościach w Narzędziach deweloperskich lub o 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.