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 włączony 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 stylów (pole prawe) pojawi się kod CSS, który jest stosowany, gdy zapytanie o multimedia ma wartość true, a widokowanie wyświetla style ciemnego trybu (pole lewe).

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 Czujniki 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. Ponieważ teraz 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 Zasięg 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 użyty.

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 o zakresie testowania kodu, jeśli są dostępne. Kliknięcie czerwonych lub niebieskawych znaczników obok numeru wiersza otwiera kartę Zasięg i wyróżnia plik.

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 konsoli i źródeł ponownie uwzględniają ustawienia wcięcia

Od dawna w narzędziach dla deweloperów 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 kursorem

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

Problem z Chromium #983874

Pobieranie kanałów podglądu

Rozważ użycie jako domyślnej przeglądarki deweloperskiej przeglądarki Chrome w wersji Canary, Dev lub Beta. 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.
• 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 Nowości w Narzędziach deweloperskich.