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

Kayce Basques

Rozwiązywanie problemów z witryną dzięki nowej karcie Problemy

Nowa karta Problemy w panelu ma pomóc ograniczyć zmęczenie i bałagan na ekranie Konsola. Obecnie konsola to główne miejsce dla programistów stron internetowych, bibliotek, oraz samą przeglądarkę Chrome do rejestrowania komunikatów, ostrzeżeń i błędów. Na karcie Problemy znajdziesz ostrzeżenia z przeglądarki w uporządkowany, zagregowany i praktyczny sposób, zawierają linki do stron, których dotyczy problem. w Narzędziach deweloperskich, a także wskazówki dotyczące rozwiązywania problemów. Z biegiem czasu i coraz więcej ostrzeżenia Chrome będą widoczne na karcie Problemy, a nie w konsoli, co powinno pomóc porządek w konsoli.

Na początek zapoznaj się z artykułem Wykrywaj i rozwiąż problemy z kartą Problemy w Narzędziach deweloperskich w Chrome.

Karta Problemy.

Błąd Chromium: #1068116

Wyświetlanie informacji o ułatwieniach dostępu na etykietce trybu inspekcji

Etykieta trybu inspekcji wskazuje teraz, czy element ma dostępną nazwę i rolę i można korzystać z klawiatury.

Etykietka trybu inspekcji z informacjami o ułatwieniach dostępu.

Błąd Chromium: #1040025

Aktualizacje panelu wydajności

Wyświetlanie informacji o całkowitym czasie blokowania (TBT) w stopce

Po zarejestrowaniu wydajności wczytywania w panelu Wydajność zobaczysz teraz wartość Całkowity czas blokowania. (do ustalenia) w stopce. TBT to wskaźnik wydajności wczytywania, który pozwala zmierzyć, jak długo potrzebuje tylko jednej strony. Mierzy zasadniczo, jak długo strona wygląda na użyteczna (ponieważ treść została wyrenderowana na ekranie), ale nie można jej używać, ponieważ JavaScript blokuje wątek główny i dlatego strona nie może odpowiedzieć na dane wejściowe użytkownika. Do ustalenia jest głównym modułem , który pozwala oszacować opóźnienie przy pierwszym działaniu, które jest jednym z nowych podstawowych wskaźników internetowych Google.

Aby uzyskać informacje o całkowitym czasie blokowania, nie używaj opcji Załaduj ponownie stronę. Załaduj ponownie stronę do rejestrowania wydajności wczytywania stron. Zamiast tego kliknij Nagraj, Rekord, ręcznie załadować ponownie stronę, poczekać na wczytanie strony, a następnie zatrzymać rejestrowanie. Jeśli zobaczysz komunikat Total Blocking Time: Unavailable oznacza, że Narzędzia deweloperskie nie uzyskały potrzebnych informacji Wewnętrzne dane profilowania Chrome.

Informacje o łącznym czasie blokowania w stopce nagrania w panelu wydajności.

Błąd Chromium: #1054381

Zdarzenia przesunięcia układu w nowej sekcji o wersji

Nowa sekcja Informacje o wersji w panelu Skuteczność pomoże Ci wykrywać zmiany układu. Skumulowane przesunięcie układu (CLS) to dane, które pomagają mierzyć niepożądaną niestabilność wizualną to jeden z nowych podstawowych wskaźników internetowych Google.

Aby zobaczyć szczegóły przesunięcia układu na karcie Podsumowanie, kliknij zdarzenie Przesunięcie układu. Najechanie nad polami Przeniesiono z i Przeniesiono do, by zobaczyć, gdzie doszło do przesunięcia układu.

Szczegóły przesunięcia układu.

Bardziej precyzyjna terminologia związana z obietnicami w konsoli

Podczas logowania zasobu Promise konsola nieprawidłowo opisała stan Promise jako resolved:

Przykład konsoli przy użyciu starego rozwiązania „rozstrzygnięte” terminologii.

Konsola używa teraz terminu fulfilled, który jest zgodny ze specyfikacją Promise:

Przykład konsoli z nowym parametrem „fulfill” terminologii.

Błąd V8: #6751

Aktualizacje panelu Style

Obsługa słowa kluczowego revert

Interfejs autouzupełniania panelu Style wykrywa teraz słowo kluczowe CSS revert, które cofa atrybut jest kaskadą wartości właściwości, która zostałaby ustawiona, gdyby w obiekcie stylu elementu.

Ustawianie wartości właściwości do cofnięcia.

Błąd Chromium: #1075437

Podglądy obrazów

Najedź kursorem na wartość background-image w panelu Style, aby wyświetlić podgląd obrazu w etykietce.

Najechanie kursorem na wartość obrazu tła.

Błąd Chromium: #1040019

Selektor kolorów korzysta teraz z funkcjonalnego zapisu kolorów rozdzielonego spacjami

CSS Color Module Level 4 określa, że funkcje kolorów takie jak rgb() powinny obsługiwać argumentów rozdzielanych spacjami. Na przykład rgb(0, 0, 0) jest odpowiednikiem rgb(0 0 0).

Wybierając kolory za pomocą selektora kolorów lub przełączaj się między reprezentacjami kolorów w W panelu Style, przytrzymując klawisz Shift i klikając wartość koloru, zobaczysz rozdzielone spacjami składni argumentów.

Używanie rozdzielonych spacjami argumentów w panelu Style.

Zobaczysz także składnię w panelu Obliczone i etykietę trybu inspekcji.

Narzędzia deweloperskie używają nowej składni, ponieważ nadchodzące funkcje CSS, takie jak color(), nie obsługują wycofanej składni argumentów rozdzielanych przecinkami.

Składnia argumentów rozdzielanych spacjami jest obsługiwana w większości przeglądarek już od jakiegoś czasu. Zapoznaj się z sekcją Czy mogę używać Rozdzielane spacjami funkcjonalne zapisy kolorów?

Błąd Chromium: #1072952

Wycofanie panelu Właściwości z panelu Elementy

Panel Właściwości w panelu Elementy został wycofany. Uruchom console.dir($0) w Konsola.

Wycofany panel Właściwości.

Źródła:

Obsługa skrótów do aplikacji w panelu pliku manifestu

Skróty do aplikacji ułatwiają użytkownikom szybkie wykonywanie typowych lub zalecanych zadań w aplikacji internetowej. Aplikacja menu skrótów jest widoczne tylko w przypadku progresywnych aplikacji internetowych zainstalowanych na komputerze użytkownika urządzenia mobilnego.

Więcej informacji znajdziesz w artykule Szybkie wykonywanie zadań dzięki skrótom do aplikacji.

Skróty do aplikacji w panelu manifestu.

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.