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

Jecelyn Yeen

Nowy panel multimediów

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

Nowy panel multimediów

Przed wprowadzeniem nowego panelu multimediów w Narzędziach deweloperskich informacje o logowaniu i debugowaniu odtwarzaczy były dostępne w chrome://media-internals.

Nowy panel multimediów ułatwia wyświetlanie zdarzeń, logów, właściwości oraz osi czasu dekodowania klatek na tej samej karcie przeglądarki, na której znajduje się odtwarzacz wideo. Możesz teraz szybciej sprawdzać potencjalne problemy (np. dlaczego pojawiają się klatki na ekranie czy dlaczego JavaScript komunikuje się z odtwarzaczem 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 tabeli treści, klikając element prawym przyciskiem myszy i wybierając Zrób zrzut ekranu węzła.

Wykonaj zrzuty 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 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

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 na przykład czcionka „Rubik” jest zainstalowana na urządzeniu, a reguła @font-face src użyje jej jako czcionki local(), Chrome użyje lokalnego pliku czcionki z Twojego urządzenia.

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

Emuluj brakujące czcionki lokalne

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 programistom wykrywanie nieaktywnych użytkowników i reagowanie na zmiany stanu bezczynności. Możesz teraz używać narzędzi deweloperskich 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. Możesz otworzyć kartę Czujniki 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 woli wyświetlać alternatywne treści, które podczas renderowania strony zużywają mniej danych.

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

Emuluj „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 z nowymi operatorami &&=, ||= i ??= w konsoli i panelach Źródła.
  • Separatory liczbowe w formie efektu druku – Narzędzia deweloperskie poprawnie 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 Lighthouse 6.2. Pełną listę zmian znajdziesz w informacjach o wersji.

Usuń 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 pomaga wykrywać najgorsze czynniki wpływające na opóźnienia danych wejściowych.
  • Linki można indeksować. Sprawdź, czy atrybut href zakotwiczonych elementów prowadzi do odpowiedniego miejsca docelowego, aby można było je znaleźć.
  • 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 wydają się niestabilne i zmniejszają CLS.
  • Nasłuchuje zdarzeń unload. Zgłasza zdarzenie unload. Rozważ użycie zdarzeń pagehide lub visibilitychange, ponieważ zdarzenia unload nie są uruchamiane prawidłowo.

Zaktualizowane audyty w Lighthouse 6.2:

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

Problem w Chromium: 772558

Wycofanie listy „innych źródeł” z 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 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 robocze.

Połącz z innymi punktami początkowymi

Problem z Chromium: 807440

Pokaż podsumowanie pokrycia dla odfiltrowanych elementów

Gdy na karcie Stan są zastosowane filtry, Narzędzia deweloperskie przeliczają teraz i dynamicznie wyświetlają podsumowanie informacji o stanie. Wcześniej na karcie Stan zawsze było wyświetlane podsumowanie wszystkich informacji o pokryciu.

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

Podsumowanie zakresu filtrowanych elementów

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 menu Ramki 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 otwarte okna lub wyskakujące okienka również pod drzewem ramek. Widok szczegółów ramki otwartych okien zawiera dodatkowe informacje o zabezpieczeniach.

Szczegóły otwartej ramy okna

Problem w Chromium: 1107766

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

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

Informacje o bezpieczeństwie i izolacji

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 poniższym przykładzie h1 ma tekst o niskim kontraście. Aby rozwiązać ten problem, otwórz selektor kolorów właściwości color w panelu Style. Gdy rozwiniesz sekcję Współczynnik kontrastu, w Narzędziach deweloperskich zobaczysz sugestie 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 został przywrócony – został wycofany w Chrome 84. W przyszłej wersji Narzędzi deweloperskich udoskonalimy przepływ pracy do badania 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 Sieć 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, które są włączone w przeglądarce. Nieprzetworzone wartości nagłówka wyglądają jak nieprzejrzyste ciągi znaków, ponieważ są zakodowanymi w standardzie base-64 i serializowanymi buforami protokołów. Aby treści były bardziej przejrzyste dla programistów, Narzędzia deweloperskie pokazują teraz zdekodowane wartości.

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

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 właściwości font-family w panelu Style.

W tym przykładzie 'Noto Sans' to niestandardowa czcionka zainstalowana na komputerze lokalnym. Pojawi się na liście uzupełniania CSS. Wcześniej było inaczej.

Czcionki niestandardowe autouzupełniania

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 i dodają / Redirect do wartości kolumny 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 filtrowania w panelu Style i Sieć oraz pole wyszukiwania DOM w panelu Elementy zawierają teraz przyciski Wyczyść. Kliknięcie Wyczyść usuwa cały wpisany tekst.

Wyczyść przyciski w panelach Elementy i Sieć

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   Więcej   > Pomoc > Zgłoś problemy z Narzędziami deweloperskimi.
  • Opublikuj tweeta na stronie @ChromeDevTools.
  • Napisz komentarz pod filmem dotyczącym nowości w Narzędziach deweloperskich w Narzędziach deweloperskich w YouTube lub 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.

Chrome 127

Chrome 126

Chrome 125

Chrome 124

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

Chrome 101

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

Chrome 82 został anulowany.

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