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 sprawić, że powiadomienia w Konsoli będą bardziej przejrzyste. Obecnie konsola to główne miejsce dla programistów stron internetowych, bibliotek, platform oraz przeglądarki Chrome, w których mogą rejestrować komunikaty, ostrzeżenia i błędy. Karta Problemy przedstawia ostrzeżenia z przeglądarki w uporządkowany, zagregowany i praktyczny sposób, linki do odpowiednich materiałów w Narzędziach deweloperskich oraz wskazówki dotyczące rozwiązywania problemów. Z czasem na karcie Problemy będzie pojawiać się coraz więcej ostrzeżeń Chrome, a nie w Konsoli, co powinno pomóc w usuwaniu bałaganu 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ę oraz czy można go używać z klawiaturą.

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ść w stopce będą widoczne informacje o całkowitym czasie blokowania (TBT). TBT to wskaźnik wydajności wczytywania, który pozwala określić, ile czasu zajmuje korzystanie ze strony. Mierzy, jak długo strona wygląda jako użyteczna (ponieważ jej zawartość została wyrenderowana na ekranie), ale w rzeczywistości nie nadaje się, ponieważ JavaScript blokuje wątek główny i strona nie może reagować na dane wejściowe użytkownika. TBT to główne wskaźniki laboratoryjne do szacowania 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ę Załaduj ponownie stronę do rejestrowania wydajności wczytywania strony. Zamiast tego kliknij Nagraj Rekord, ręcznie załaduj ponownie stronę, poczekaj na wczytanie strony i zatrzymaj nagrywanie. Jeśli widzisz komunikat Total Blocking Time: Unavailable, oznacza to, że Narzędzia deweloperskie nie uzyskały potrzebnych informacji z wewnętrznych danych 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 wartość, która pomaga mierzyć niepożądaną niestabilność wizualną i jest jednym z nowych podstawowych wskaźników internetowych firmy Google.

Aby zobaczyć szczegóły przesunięcia układu na karcie Podsumowanie, kliknij zdarzenie Przesunięcie układu. Aby zobaczyć, gdzie doszło do przesunięcia układu, najedź kursorem na pola Przeniesiono z i Przeniesiono do.

Szczegóły przesunięcia układu.

Bardziej precyzyjna terminologia związana z obietnicami w konsoli

Podczas logowania żądania Promise konsola nieprawidłowo opisał stan Promise jako resolved:

Przykład konsoli ze starą, „rozwiązaną” terminologią.

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

Przykład nowej terminologii „pełnione” w konsoli.

Błąd V8: #6751

Aktualizacje panelu Style

Obsługa słowa kluczowego revert

Interfejs autouzupełniania w panelu Style wykrywa teraz słowo kluczowe CSS revert, które przywraca kaskadową wartość właściwości do tej, która miałaby wartość, gdyby styl elementu nie uległ zmianie.

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 (Moduł CSS Color Module, poziom 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 rgb(0 0 0).

Gdy wybierasz kolory za pomocą selektora kolorów lub zmieniasz reprezentację kolorów w panelu Style, przytrzymując klawisz Shift i klikając wartość koloru, zobaczysz teraz składnię argumentów rozdzielonych spacjami.

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ć funkcjonalnych zapisów kolorów rozdzielonych spacjami?

Błąd Chromium: #1072952

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

Okienko Właściwości w panelu Elementy zostało wycofane. Zamiast tego uruchom w konsoli polecenie console.dir($0).

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. Menu skrótów do aplikacji jest wyświetlane tylko w przypadku progresywnych aplikacji internetowych zainstalowanych na komputerze lub urządzeniu mobilnym użytkownika.

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.
  • Opublikuj tweeta na stronie @ChromeDevTools.
  • Napisz komentarz pod filmem dotyczącym nowości w Narzędziach deweloperskich w Narzędziach deweloperskich w YouTube lub 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.

Chrome 127

Chrome 126

Chrome 125

Chrome 124

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

Chrome 101

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

Chrome 82 został anulowany.

Chrome 81

Chrome 80

Chrome 79

Chrome 78

Chrome 77

Chrome 76

Chrome 75

Chrome 74

Chrome 73

Chrome 72

Chrome 71

Chrome 70

Chrome 68

Chrome 67

Chrome 66

Chrome 65

Chrome 64

Chrome 63

Chrome 62

Chrome 61

Chrome 60

Chrome 59