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

Jecelyn Yeen

Wyskakujące okienko z informacjami o wskaźnikach internetowych

Najedź kursorem na znacznik wskaźników internetowych w panelu Skuteczność, aby dowiedzieć się, jaki jest wskaźnik: czy skuteczność jest dobra, wymaga poprawy czy niska.

Wyskakujące okienko z informacjami o parametrach internetowych

Problem z Chromium: 1147872

Wizualizacja funkcji CSS Scroll-snap

Aby sprawdzić wyrównanie przewijania i przyciągania CSS, możesz teraz przełączyć plakietkę scroll-snap w panelu Elementy.

CSS Scroll-snap

Gdy do elementu HTML na stronie (np. na tej stronie demonstracyjnej) zastosowano parametr scroll-snap-type, w panelu Elementy pojawi się obok niego plakietka scroll-snap. Kliknij plakietkę, aby włączyć wyświetlanie nakładki przewijanej na stronie.

W przykładzie powyżej widać kropki na krawędziach przyciągania. Port przewijania ma pełny kontur, a przyciągane elementy mają kontury. Dopełnienie przewijania jest wypełnione zielonym kolorem, a margines przewijania – pomarańczowym.

Problem z Chromium: 862450

Nowy inspektor pamięci

Użyj nowego inspektora pamięci, aby zbadać ArrayBuffer w JavaScript oraz pamięć Wasm.

Otwórz tę stronę demonstracyjną. W panelu Źródła otwórz plik demo-js.js i ustaw punkt przerwania w wierszu 18.

Odśwież stronę. Rozwiń sekcję Zakres w panelu debugera po prawej stronie. Zwróć uwagę na nową ikonę obok wartości buffer. Kliknij ją, aby wyświetlić Inspektor pamięci.

Zapoznaj się z dokumentacją, aby dowiedzieć się więcej o sprawdzaniu kodu JavaScript ArrayBuffer i WebAssembly.Memory za pomocą nowego inspektora pamięci.

Inspektor pamięci

Problem z Chromium: 1166577

Nowy panel ustawień plakietki w panelu Elementy

Możesz teraz selektywnie włączać i wyłączać plakietki w Ustawieniach plakietki w panelu Elementy. Za pomocą tej funkcji możesz dostosować ważne plakietki i skupić się na nich podczas sprawdzania stron internetowych.

panelu ustawień plakietki w panelu Elementy

W panelu Elementy kliknij dowolny element prawym przyciskiem myszy. Wybierz Ustawienia plakietki z menu kontekstowego. U góry pojawi się panel ustawień plakietki. Włącz lub wyłącz dowolne pole wyboru, aby pokazać lub ukryć plakietki.

Problem z Chromium: 1066772

Ulepszony podgląd obrazu z informacjami o współczynniku proporcji

Podglądy obrazów w panelu Elementy zawierają teraz więcej informacji o obrazie: wyrenderowany rozmiar, renderowany współczynnik proporcji, rozmiar wewnętrzny, wewnętrzny współczynnik proporcji i rozmiar pliku.

Te informacje pomogą Ci lepiej zrozumieć obrazy i w razie potrzeby zastosować optymalizację.

Podgląd obrazu z informacjami o formacie obrazu

Informacje o współczynniku proporcji obrazu są dostępne w panelu Sieć, gdy klikniesz, by wyświetlić podgląd obrazu.

Informacje o współczynniku proporcji obrazu w panelu Sieć

Problemy z Chromium: 1149832, 1170656

Przycisk nowych warunków sieciowych z opcjami konfiguracji Content-Encoding

W panelu Sieć dodano nowy przycisk warunków sieci. Kliknij ją, aby otworzyć kartę Warunki sieci.

Do karty Warunki sieci dodaliśmy nową opcję Akceptowane kodowanie treści. Skonfiguruj go, aby sprawdzić, czy odpowiedzi serwera są prawidłowo kodowane w przeglądarkach, które nie obsługują gzip, brotli ani innych przyszłych funkcji Content-Encoding.

Przycisk nowych warunków sieciowych z opcjami konfigurowania kodowania treści

Problem z Chromium: 1162042

Ulepszenia panelu stylów

Nowy skrót do wyświetlania obliczonej wartości w panelu Style

Możesz teraz kliknąć prawym przyciskiem myszy właściwość CSS w panelu Style i wybrać Wyświetl obliczoną wartość, aby wyświetlić obliczoną wartość CSS.

Nowy skrót do wyświetlania obliczonej wartości

Problem z Chromium: 1076198

Obsługa słowa kluczowego accent-color

Interfejs autouzupełniania panelu Style wykrywa teraz słowo kluczowe CSS accent-color.Pozwala ono twórcom stron internetowych określić kolor uzupełniający dla elementów sterujących interfejsu (np. pola wyboru czy opcji) generowanych przez element.

Właściwość CSS accent-color jest obecnie w wersji eksperymentalnej. Aby przetestować usługę, włącz usługę chrome://flags/#enable-experimental-web-platform-features.

kolor uzupełniający

Problem z Chromium: 1092093

Kategoryzowanie typów problemów za pomocą kolorów i ikon

Karta Problemy dzieli problemy na kategorie według błędów strony, nadchodzących zmian powodujących niezgodność i możliwych ulepszeń, które zwiększają wagę problemów. Kartę Problemy możesz otworzyć, klikając przycisk Liczba problemów w Konsoli.

  • Błędy strony (czerwona). Problemy, które mają bezpośredni wpływ na działanie strony, np. nieprawidłowe ustawienie nagłówków CORS itp.
  • Nadchodzące zmiany powodujące niezgodność (kolor żółty). problemy informujące o nadchodzącej, niezgodnej zmianie platformy internetowej, która może spowodować utratę funkcjonalności strony (np. ostrzeżenie o nadchodzących zmianach CORS RFC 1918).
  • Możliwe ulepszenia (niebieski) Potencjalne usprawnienia na stronie, ale obecnie nie wpływają negatywnie na podstawowe funkcje strony (np.problemy z ułatwieniami dostępu).

Kategoryzowanie typów problemów za pomocą kolorów i ikon

Problem z Chromium: 1183241

Usuwanie tokenów zaufania

Tokeny zaufania możesz teraz usuwać za pomocą nowego przycisku usuwania w panelu Tokeny zaufania w panelu Aplikacja.

Token zaufania to nowy interfejs API, który pomaga w walce z oszustwami i odróżnia boty od prawdziwych ludzi bez konieczności pasywnego śledzenia. Dowiedz się, jak zacząć korzystać z tokenów zaufania.

Usuwanie tokenów zaufania

Problem z Chromium: 1126824

Wyświetl szczegółowe informacje o zablokowanych funkcjach w widoku Szczegóły klatki

Szczegółowe informacje o zablokowanych funkcjach możesz teraz zobaczyć w sekcji Zasady dotyczące uprawnień w widoku szczegółów klatki.

Otwórz tę stronę demonstracyjną. Przejdź do panelu Application (Aplikacja) i wybierz ramkę. W sekcji Zasady dotyczące uprawnień przewiń do właściwości Wyłączone funkcje. Kliknij Pokaż szczegóły, aby wyświetlić szczegółowe informacje o tym, dlaczego dana funkcja jest zablokowana. Kliknij ikonę obok każdej zasady, aby przejść do elementu iframe lub żądania sieciowego, które zablokowały tę funkcję.

Zasady dotyczące uprawnień to interfejs API platformy internetowej, który umożliwia witrynie zezwalanie na korzystanie z funkcji przeglądarki lub blokowanie ich w umieszczonych w niej ramkach lub elementach iframe.

Zablokowane funkcje w widoku szczegółów ramki

Problem z Chromium: 1158827

Filtrowanie eksperymentów w ustawieniu Eksperymenty

Nowy filtr eksperymentu pozwala szybciej znajdować eksperymenty. Na przykład otwórz Ustawienia > Eksperymenty, a w polu tekstowym Filtr wpisz „kontrast”, aby odfiltrować wszystkie eksperymenty ze słowem „kontrast”.

Filtrowanie eksperymentów w ustawieniu Eksperymenty

Nowa kolumna Vary Header w panelu Pamięć podręczna

Użyj nowej kolumny Vary Header w panelu Cache Storage, aby wyświetlić nagłówek odpowiedzi HTTP Vary.

Kolumna nagłówka Vary

Problem z Chromium: 1186049

Ulepszenia panelu Źródła

Obsługa nowych funkcji JavaScript

Narzędzia deweloperskie obsługują teraz nową funkcję języka JavaScript sprawdzania marki prywatnej (#foo in obj).

Ta funkcja prywatnej kontroli marki rozszerza operator „in” o obsługę testowania pól klas prywatnych w przypadku dowolnego obiektu.

Wypróbuj tę funkcję w panelu Konsola i Źródła. Możesz też przejrzeć pola prywatne w sekcji Zakres w panelu debugera.

Testy prywatnych marek JavaScript

Problem z Chromium: 11374

Ulepszona obsługa debugowania punktów przerwania

Narzędzia deweloperskie mogą teraz prawidłowo ustawiać punkty przerwania w wielu skryptach. Nowoczesne pakiety JavaScript (np.Webpack, Rollup) obsługują funkcję podziału kodu. W niektórych sytuacjach 1 współdzielony komponent może znaleźć się w wielu trasach (podziały kodu).

Wcześniej za pomocą Narzędzi deweloperskich można było ustawiać punkty przerwania tylko w 1 nieprzetworzonej lokalizacji. Dzięki temu najnowszemu ulepszeniu Narzędzia deweloperskie mogą prawidłowo ustawiać punkty przerwania we wszystkich odpowiednich lokalizacjach.

Problemy z Chromium: 1142705, 979000, 1180794

Obsługa podglądu po najechaniu kursorem myszy za pomocą notacji []

Narzędzia deweloperskie obsługują teraz podgląd najechany kursorem w wyrażeniach członkowskich JavaScriptu, które korzystają z notacji [] w panelu Źródła.

Obsługa podglądu po najechaniu kursorem myszy w postaci notacji „[]”

Problem z Chromium: 1178305

Ulepszony kontur plików HTML

Narzędzia deweloperskie obsługują teraz lepszą obsługę konspektu plików HTML. W panelu Źródła otwórz plik HTML. Aby przełączyć konspekt kodu, naciśnij Cmd + Shift + O na Macu lub Ctrl + Shift + O w systemie Windows.

W poniższym przykładzie w Narzędziach deweloperskich prawidłowo wyświetlają się wszystkie funkcje w obramowaniu. Wcześniej w Narzędziach deweloperskich widoczne były tylko niektóre funkcje.

Ulepszony kontur plików HTML

Problem z Chromium: 761019, 1191465

Prawidłowe zrzuty stosu błędów na potrzeby debugowania Wasm

DevTools obsługuje teraz wbudowane wywołania funkcji i wyświetlają odpowiednie zrzuty stosu błędów na potrzeby debugowania Wasm.

Wcześniej narzędzia deweloperskie wyświetlały w zrzucie stosu błędów tylko ogólne odwołania do Wasm.

Prawidłowe zrzuty stosu błędów na potrzeby debugowania Wasm

Stara wersja Chrome po lewej stronie nie pokazuje lokalizacji źródłowej (np. dsquare) w zrzucie stosu błędów, natomiast nowa wersja po prawej stronie już to pokazuje.

Problem z Chromium: 1189161

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