Ta strona została przetłumaczona przez Cloud Translation API.

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 ułatwia uporządkowanie powiadomień i usprawnienie interfejsu w konsoli. Obecnie konsola jest głównym miejscem dla programistów stron internetowych, bibliotek, ram, a także samego Chrome do rejestrowania komunikatów, ostrzeżeń i błędów. Karta Problemy zawiera ostrzeżenia przeglądarki w uporządkowany, zagregowany i przydatny sposób, a także linki do zasobów, których dotyczy problem, dostępnych w Narzędziach deweloperskich oraz wskazówki dotyczące rozwiązywania problemów. Z czasem coraz więcej ostrzeżeń Chrome będzie pojawiać się na karcie Problemy, a nie w Konsoli, co powinno poprawić przejrzystość konsoli.

Na początek zapoznaj się z artykułem Znajdowanie i rozwiązywanie problemów na karcie Problemy z Narzędziami deweloperskimi w Chrome.

Karta Problemy.

Błąd Chromium: #1068116

Etykieta trybu inspekcji wskazuje teraz, czy element ma dostępną nazwę i rolę oraz umożliwia zaznaczenie klawiatury.

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

Błąd Chromium: #1040025

Aktualizacje panelu wydajności

Wyświetl informacje o całkowitym czasie blokowania (TBT) w stopce

Po zarejestrowaniu szybkości wczytywania w panelu Skuteczność w stopce widać teraz informacje o całkowitym czasie blokowania (TBT). TBT to wskaźnik wydajności wczytywania, który pomaga w liczbie czasu potrzebnego na użyteczność strony. Zasadniczo określa on, jak długo strona wydaje się być przydatna (ponieważ jej treść została wyrenderowana na ekranie), ale w rzeczywistości nie nadaje się do użytku, bo JavaScript blokuje główny wątek i dlatego nie może reagować na działania użytkownika. TBT to główne dane laboratoryjne służące do oszacowania opóźnienia 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 procesu Załaduj ponownie stronę. Rejestruj szybkość wczytywania strony. Zamiast tego kliknij Nagraj Rekord , ręcznie załaduj stronę ponownie, poczekaj na wczytanie, a potem zatrzymaj nagrywanie. Jeśli widzisz Total Blocking Time: Unavailable, oznacza to, że Narzędzia deweloperskie nie uzyskały potrzebnych informacji z wewnętrznych danych profilowania Chrome.

informacje o całkowitym czasie blokowania w stopce nagrania w panelu Skuteczność.

Błąd Chromium: #1054381

Zdarzenia przesunięcia układu w nowej sekcji „Doświadczenie”

Nowa sekcja Możliwości w panelu Skuteczność pomoże Ci wykrywać zmiany układu. Skumulowane przesunięcie układu (CLS) to wartość, która pomaga określić ilość niepożądanej niestabilności wizualnej. Jest jednym z nowych podstawowych wskaźników internetowych Google.

Kliknij zdarzenie Przesunięcie układu, aby zobaczyć szczegóły przesunięcia układu na karcie Podsumowanie. Najedź kursorem na pola Przeniesiono z i Przeniesiono do, aby zobaczyć, gdzie miało miejsce przesunięcie układu.

Szczegóły przesunięcia układu.

Dokładniejsza terminologia dotycząca obietnic w konsoli

Podczas logowania Promise konsola nieprawidłowo opisywała stan obiektu Promise jako resolved:

Przykład Konsoli Play z starą, „rozwiązaną” terminologią.

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

Przykład użycia w Konsoli nowej terminologii „zrealizowanej”.

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. Przywraca on kaskadową wartość właściwości do wartości, która byłaby taka, jaka byłaby wartość, gdyby nie wprowadzono żadnych zmian w stylu elementu.

Ustawienie wartości właściwości do przywrócenia.

Błąd Chromium: #1075437

Podgląd obrazów

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

Najedź kursorem na wartość obrazu tła.

Błąd Chromium: #1040019

Selektor kolorów korzysta teraz z funkcjonalnego zapisu kolorów w oddzielonych spacjach

Moduł kolorów CSS na poziomie 4 określa, że funkcje kolorów, takie jak rgb(), powinny obsługiwać argumenty rozdzielone spacjami. Na przykład rgb(0, 0, 0) jest odpowiednikiem funkcji rgb(0 0 0).

Po wybraniu kolorów za pomocą selektora kolorów lub po zmianie reprezentacji kolorów w panelu Style, przytrzymując Shift i klikając wartość koloru, wyświetli się składnia argumentu oddzielona spacjami.

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

Składnia jest też widoczna w panelu Obliczone i w etykietce Tryb 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 rozdzielonych spacjami jest już obsługiwana w większości przeglądarek. Zapoznaj się z sekcją Czy mogę użyć funkcjonalnych zapisów kolorów oddzielonych spacjami?

Błąd Chromium: #1072952

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

Panel Właściwości w panelu Elementy został wycofany. Zamiast tego uruchom console.dir($0) w konsoli.

Wycofany panel Właściwości.

Źródła:

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

Skróty do aplikacji pomagają użytkownikom szybko uruchamiać typowe lub zalecane zadania w aplikacji internetowej. Menu skrótów aplikacji jest widoczne tylko w przypadku progresywnych aplikacji internetowych, które są zainstalowane na komputerze lub urządzeniu mobilnym użytkownika.

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

Skróty do aplikacji w panelu pliku manifestu.

Pobieranie kanałów podglądu

Jako domyślnej przeglądarki dla programistów możesz używać Chrome Canary, Dev lub Beta. Te kanały podglądu dają dostęp do najnowszych funkcji Narzędzi deweloperskich, umożliwiają testowanie najnowocześniejszych interfejsów API platform internetowych oraz wykrywanie problemów w witrynie, zanim zdołają zrobić użytkownicy.

Kontakt z zespołem Narzędzi deweloperskich w Chrome

Użyj poniższych opcji, aby omówić nowe funkcje i zmiany w poście lub wszelkie inne kwestie związane z Narzędziami dla deweloperów.

Prześlij nam sugestię lub opinię na stronie crbug.com.
Aby zgłosić problem z Narzędziami deweloperskimi, kliknij Więcej opcji > Pomoc > Zgłoś problemy z Narzędziami deweloperskimi.
zatweetuj na @ChromeDevTools.
Napisz komentarz o nowościach w filmach w YouTube dostępnych w Narzędziach deweloperskich lub z poradami dotyczącymi narzędzi dla deweloperów w filmach w YouTube.

Co nowego w Narzędziach deweloperskich

Lista wszystkich omówionych funkcji w serii Co nowego w Narzędziach deweloperskich.

Chrome 123

Chrome 122

Chrome 121

Chrome 120

Chrome 119

Chrome 118

Chrome 117

Chrome 116

Chrome 115

Chrome 114

Chrome 113

Chrome 112

Chrome 111

Chrome 110

Chrome 109

Chrome 108

Chrome 107

Chrome 106

Chrome 105

Chrome 104

Chrome 103

Chrome 102

101 Chrome

Chrome 100

Chrome 99

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Chrome 93

Chrome 92

Chrome 91

Chrome 90

Chrome 89

Chrome 88

Chrome 87

Chrome 86

Chrome 85

Chrome 84

Chrome 83

Chrome 82

Subskrypcja Chrome 82 została anulowana.

Chrome 81

Chrome 80

Chrome 79

Chrome 78

Chrome 77

Chrome 76

Chrome 75

Chrome 74

Chrome 73

Chrome 72

Wizualizacja danych o skuteczności w panelu Skuteczność.
Podświetl węzły tekstowe w drzewie DOM
Skopiuj ścieżkę JS do węzła DOM.
Aktualizacje panelu audytu, w tym nowy audyt, który wykrywa biblioteki JS i nowe słowa kluczowe umożliwiające dostęp do panelu kontroli z menu poleceń.
Dodatkowa wskazówka: sprawdzaj zapytania o multimedia w trybie urządzenia (film)

Chrome 71

Najedź kursorem na wynik wyrażenia aktywnego, aby wyróżnić węzeł DOM.
Zapisywanie węzłów DOM jako zmiennych globalnych
Informacje o inicjatorze i priorytetach teraz w importach i eksportach plików HAR
Otwórz menu poleceń z menu głównego
Punkty przerwania obrazu w obrazie
Dodatkowa wskazówka: użyj pola monitorEvents() do rejestrowania zdarzeń wywoływanych przez węzeł w konsoli (film)