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

Jecelyn Yeen

Panel Nowe media

Narzędzia deweloperskie wyświetlają teraz informacje o odtwarzaczach multimediów w panelu Media.

Panel Nowe media

Przed wprowadzeniem nowego panelu multimediów w Narzędziach deweloperskich informacje o logowaniu i debugowaniu odtwarzaczy wideo można było znaleźć w chrome://media-internals.

Nowy panel multimediów ułatwia wyświetlanie zdarzeń, logów, właściwości i osi czasu dekodowania klatek na tej samej karcie przeglądarki, na której znajduje się odtwarzacz wideo. Możesz szybciej wyświetlać i sprawdzać potencjalne problemy (np. dlaczego występują utracone klatki lub dlaczego JavaScript działa z odtwarzaczem w nieoczekiwany sposób).

Problem z Chromium: 1018414

Zrzuty ekranu węzła w menu kontekstowym panelu Elementy

Zrzuty ekranu węzła możesz teraz robić za pomocą menu kontekstowego w panelu Elementy.

Aby na przykład zrobić zrzut ekranu spisu treści, kliknij element prawym przyciskiem myszy i wybierz Zrób zrzut ekranu węzła.

Zrzuty ekranu węzła

Problem z Chromium: 1100253

Aktualizacje na karcie Problemy

Pasek ostrzegawczy Problemy w panelu konsoli został zastąpiony zwykłą wiadomością.

Problemy w komunikacie w konsoli

Problemy z plikami cookie innych firm są teraz domyślnie ukryte na karcie Problemy. Aby je wyświetlić, zaznacz nowe pole wyboru Uwzględnij problemy z plikami cookie innych firm.

pole wyboru problemów z plikami cookie innych firm

Problemy z Chromium: 1096481, 1068116, 1080589

Emulowanie brakujących czcionek lokalnych

Otwórz kartę Renderowanie i użyj nowej funkcji Wyłącz lokalne czcionki, aby emulować brakujące źródła local() w regułach @font-face.

Jeśli na przykład czcionka „Rubik” jest zainstalowana na Twoim urządzeniu, a reguła @font-face src używa jej jako czcionki local(), Chrome używa lokalnego pliku czcionki z Twojego urządzenia.

Gdy opcja Wyłącz czcionki lokalne jest włączona, DevTools ignoruje czcionki local() i pobiera je z sieci.

Emulowanie brakujących czcionek lokalnych

Podczas tworzenia aplikacji deweloperzy i projektanci często używają 2 różnych kopii tej samej czcionki:

  • lokalny czcionka dla narzędzi do projektowania;
  • czcionka internetowa do kodu;

Wyłączenie czcionek lokalnych ułatwia:

  • Debugowanie i pomiar wydajności oraz optymalizacji ładowania czcionek internetowych
  • Sprawdzanie poprawności reguł usługi porównywania cen @font-face
  • poznasz różnice między czcionkami internetowymi a ich lokalnymi wersjami.

Problem z Chromium: 384968

Emulowanie nieaktywnych użytkowników

Interfejs Idle Detection API umożliwia deweloperom wykrywanie nieaktywnych użytkowników i reagowanie na zmiany stanu bezczynności. Teraz możesz używać DevTools do emulowania zmian stanu bezczynności na karcie Czujniki zarówno w przypadku stanu użytkownika, jak i stanu ekranu, zamiast czekać na zmianę rzeczywistego stanu bezczynności. Kartę Czujniki możesz otworzyć z menu.

Emulowanie nieaktywnych użytkowników

Problem z Chromium: 1090802

Emuluj prefers-reduced-data

Zapytanie o multimedia prefers-reduced-data wykrywa, czy użytkownik woli wyświetlanie treści alternatywnych, które zużywają mniej danych na potrzeby renderowania strony.

Teraz możesz użyć Narzędzi deweloperskich, aby emulować zapytanie o multimedia prefers-reduced-data.

Emulacja funkcji „prefers-reduced-data”

Problem z Chromium: 1096068

Obsługa nowych funkcji JavaScript

Narzędzie DevTools obsługuje teraz lepiej niektóre z najnowszych funkcji języka JavaScript:

  • Operatory przypisania logicznego – w Narzędziach deweloperskich można teraz używać przypisania logicznego z nowymi operatorami &&=, ||= i ??= w panelach Konsola i Źródła.
  • Piękne wyświetlanie separatorów liczbowych – w Narzędziach deweloperskich poprawnie wyświetlane są teraz separatory liczbowe w panelu źródeł.

Problemy z Chromium: 1086817, 1080569

Lighthouse 6.2 w panelu Lighthouse

Panel Lighthouse korzysta teraz z wersji 6.2. Pełną listę zmian znajdziesz w informacjach o wersji.

Zmień rozmiar obrazu

Nowe audyty w Lighthouse 6.2:

  • Unikaj długich zadań w wątku głównym. Pokazuje najdłuższe zadania w wątku głównym. Służy do rozpoznawania czynników, które mają największy wpływ na opóźnienia działania.
  • Linki są możliwe do zindeksowania. Sprawdź, czy atrybut href zakotwiczonych elementów prowadzi do odpowiedniego miejsca docelowego, aby możliwe było odnalezienie linków.
  • Elementy graficzne bez rozmiaru – sprawdź, czy w elementach graficznych ustawiono bezpośrednio atrybuty width i height. Wyraźny rozmiar obrazu może ograniczyć przesunięcia układu i poprawić CLS.
  • Unikaj nieskomponowanych animacji. Raporty dotyczące nieskomponowanych animacji, które działają nieprawidłowo i zwiększają CLS.
  • Nasłuchuje zdarzeń unload. Raportuje zdarzenie unload. Rozważ użycie zdarzeń pagehide lub visibilitychange, ponieważ zdarzenie unload nie działa niezawodnie.

Zaktualizowane audyty w Lighthouse 6.2:

  • Usuń nieużywany kod JavaScript. Lighthouse będzie teraz wzbogacać audyt, jeśli strona ma publicznie dostępne mapy źródeł JavaScript.

Problem z Chromium: 772558

wycofanie z użycia listy „inne źródła” w panelu Skrypty service worker,

W Narzędziach deweloperskich jest teraz dostępny link do wyświetlenia pełnej listy usług service worker z innych źródeł na nowej karcie przeglądarki (chrome://serviceworker-internals/?devtools).

Wcześniej DevTools wyświetlał listę zagnieżdżoną w panelu Aplikacja > Usługa robocza.

Łączenie z innymi źródłami

Problem z Chromium: 807440

Pokaż podsumowanie pokrycia dla elementów po zastosowaniu filtra

Narzędzie DevTools dynamicznie ponownie oblicza i wyświetla podsumowanie informacji o zasięgu, gdy na karcie Zasięg stosujesz filtry. Wcześniej na karcie Pokrycie zawsze wyświetlano podsumowanie wszystkich informacji o pokrywaniu.

W przykładzie poniżej widać, że w podsumowaniu początkowo widać 446 kB of 2.0 MB (22%) used so far. 1.5 MB unused., a po zastosowaniu filtrowania usług porównywania cen – 57 kB of 604 kB (10%) used so far. 546 kB unused..

Podsumowanie zasięgu dla odfiltrowanych elementów

Problem z Chromium: 1061385

Nowy widok szczegółów ramki w panelu Aplikacja

Narzędzia deweloperskie wyświetlają teraz szczegółowy widok każdej ramki. Aby uzyskać do niego dostęp, kliknij ramkę w menu Ramki w panelu Aplikacja.

Nowy widok szczegółów ramki w panelu Aplikacja

Problem z Chromium: 1093247

Szczegóły ramek w otwartych oknach

Narzędzia deweloperskie wyświetlają teraz otwarte okna i wyskakujące okienka również w drzewie ramek. Widok szczegółów ramki otwartych okien zawiera dodatkowe informacje o zabezpieczeniach.

Szczegóły ramki otwartego okna

Problem z Chromium: 1107766

Informacje o zabezpieczeniach i izolacji (COEP / COOP)

Narzędzia deweloperskie wyświetlają teraz w szczegółach ramki bezpieczny kontekst, zasadę Cross-Origin-Embedder-Policy (COEP) i zasadę Cross-Origin-Opener-Policy (COOP).

Informacje o bezpieczeństwie i izolacji

Wkrótce do widoku szczegółów ramki dodamy więcej informacji o zabezpieczeniach.

Problem z Chromium: 1051466

Aktualizacje panelu Elementy i Sieć

Dostępna propozycja koloru w panelu Style

Narzędzia deweloperskie podają teraz propozycje kolorów dla tekstu o niskim kontraście.

W przykładzie poniżej element h1 ma tekst o niskim kontraście. Aby to naprawić, otwórz selektor kolorów właściwości color w panelu Style. Po rozwinięciu sekcji Współczynnik kontrastu, Narzędzia deweloperskie podają sugestie dotyczące kolorów AA i AAA. Kliknij sugerowany kolor, aby go zastosować.

Problem z Chromium: 1093227

Przywróć panel Właściwości w panelu Elementy

Panel Właściwości wrócił, został wycofany w Chrome 84. W kolejnych wersjach DevTools usprawnimy proces sprawdzania właściwości elementów.

Panel Właściwości w panelu Elementy

Problem z Chromium: 1105205, 1116085

czytelne dla człowieka wartości nagłówka X-Client-Data w panelu Sieć,

Podczas sprawdzania zasobu sieciowego w panelu Sieć Narzędzia deweloperskie formatuje teraz wszystkie wartości nagłówków X-Client-Data w panelu Nagłówki jako kod.

Nagłówek HTTP X-Client-Data zawiera listę identyfikatorów eksperymentów i flag Chrome włączonych w Twojej przeglądarce. Nieprzetworzone wartości nagłówka wyglądają jak nieprzeźroczyste ciągi znaków, ponieważ są to zaszyfrowane i zserializowane bufory protokołu w formacie Base64. Aby ułatwić programistom zrozumienie zawartości, DevTools wyświetla teraz odkodowane wartości.

Zrozumiałe dla człowieka wartości nagłówka „X-Client-Data”

Problem z Chromium: 1103854

Autouzupełnianie niestandardowych czcionek w panelu Styl

Zaimportowane kroje czcionek są teraz dodawane do listy automatycznego uzupełniania CSS podczas edytowania właściwości font-family w panelu Style.

W tym przykładzie 'Noto Sans' to czcionka niestandardowa zainstalowana na komputerze lokalnym. Wyświetla się na liście ukończonych usług porównywania cen. Wcześniej nie było.

Autouzupełnianie czcionek niestandardowych

Problem z Chromium: 1106221

Konsekwentne wyświetlanie typu zasobu w panelu Sieć

Narzędzia programistyczne wyświetlają teraz konsekwentnie ten sam typ zasobu co pierwotne żądanie sieciowe, a w przypadku przekierowania (stan 302) dodają do wartości kolumny Typ wartość / Redirect.

Wcześniej Narzędzia deweloperskie czasami zmieniały typ na Other.

Typ zasobu przekierowania wyświetlania

Problem z Chromium: 997694

przyciski Wyczyść w panelach Elementy i Sieć,

Pola tekstowe filtra w panelu Style i Sieć oraz pole tekstowe wyszukiwania DOM w panelu Elementy mają teraz przyciski Wyczyść. Kliknięcie Wyczyść spowoduje usunięcie wpisanego tekstu.

przyciski Wyczyść w panelach Elementy i Sieć,

Problem z Chromium: 1067184

Pobieranie kanałów podglądu

Rozważ użycie jako domyślnej przeglądarki deweloperskiej przeglądarki Chrome w wersji Canary, Dev lub Beta. Te kanały wersji wstępnej zapewniają dostęp do najnowszych funkcji DevTools, umożliwiają testowanie najnowocześniejszych interfejsów API platformy internetowej i pomagają znaleźć problemy w witrynie, zanim zrobią to użytkownicy.

Kontakt z zespołem Narzędzi deweloperskich w Chrome

Aby omówić nowe funkcje, aktualizacje lub inne kwestie związane z Narzędziami deweloperskimi, skorzystaj z tych opcji.

Co nowego w Narzędziach deweloperskich

Lista wszystkich tematów omawianych w cyklu artykułów Co nowego w Narzędziech deweloperskich.