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.

Kąt 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.

Emuluj typy obrazów

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.

Symuluj rozmiar limitu 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.

Wskaźniki internetowe

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!

Błędy 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.

Informacje z innych domen

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.

Informacje o instancjach roboczych

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.

Szczegóły ramki otwierającego

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 &quot;is:service-worker-intercepted&quot;).

Otwórz panel Sieć z poziomu mechanizmów Service Worker

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.

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

Skopiuj zrzut stosu

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

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

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.

Oceń zmienną Wasm w konsoli

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.

Podświetl pseudoelementy

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

Debugowanie CSS Flex

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.

Skróty klawiszowe 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   Więcej > 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.