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

Panel Nowe media

Narzędzia deweloperskie wyświetlają teraz informacje o odtwarzaczach multimediów w panelu 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 w tej samej karcie przeglądarki co odtwarzacz wideo. Możesz szybciej wyświetlać na żywo i sprawdzać potencjalne problemy (np. dlaczego występują utracone klatki lub dlaczego JavaScript wchodzi w interakcję z odtwarzaczem w nieoczekiwany sposób).

Problem w Chromium: 1018414

Robienie zrzutów ekranu węzłów za pomocą menu kontekstowego panelu Elementy

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

Możesz na przykład zrobić zrzut ekranu spisu treści, klikając element prawym przyciskiem myszy i wybierając Zrób zrzut ekranu węzła.

Problem w Chromium: 1100253

Aktualizacje karty Problemy

Pasek ostrzeżeń o problemach w panelu Konsola został zastąpiony zwykłym komunikatem.

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.

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 urządzeniu, a reguła @font-face src używa jej jako czcionki local(), Chrome używa lokalnego pliku czcionki z urządzenia.

Gdy opcja Wyłącz czcionki lokalne jest włączona, Narzędzia deweloperskie ignorują czcionki local() i pobierają je z sieci.

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

• lokalną czcionkę dla narzędzi do projektowania,
• czcionkę internetową do kodu,

Wyłączenie czcionek lokalnych ułatwia:

• Debugowanie i pomiar wydajności oraz optymalizacja wczytywania czcionek internetowych
• Sprawdzanie poprawności reguł CSS @font-face
• Sprawdzanie różnic między czcionkami internetowymi a ich lokalnymi wersjami

Problem w 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. W narzędziach deweloperskich możesz teraz emulować zmiany 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 szuflady.

Problem w Chromium: 1090802

Emuluj prefers-reduced-data

Zapytanie o media prefers-reduced-data wykrywa, czy użytkownik woli otrzymywać alternatywne treści, które wykorzystują mniej danych do renderowania strony.

W Narzędziach deweloperskich możesz teraz emulować prefers-reduced-data zapytanie o media.

Problem w Chromium: 1096068

Obsługa nowych funkcji JavaScriptu

Narzędzia deweloperskie lepiej obsługują teraz niektóre z najnowszych funkcji języka JavaScript:

• Operatory przypisania logicznego – Narzędzia deweloperskie obsługują teraz przypisanie logiczne za pomocą nowych operatorów &&=, ||= i ??= w panelach Konsola i Źródła.
• Ładne drukowanie separatorów liczbowych – Narzędzia deweloperskie prawidłowo drukują separatory liczbowe w panelu Źródła.

Problemy z Chromium: 1086817, 1080569

Lighthouse 6.2 w panelu Lighthouse

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

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 można zindeksować. Sprawdź, czy atrybut href zakotwiczonych elementów prowadzi do odpowiedniego miejsca docelowego, aby można było wykryć linki.
• Elementy graficzne bez określonego rozmiaru – sprawdź, czy w elementach graficznych ustawiono bezpośrednio atrybuty width i height. Określenie rozmiaru obrazu może ograniczyć przesunięcia układu i ulepszyć CLS.
• Unikaj nieskomponowanych animacji Raportuje nieskomponowane animacje, które działają nieprawidłowo i zmniejszają CLS.
• Nasłuchuje zdarzeń unload. Raportuje unload zdarzenie. Rozważ używanie zdarzeń pagehide lub visibilitychange, ponieważ zdarzenie unload nie jest wywoływane w sposób niezawodny.

Zaktualizowane audyty w Lighthouse 6.2:

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

Problem w Chromium: 772558

Wycofanie listy „inne źródła” w panelu Service Workers

Narzędzia deweloperskie udostępniają teraz link do wyświetlenia pełnej listy skryptów service worker z innych źródeł na nowej karcie przeglądarki – chrome://serviceworker-internals/?devtools.

Wcześniej Narzędzia deweloperskie wyświetlały listę zagnieżdżoną w panelu Aplikacja > panel Service workers.

Problem z Chromium: 807440

Wyświetlanie podsumowania ochrony dla odfiltrowanych produktów

Narzędzia deweloperskie ponownie obliczają i wyświetlają podsumowanie informacji o zasięgu dynamicznie po zastosowaniu filtrów na karcie Zasięg. Wcześniej karta Pokrycie zawsze wyświetlała podsumowanie wszystkich informacji o pokryciu.

W poniższym przykładzie zwróć uwagę, jak podsumowanie początkowo wygląda tak: 446 kB of 2.0 MB (22%) used so far. 1.5 MB unused., a potem tak: 57 kB of 604 kB (10%) used so far. 546 kB unused. po zastosowaniu filtrowania CSS.

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.

Problem w Chromium: 1093247

Szczegóły ramki 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 bezpieczeństwie.

Problem w Chromium: 1107766

Informacje o zabezpieczeniach i izolacji (COEP / COOP)

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

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

Problem w Chromium: 1051466

Aktualizacje paneli Elementy i Sieć

Sugestia koloru dostępnego w panelu Style

Narzędzia deweloperskie podpowiadają teraz kolory w przypadku 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

Przywracanie panelu Właściwości w panelu Elementy

Panel Właściwości powrócił. Został wycofany w Chrome 84. W przyszłej wersji Narzędzi deweloperskich ulepszymy proces sprawdzania właściwości elementów.

Problem w Chromium: 1105205, 1116085

Wartości nagłówków X-Client-Data w panelu Sieć

Podczas sprawdzania zasobu sieci w panelu Sieć Narzędzia deweloperskie formatują 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, które są włączone w Twojej przeglądarce. Surowe wartości nagłówka wyglądają jak nieprzejrzyste ciągi znaków, ponieważ są zakodowane w formacie Base64 i zserializowane jako bufory protokołu. Aby zwiększyć przejrzystość treści dla programistów, Narzędzia deweloperskie wyświetlają teraz zdekodowane wartości.

Problem w Chromium: 1103854

Autouzupełnianie niestandardowych czcionek w panelu Style

Importowane kroje pisma 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 niestandardowa czcionka zainstalowana na komputerze lokalnym. Wyświetla się na liście autouzupełniania CSS. Wcześniej tak nie było.

Problem w Chromium: 1106221

Spójne wyświetlanie typu zasobu w panelu Sieć

Narzędzia deweloperskie wyświetlają teraz zawsze ten sam typ zasobu co pierwotne żądanie sieciowe i dodają znak / Redirect do wartości w kolumnie Typ, gdy nastąpi przekierowanie (stan 302).

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

Problem w Chromium: 997694

Przyciski wyczyść w panelach Elementy i Sieć

Pola tekstowe filtrów w panelach Style i Sieć oraz pole tekstowe wyszukiwania DOM w panelu Elementy mają teraz przyciski Wyczyść. Kliknięcie Wyczyść spowoduje usunięcie całego wpisanego tekstu.

Problem w Chromium: 1067184

Pobieranie kanałów podglądu

Rozważ używanie Chrome w wersji Canary, deweloperskiej lub beta jako domyślnej przeglądarki do programowania. Te kanały wersji testowych zapewniają dostęp do najnowszych funkcji Narzędzi deweloperskich, umożliwiają testowanie najnowocześniejszych interfejsów API platformy internetowej i pomagają znajdować problemy w witrynie, zanim zrobią to użytkownicy.

Skontaktuj się z zespołem Narzędzi deweloperskich w Chrome

Skorzystaj z tych opcji, aby porozmawiać o nowych funkcjach, aktualizacjach lub innych kwestiach związanych z Narzędziami deweloperskimi.

• Prześlij nam opinię i prośby o dodanie funkcji na stronie crbug.com.
• Zgłoś problem z Narzędziami deweloperskimi, klikając more_vert Więcej opcji > Pomoc > Zgłoś problem z Narzędziami deweloperskimi w Narzędziach deweloperskich.
• Wyślij tweeta do @ChromeDevTools.
• Zostawiaj komentarze pod filmami na YouTube z serii „Co nowego w Narzędziach deweloperskich” lub filmami z serii „Wskazówki dotyczące Narzędzi deweloperskich”.

Co nowego w Narzędziach deweloperskich

Lista wszystkich tematów omówionych w serii Nowości w Narzędziach deweloperskich.