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

Jecelyn Yeen

Nowy panel multimediów

Informacje o odtwarzaczach multimediów są teraz wyświetlane w panelu multimediów.

Nowy panel multimediów

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

Nowy panel multimediów ułatwia wyświetlanie zdarzeń, logów, właściwości i osi czasu dekodowanych klatek na tej samej karcie przeglądarki, na której znajduje się odtwarzacz. Możesz zobaczyć podgląd na żywo i szybciej sprawdzić potencjalne problemy (np. dlaczego występują pomijane klatki lub dlaczego JavaScript oddziałuje na odtwarzacz w nieoczekiwany sposób).

Problem z Chromium: 1018414

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

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

Możesz na przykład zrobić zrzut ekranu tabeli treści: kliknij element prawym przyciskiem myszy i wybierz Zrób zrzut ekranu węzła.

Zrób zrzuty ekranu węzłów

Problem z Chromium: 1100253

Aktualizacje na karcie Problemy

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

Komunikat o problemach 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

Emuluj brakujące czcionki lokalne

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

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

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

Emuluj brakujące czcionki lokalne

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

  • lokalną czcionkę na potrzeby narzędzi do projektowania,
  • Czcionka kodu na stronie internetowej

Wyłączenie czcionek lokalnych ułatwia:

  • Debuguj i mierz skuteczność czcionek internetowych podczas wczytywania wydajności i optymalizacji
  • Sprawdź poprawność reguł CSS @font-face
  • Poznaj różnice między czcionkami internetowymi a ich wersjami lokalnymi

Problem z Chromium: 384968

Emuluj nieaktywnych użytkowników

Interfejs Idle Detection API pozwala deweloperom wykrywać nieaktywnych użytkowników i reagować na zmiany stanu bezczynności. Za pomocą Narzędzi deweloperskich możesz teraz emulować na karcie Czujniki zmiany stanu bezczynności zarówno w przypadku stanu użytkownika, jak i ekranu, zamiast czekać na zmianę rzeczywistego stanu bezczynności. Kartę Czujniki możesz otworzyć w panelu.

Emuluj nieaktywnych użytkowników

Problem z Chromium: 1090802

Emuluj funkcję prefers-reduced-data

Zapytanie o multimedia prefers-reduced-data wykrywa, czy użytkownik preferuje wyświetlanie treści alternatywnych, które wymagają mniejszej ilości danych do renderowania strony.

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

Emuluj prefers-reduced-data

Problem z Chromium: 1096068

Obsługa nowych funkcji JavaScript

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

  • Operatory przypisywania logicznego – Narzędzia deweloperskie obsługują teraz przypisywanie logiczne z nowymi operatorami &&=, ||= i ??= w panelach Konsola i Źródła.
  • Separatory numeryczne poprawnego druku – w Narzędziach deweloperskich teraz prawidłowo rysują separatory liczbowe w panelu Źródła.

Problemy z Chromium: 1086817, 1080569

Lighthouse 6.2 w panelu Lighthouse

Panel Lighthouse korzysta teraz z Lighthouse 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. Raportuje najdłuższe zadania w wątku głównym, co jest przydatne przy wykrywaniu najgorszych czynników wpływających na opóźnienia danych wejściowych.
  • Linki można zindeksować. Sprawdź, czy atrybut href elementów zakotwiczonych prowadzi do odpowiedniego miejsca docelowego, co umożliwi wykrywanie linków.
  • Elementy graficzne bez rozmiaru – sprawdź, czy w elementach obrazu są ustawione wyraźne wartości width i height. Wyraźny rozmiar obrazu może ograniczyć przesunięcia układu i ulepszyć CLS.
  • Unikaj nieskomponowanych animacji. Raportuje nieskomponowane animacje, które sprawiają wrażenie niespójnych, i zmniejszają CLS.
  • Wykrywa zdarzenia unload. Raportuje zdarzenie unload. Zamiast tego rozważ użycie zdarzeń pagehide lub visibilitychange, ponieważ zdarzenie unload nie uruchamia się prawidłowo.

Zaktualizowane audyty w Lighthouse 6.2:

  • Usuń nieużywany kod JavaScript. Lighthouse udoskonali teraz kontrolę, jeśli strona ma dostępne publicznie mapy źródeł JavaScript.

Problem z Chromium: 772558

Wycofanie listy „inne źródła” w panelu Skrypty service worker

Narzędzia deweloperskie zawierają teraz link umożliwiający wyświetlenie pełnej listy skryptów service worker z innych źródeł w nowej karcie 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.

Link do innych źródeł

Problem z Chromium: 807440

Pokaż podsumowanie pokrycia dla odfiltrowanych elementów

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

W przykładzie poniżej widać, że po zastosowaniu filtra CSS w podsumowaniu wyświetla się początkowo wartość 446 kB of 2.0 MB (22%) used so far. 1.5 MB unused., a potem 57 kB of 604 kB (10%) used so far. 546 kB unused..

Podsumowanie zasięgu filtrowanych elementów

Problem z Chromium: 1061385

Nowy widok szczegółów ramki w panelu aplikacji

Narzędzia deweloperskie wyświetlają teraz widok szczegółowy każdej klatki. Aby go otworzyć, kliknij ramkę w menu Klatki w panelu Aplikacja.

Nowy widok szczegółów ramki w panelu aplikacji

Problem z Chromium: 1093247

Szczegóły ramki w otwartych oknach

Narzędzia deweloperskie wyświetlają teraz także otwarte okna i wyskakujące okienka pod drzewem 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)

W Narzędziach deweloperskich w szczegółach ramki wyświetlają się teraz bezpieczny kontekst oraz zasady z innych domen (cross-Origin-Embedder-Policy, COEP) i cross-Origin-Opener-Policy (COOP).

Informacje o zabezpieczeniach i izolacji

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

Problem z Chromium: 1051466

Aktualizacje panelu Elementy i Sieć

Sugestia dotycząca kolorów dostępna w panelu Style

Narzędzia deweloperskie udostępniają teraz sugestie dotyczące kolorów w przypadku tekstu o niskim kontraście kolorów.

W poniższym przykładzie h1 ma tekst o niskim kontraście. Aby rozwiązać ten problem, otwórz selektor kolorów w usłudze color w panelu Style. Gdy rozwiniesz sekcję Współczynnik kontrastu, w Narzędziach deweloperskich pojawią się sugestie kolorów AA i AAA. Kliknij sugerowany kolor, aby go zastosować.

Problem z Chromium: 1093227

Przywrócenie panelu Właściwości w panelu Elementy

Okienko Właściwości jest znów dostępne – zostało wycofane w Chrome 84. W przyszłej wersji Narzędzi deweloperskich usprawnimy proces sprawdzania właściwości elementów.

Panel Właściwości w panelu Elementy

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 Narzędzia deweloperskie formatują teraz wszystkie wartości nagłówka 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 przeglądarce. Nieprzetworzone wartości nagłówka wyglądają jak ciągi nieprzezroczyste, ponieważ są zakodowane w formacie base-64, zserializowane bufory protokołów. Aby zwiększyć przejrzystość zawartości, Narzędzia deweloperskie pokazują teraz zdekodowane wartości.

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

Problem z Chromium: 1103854

Automatycznie uzupełniaj czcionki niestandardowe w panelu Style

Zaimportowane kroje czcionek są teraz dodawane do listy autouzupeł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. Jest wyświetlany na liście uzupełnienia CSS. Wcześniej tak nie było.

Automatycznie uzupełniaj czcionki niestandardowe

Problem z Chromium: 1106221

Regularnie wyświetlaj typ zasobu w panelu Sieć

Narzędzia deweloperskie konsekwentnie wyświetlają teraz ten sam typ zasobu co pierwotne żądanie sieciowe i dołączają / Redirect do wartości w kolumnie Typ w przypadku przekierowania (stan 302).

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

Typ zasobu przekierowania displayowego

Problem z Chromium: 997694

Wyczyść przyciski w panelach Elementy i sieć

Pola tekstowe filtrów w panelach Style i Sieć oraz w polu tekstowym wyszukiwania DOM w panelu Elementy zawierają teraz przyciski Wyczyść. Kliknięcie Wyczyść spowoduje usunięcie wpisanego tekstu.

Wyczyść przyciski w panelach Elementy i sieć

Problem z Chromium: 1067184

Pobieranie kanałów podglądu

Jako domyślnej przeglądarki dla programistów możesz używać Chrome Canary, Dev lub Beta. Te kanały podglądu dają dostęp do najnowszych funkcji Narzędzi deweloperskich, umożliwiają testowanie najnowocześniejszych interfejsów API platform internetowych oraz wykrywanie problemów w witrynie, zanim zdołają zrobić użytkownicy.

Kontakt z zespołem Narzędzi deweloperskich w Chrome

Użyj poniższych opcji, aby omówić nowe funkcje i zmiany w poście lub wszelkie inne kwestie związane z Narzędziami dla deweloperów.

  • Prześlij nam sugestię lub opinię na stronie crbug.com.
  • Aby zgłosić problem z Narzędziami deweloperskimi, kliknij Więcej opcji   Więcej   > Pomoc > Zgłoś problemy z Narzędziami deweloperskimi.
  • zatweetuj na @ChromeDevTools.
  • Napisz komentarz o nowościach w filmach w YouTube dostępnych w Narzędziach deweloperskich lub z poradami dotyczącymi narzędzi dla deweloperów w filmach w YouTube.

Co nowego w Narzędziach deweloperskich

Lista wszystkich omówionych funkcji w serii Co nowego w Narzędziach deweloperskich.

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

101 Chrome

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

Subskrypcja Chrome 82 została anulowana.

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