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

Nowy panel multimediów

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

Przed wprowadzeniem nowego panelu multimediów w Narzędziach deweloperskich informacje dotyczące rejestrowania i debugowania odtwarzaczy mogły być znaleziono w: chrome://media-internals.

Nowy panel multimediów ułatwia wyświetlanie zdarzeń, logów, właściwości i osi czasu ramki. jest dekodowana na tej samej karcie przeglądarki, na której znajduje się sam odtwarzacz. W podglądzie na żywo możesz sprawdzać szybsze potencjalne problemy (np. dlaczego pojawiają się pomijane klatki, dlaczego JavaScript wchodzi w interakcję z odtwarzacz w nieoczekiwany sposób).

Problem z Chromium: 1018414

Wykonuj zrzuty ekranu węzłów za pomocą menu kontekstowego panelu Elementy

Teraz możesz przechwytywać zrzuty ekranu węzłów za pomocą menu kontekstowego w panelu Elementy.

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

Problem z Chromium: 1100253

Aktualizacje karty Problemy

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

Problemy z plikami cookie innych firm są teraz domyślnie ukryte na karcie Problemy. Włącz nową opcję Uwzględnij plików cookie innych firm, aby je wyświetlić.

Problemy z Chromium: 1096481, 1068116, 1080589

Emuluj brakujące czcionki lokalne

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

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

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

Programiści i projektanci często używają na etapie programowania dwóch różnych kopii tej samej czcionki:

• lokalną czcionkę dla narzędzi do projektowania,
• Czcionka internetowa w kodzie

Wyłączenie czcionek lokalnych ułatwia:

• Debuguj i mierz wydajność ładowania czcionek internetowych i skuteczność ich optymalizacji
• Sprawdź poprawność reguł @font-face usługi porównywania cen
• Jakie różnice między czcionkami internetowymi a ich wersjami lokalnymi

Problem z Chromium: 384968

Emuluj nieaktywnych użytkowników

Interfejs Idle Detection API umożliwia deweloperom wykrywanie nieaktywnych użytkowników i reagowanie w przypadku bezczynności zmian. Korzystając z Narzędzi deweloperskich, możesz teraz emulować zmiany stanu bezczynności na karcie Czujniki w przypadku użytkownika i stanu ekranu, zamiast czekać na zmianę rzeczywistego stanu bezczynności. Możesz otworzyć kartę Czujniki w szufladzie.

Problem z Chromium: 1090802

Emuluj funkcję prefers-reduced-data

Zapytanie o media prefers-reduced-data wykrywa, czy użytkownik woli wyświetlać reklamy alternatywne używająca mniej danych do renderowania strony.

Za pomocą Narzędzi deweloperskich możesz teraz emulować zapytanie o multimedia prefers-reduced-data.

Problem z Chromium: 1096068

Obsługa nowych funkcji JavaScriptu

Narzędzia deweloperskie obsługują teraz niektóre najnowsze funkcje języka JavaScript:

• Operatory przypisania logicznego – Narzędzia deweloperskie obsługują teraz przypisywanie logiczne &&=, ||= i ??= w panelach Console i Źródła.
• Separator liczbowy w formie ładowanego druku – Narzędzia deweloperskie poprawnie ściągają 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 Lighthouse 6.2. Pełną listę znajdziesz w informacjach o wersji. z listą zmian.

Nowe audyty w Lighthouse 6.2:

• Unikaj długich zadań w wątku głównym. Raportuje najdłuższe zadania w wątku głównym, przydatne w przypadku: i identyfikacji najgorszych czynników wpływających na opóźnienia danych wejściowych.
• Linki można indeksować. Sprawdź, czy atrybut href zakotwiczonych elementów prowadzi do odpowiedniego strony docelowe, tak aby linki były wykrywane.
• Elementy graficzne bez rozmiaru – sprawdź, czy w elementach graficznych są ustawione width i height. Wyraźny rozmiar obrazu może ograniczyć przesunięcia układu i poprawić CLS.
• Unikaj nieskomponowanych animacji. Raportuje nieskomponowane animacje, które wyglądają na nieregularne zmniejszyć CLS.
• Nasłuchuje zdarzeń unload. Zgłasza zdarzenie unload. Zastanów się nad użyciem: pagehide lub visibilitychange, ponieważ zdarzenie unload nie jest uruchamiane prawidłowo.

Zaktualizowane audyty w Lighthouse 6.2:

• Usuń nieużywany kod JavaScript. Lighthouse będzie teraz ulepszać kontrolę, jeśli strona dostępnych publicznie map źródłowych JavaScriptu.

Problem w Chromium: 772558

Wycofanie „innych źródeł” lista w panelu Skrypty service worker

W Narzędziach deweloperskich znajduje się teraz link umożliwiający wyświetlenie pełnej listy mechanizmów Service Worker z innych źródeł w nowym formacie karta przeglądarki – chrome://serviceworker-internals/?devtools.

Wcześniej w Narzędziach deweloperskich wyświetlała się lista zagnieżdżona w panelu Aplikacja > Skrypty service worker panel.

Problem z Chromium: 807440

Pokaż podsumowanie pokrycia dla odfiltrowanych elementów

Narzędzia deweloperskie przeliczają teraz i wyświetlają podsumowanie informacji o stanie, gdy filtry są stosowane na karcie Stan. Wcześniej na karcie Stan zawsze wyświetlała się wartość podsumowanie wszystkich informacji o zasięgu.

Zwróć uwagę na to, jak w podsumowaniu na początku widać, że w poniższym przykładzie 446 kB of 2.0 MB (22%) used so far. 1.5 MB unused., a potem mówi 57 kB of 604 kB (10%) used so far. 546 kB unused. po zastosowaniu filtrowania CSS.

Problem z Chromium: 1061385

Nowy widok szczegółów ramki w panelu aplikacji

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

Problem z Chromium: 1093247

Szczegóły ramki w otwartych oknach

Narzędzia deweloperskie wyświetlają teraz otwarte okna lub wyskakujące okienka również pod drzewem ramek. Widok szczegółów ramki otwartych okien zawiera dodatkowe informacje dotyczące bezpieczeństwa.

Problem w Chromium: 1107766

Informacje dotyczące bezpieczeństwa i izolacji (COEP / COOP)

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

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

Problem z Chromium: 1051466

Aktualizacje paneli elementów i sieci

Dostępne sugestie kolorów w panelu Style

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

W tym przykładzie h1 ma tekst o niskim kontraście. Aby rozwiązać ten problem, otwórz selektor kolorów w elemencie color w panelu Style. Gdy rozwiniesz sekcję Współczynnik kontrastu, Narzędzia deweloperskie udostępnią AA. i sugestie kolorów 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 został przywrócony – został wycofany w Chrome 84. W przyszłej wersji Narzędzi deweloperskich poprawimy przepływ pracy do badania właściwości elementów.

Problem z Chromium: 1105205, 1116085

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

Podczas sprawdzania zasobu sieciowego w panelu Network (Sieć) Narzędzia deweloperskie formatują teraz dowolne X-Client-Data wartości nagłówków w panelu Nagłówki jako kod.

Nagłówek HTTP X-Client-Data zawiera listę włączonych identyfikatorów eksperymentów i flag Chrome w przeglądarce. Nieprzetworzone wartości nagłówka wyglądają jak nieprzejrzyste ciągi znaków, ponieważ są zakodowane w formacie base64. zserializowane bufory protokołów. Aby treści były bardziej przejrzyste dla deweloperów, który wyświetla zdekodowane wartości.

Problem w Chromium: 1103854

Automatycznie uzupełniaj czcionki niestandardowe w panelu Style

Zaimportowane kroje czcionek są teraz dodawane do listy autouzupełniania CSS podczas edytowania pola font-family w panelu Style.

W tym przykładzie 'Noto Sans' to niestandardowa czcionka zainstalowana na komputerze lokalnym. Jest wyświetlany w na liście uzupełniania CSS. Wcześniej było inaczej.

Problem z Chromium: 1106221

Spójnie wyświetlaj typ zasobu w panelu Sieć

Narzędzia deweloperskie wyświetlają teraz ten sam typ zasobu co pierwotne żądanie sieciowe, dołącza / Redirect do wartości kolumny Typ w przypadku wystąpienia przekierowania (stan 302).

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

Problem z Chromium: 997694

Wyczyść przyciski w panelach Elementy i Sieć

Pola tekstowe filtrowania w panelu Style i Sieć oraz wyszukiwanie w modelu DOM w panelu Elementy zawierają teraz przyciski Wyczyść. Kliknięcie Wyczyść powoduje usunięcie tekstu, który dane wejściowe.

Problem w Chromium: 1067184

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   > Pomoc > Zgłoś problemy z Narzędziami deweloperskimi w Narzędziach deweloperskich.
• Opublikuj tweeta na stronie @ChromeDevTools.
• Napisz komentarz w filmach w YouTube o nowościach w Narzędziach deweloperskich lub o 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.