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

Kayce Basques

Nowe funkcje dotyczące plików cookie

Debugowanie przyczyny zablokowania pliku cookie

Po zarejestrowaniu aktywności sieciowej wybierz zasób sieciowy, a potem przejdź do zaktualizowanej karty Pliki cookie, aby dowiedzieć się, dlaczego pliki cookie żądania lub odpowiedzi tego zasobu zostały zablokowane. Aby dowiedzieć się, dlaczego w Chrome 76 i nowszych wersjach możesz widzieć więcej zablokowanych plików cookie, zapoznaj się z zmianami w domyślnym zachowaniu bez SameSite.

Karta Pliki cookie.

• Żółte pliki cookie żądania nie zostały wysłane przez sieć. Domyślnie są one ukryte. Aby je wyświetlić, kliknij pokaż odfiltrowane pliki cookie żądania.
• Żółte pliki cookie odpowiedzi zostały wysłane przez sieć, ale nie zostały zapisane.
• Aby dowiedzieć się, dlaczego plik cookie został zablokowany, najedź kursorem na Więcej informacji.
• Większość danych w tablicach Pliki cookie żądania i Pliki cookie odpowiedzi pochodzi z nagłówków HTTP zasobu. Dane Domain, Path i Expires/Max-Age pochodzą z protokołu narzędzi deweloperskich w Chrome.

Problemy z Chromium #856777 i #993843

Wyświetlanie wartości plików cookie

Aby wyświetlić wartość pliku cookie, kliknij wiersz w panelu Pliki cookie.

Wyświetlanie wartości pliku cookie

Problem z Chromium #462370

Symulowanie różnych ustawień preferencji prefers-color-scheme i prefers-reduced-motion

Zapytanie o media prefers-color-scheme umożliwia dopasowanie stylu witryny do preferencji użytkownika. Jeśli na przykład zapytanie o multimedia prefers-color-scheme: dark ma wartość true, oznacza to, że użytkownik ma ustawiony ciemny motyw w systemie operacyjnym i preferuje interfejs w ciemnym motywie.

Otwórz menu poleceń, uruchom polecenie Pokaż renderowanie, a następnie ustaw menu Emuluj funkcję mediów CSS „prefers-color-scheme”, aby debugować style prefers-color-scheme: dark i prefers-color-scheme: light.

Gdy ustawisz prefers-color-scheme: dark (pole środkowe), w polu obok (po prawej) pojawi się kod CSS, który jest stosowany, gdy zapytanie o multimedia ma wartość Prawda, a widokowanie wyświetla style ciemnego trybu (pole po lewej).

Możesz też symulować prefers-reduced-motion: reduce, korzystając z menu Emuluj funkcję mediów CSS prefers-reduced-motion obok menu Emuluj funkcję mediów CSS prefers-color-scheme.

Problem z Chromium #1004246

Emulacja strefy czasowej

Karta Sensory umożliwia teraz nie tylko zastępowanie geolokalizacji, ale też emulowanie dowolnych stref czasowych i testowanie wpływu na aplikacje internetowe. Co może być zaskakujące, ta nowa funkcja zwiększa też niezawodność emulacji geolokalizacji: wcześniej aplikacje internetowe mogły wykryć fałszowanie lokalizacji, porównując ją z miejscowym czasem użytkownika. Teraz, gdy geolokalizacja i emulacja strefy czasowej są połączone, ta kategoria niezgodności została wyeliminowana.

Aktualizacje pokrycia kodu

Na karcie Zakres możesz znaleźć nieużywany kod JavaScript i CSS.

Karta Zakresowanie używa teraz nowych kolorów do oznaczania użytego i nieużytego kodu. Ta kombinacja kolorów jest bardziej przystępna dla osób z zaburzeniami rozpoznawania barw. Czerwony pasek po lewej stronie przedstawia kod niewykorzystany, a niebieski pasek po prawej stronie – kod wykorzystany.

Nowe pole tekstowe Filtr według typu umożliwia filtrowanie informacji o zasięgu według typu: wyświetlanie tylko zasięgu JavaScript, tylko zasięg CSS lub wszystkich typów zasięgu.

Karta Zasięg.

Panel źródeł wyświetla dane dotyczące pokrycia kodu, jeśli są dostępne. Kliknięcie czerwonych lub niebieskawych znaczników obok numeru wiersza powoduje otwarcie karty Zasięg i wyróżnienie pliku.

Dane dotyczące zasięgu w panelu Źródła. Linia 8 to przykład nieużywanego kodu. Wiersz 11 to przykład użytego kodu.

Problemy z Chromium #1003671 i #1004185

Debugowanie powodu żądania zasobu sieciowego

Po zarejestrowaniu aktywności sieci wybierz zasób sieciowy, a potem przejdź do karty Inicjator, aby dowiedzieć się, dlaczego zasób został zażądany. Sekcja Stos wywołań żądania opisuje stos wywołań JavaScript prowadzący do żądania sieciowego.

Karta Inicjator.

Problemy w Chromium: 963183, 842488

Panele Konsola i Źródła ponownie uwzględniają ustawienia wcięcia

Od dawna w DevTools dostępne jest ustawienie umożliwiające dostosowanie wcięcia do 2 spacji, 4 spacji, 8 spacji lub tabulacji. Niedawno to ustawienie było w podstawie bezużyteczne, ponieważ panele Konsoli i Źródła ignorowały to ustawienie. Ten błąd został już naprawiony.

Aby ustawić preferencje, otwórz Ustawienia > Ustawienia > Źródła > Domyślne wcięcie.

Problem z Chromium #977394

Nowe skróty do nawigacji za pomocą kursora

Aby przenieść kursor na wiersz powyżej, w panelu Konsolę lub Źródła naciśnij Ctrl+P. Naciśnij Ctrl+N, aby przenieść kursor do wiersza poniżej.

Problem z Chromium #983874

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.