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 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 pozwala deweloperom wykrywać nieaktywnych użytkowników i reagować 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 na liście 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 JavaScriptu. 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 odfiltrowanych elementów

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 w 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 otwartych okien

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 przyszłej wersji 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 zakodowane w formacie base64 bufory protokołu. Aby ułatwić programistom analizowanie 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 Style

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ć, a także 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 wersji Canary, Dev lub Beta przeglądarki Chrome. 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.