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

Informacje o wskaźnikach Web Vitals w panelu Wydajność

Aby dowiedzieć się, co oznacza wskaźnik Web Vitals w panelu Skuteczność, najedź na niego kursorem.

Problem z Chromium: 1147872

Wizualizacja funkcji CSS „snap-to-scroll”

Aby sprawdzić wyrównanie snapowania do przewijania CSS, możesz teraz przełączać plakietkę scroll-snap w panelu Elementy.

Jeśli element HTML na stronie (np. ta strona demonstracyjna) ma zastosowany element scroll-snap-type, obok niego w panelu Elementy pojawi się plakietka scroll-snap. Kliknij plakietkę, aby włączyć lub wyłączyć na stronie nakładkę przewijania.

W powyższym przykładzie widać kropki na krawędziach elementów. Port przesuwania ma pełne obrysy, a elementy snap mają przerywane obrysy. Odstęp od krawędzi dla przewijania jest zaznaczony na zielono, a margines dla przewijania na pomarańczowo.

Problem z Chromium: 862450

Nowe narzędzie do inspekcji pamięci

Użyj nowego inspektora pamięci, aby sprawdzić ArrayBuffer w JavaScriptie, a także 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ę. W panelu Debugger po prawej stronie rozwiń sekcję Zakres. Zwróć uwagę na nową ikonę obok wartości bufora. Kliknij go, aby wyświetlić Narzędzie do inspekcji pamięci.

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

Problem z Chromium: 1166577

Nowy panel ustawień plakietki w panelu Elementy

Odznaki możesz teraz włączać i wyłączać w ustawieniach odznak w panelu Elementy. Dzięki tej funkcji możesz dostosować i skupić się na najważniejszych plakietkach podczas sprawdzania stron internetowych.

W panelu Elementy kliknij prawym przyciskiem myszy dowolny element. W menu kontekstowym wybierz Ustawienia plakietki. U góry pojawi się panel ustawień plakietki. Aby wyświetlić lub ukryć plakietki, włącz lub wyłącz odpowiednie pole wyboru.

Problem z Chromium: 1066772

Ulepszona funkcja podglądu obrazu z informacjami o współczynniku proporcji

Podglądy obrazów w panelu Elementy zawierają teraz więcej informacji o obrazie: rozmiar renderowania, współczynnik kształtu renderowania, rozmiar własny, współczynnik kształtu własnego i rozmiar pliku.

Te informacje pomogą Ci lepiej poznać obrazy i w razie potrzeby je zoptymalizować.

Informacje o formacie obrazu są dostępne w panelu Sieć, gdy klikniesz, aby wyświetlić podgląd obrazu.

Problemy z Chromium: 1149832, 1170656

Nowy przycisk warunków sieci z opcjami konfiguracji Content-Encoding

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

Na karcie Warunki sieci została dodana nowa opcja Akceptowane kodowania treści. Skonfiguruj go tak, aby sprawdzić, czy odpowiedzi serwera są prawidłowo kodowane w przeglądarkach, które nie obsługują gzip, brotli ani innych przyszłych Content-Encoding.

Problem z Chromium: 1162042

Ulepszenia panelu stylów

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

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

Problem z Chromium: 1076198

Obsługa słowa kluczowego accent-color

Interfejs automatycznego uzupełniania w panelu Styli wykrywa teraz słowo kluczowe CSS accent-color, które pozwala programistom określić kolor akcentu dla elementów sterujących interfejsu (np. pola wyboru czy przycisku opcji) wygenerowanych przez element.

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

Problem z Chromium: 1092093

Podział typów problemów na kategorie za pomocą kolorów i ikon

Karta Problemy pozwala teraz podzielić problemy na błędy strony, nadchodzące zmiany powodujące niezgodność i możliwe ulepszenia, aby lepiej wskazać ich wagę. Aby otworzyć kartę Problemy, kliknij w konsoli przycisk Liczba problemów.

• Błędy strony (czerwone). Problemy, które mają bezpośredni wpływ na funkcjonalność strony, np. brak prawidłowego ustawienia nagłówków CORS.
• Nadchodzące zmiany powodujące niezgodność (żółte). Problemy, które informują o nadchodzącej niezgodnej zmianie platformy internetowej, która może spowodować utratę funkcjonalności strony (np. ostrzeżenie o nadchodzących zmianach w CORS RFC 1918).
• Możliwe ulepszenia (niebieski). Potencjalne ulepszenia strony, które nie wpływają na jej podstawowe funkcje (np. problemy z dostępnością)

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.

Trust Token to nowy interfejs API, który pomaga zwalczać oszustwa i odróżniać boty od prawdziwych użytkowników bez śledzenia pasywnego. Dowiedz się, jak zacząć korzystać z tokenów zaufania.

Problem z Chromium: 1126824

Wyświetlanie szczegółów dotyczących zablokowanych funkcji w widoku Szczegóły ramki

Szczegółowe informacje o zablokowanych funkcjach znajdziesz teraz w sekcji Zasady dotyczące uprawnień w widoku Szczegóły ramki.

Otwórz tę stronę demonstracyjną. Otwórz panel 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óły dotyczące powodu blokowania tej funkcji. Kliknij ikonę obok każdej zasady, aby przejść do ramki iframe lub żądania sieci, które zablokowały funkcję.

Zasady dotyczące uprawnień to interfejs API platformy internetowej, który umożliwia witrynie zezwolenie na korzystanie z funkcji przeglądarki w ramce własnej lub w ramkach iframe, które zawiera.

Problem z Chromium: 1158827

Filtrowanie eksperymentów w ustawieniu Eksperymenty

Szybciej znajduj eksperymenty dzięki nowemu filtrowi. Aby na przykład odfiltrować wszystkie eksperymenty z występowaniem słowa „kontrast”, otwórz Ustawienia > Eksperymenty i w polu tekstowym Filtruj wpisz „kontrast”.

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

Aby wyświetlić nagłówek odpowiedzi HTTP Vary, użyj nowej kolumny Vary Header w panelu Pamięć podręczna.

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, czyli #foo in obj, która służy do sprawdzania prywatnych marek.

Ta funkcja sprawdzania prywatnych marek rozszerza operator „w”, aby umożliwić testowanie prywatnych pól klasy w dowolnym obiekcie.

Wypróbuj to w panelu Konsola i Źródła. Pola prywatne możesz też sprawdzić w sekcji Zakres w panelu debugera.

Problem z Chromium: 11374

Ulepszona obsługa debugowania punktów przerwania

Narzędzie DevTools prawidłowo ustawia punkty kontrolne w wielu skryptach. Nowoczesne narzędzia do tworzenia pakietów JavaScript (np.Webpack, Rollup) obsługują funkcję dzielenia kodu. W niektórych przypadkach jeden udostępniony komponent może być uwzględniony na wielu trasach (dzielenie kodu).

Wcześniej w Narzędziach deweloperskich można było ustawiać punkty kontrolne tylko w jednym miejscu w surowych danych. Dzięki temu najnowszemu ulepszeniu DevTools może prawidłowo ustawiać punkty kontrolne we wszystkich odpowiednich miejscach.

Problemy z Chromium: 1142705, 979000, 1180794

Obsługa podglądu po najechaniu kursorem z notacją []

Narzędzia programistyczne obsługują teraz podgląd najechania na wyrażenia członkowskie JavaScriptu, które używają notacji [] w panelu Źródła.

Problem w Chromium: 1178305

Ulepszona struktura plików HTML

Narzędzie DevTools obsługuje teraz lepiej kontury w plikach HTML. W panelu Źródła otwórz plik HTML. Możesz włączyć lub wyłączyć zarys kodu, naciskając na Macu Cmd + Shift + O lub w Windowsie Ctrl + Shift + O.

W przykładzie poniżej narzędzia dla deweloperów poprawnie wyświetlają wszystkie funkcje w szkicu. Wcześniej DevTools wyświetlały tylko niektóre funkcje.

Problem z Chromium: 761019, 1191465

poprawne zrzuty stosu błędów do debugowania Wasm;

Narzędzia deweloperskie rozwiązują teraz wywołania funkcji w wierszu i wyświetlają prawidłowe ścieżki błędów w ramach debugowania Wasm.

Wcześniej w narzędziach deweloperskich w śladach stosu błędów wyświetlane były tylko ogólne odwołania do Wasm.

Stara wersja Chrome po lewej stronie nie pokazuje w śladach błędów lokalizacji źródła (np. dsquare), podczas gdy nowa wersja po prawej stronie tak.

Problem z Chromium: 1189161

Pobieranie kanałów podglądu

Rozważ użycie jako domyślnej przeglądarki deweloperskiej wersji Canary, Dev lub Beta przeglądarki Chrome. Te kanały wersji wstępnej zapewniają dostęp do najnowszych funkcji DevTools, umożliwiają testowanie najnowocześniejszych interfejsów API platformy internetowej i pomagają znaleźć problemy w witrynie, zanim zrobią to użytkownicy.

Kontakt z zespołem Narzędzi deweloperskich w Chrome

Aby omówić nowe funkcje, aktualizacje lub inne kwestie związane z Narzędziami deweloperskimi, skorzystaj z tych opcji.

• Przesyłaj opinie 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.
• Dodaj komentarze do filmów w YouTube z serii „Co nowego w Narzędziach deweloperskich” lub Wskazówki dotyczące Narzędzi deweloperskich.

Co nowego w Narzędziach deweloperskich

Lista wszystkich tematów omawianych w cyklu artykułów Co nowego w Narzędziach deweloperskich.