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

Kayce Basques

Nowe funkcje dotyczące plików cookie

Sprawdzanie, dlaczego plik cookie został zablokowany

Po zarejestrowaniu aktywności sieciowej wybierz zasób sieciowy, a następnie przejdź do zaktualizowanej karty Pliki cookie, aby dowiedzieć się, dlaczego pliki cookie żądania lub odpowiedzi tego zasobu zostały zablokowane. Więcej informacji o tym, dlaczego w Chrome 76 i nowszych wersjach możesz widzieć więcej zablokowanych plików cookie, znajdziesz w sekcji Zmiany domyślnego działania bez atrybutu SameSite.

Karta Pliki cookie.

• Żółte pliki cookie żądania nie zostały wysłane. Są one domyślnie ukryte. Aby je wyświetlić, kliknij pokaż odfiltrowane pliki cookie żądania.
• Żółte pliki cookie odpowiedzi zostały wysłane, ale nie zostały zapisane.
• Najedź kursorem na Więcej informacji , aby dowiedzieć się, dlaczego plik cookie został zablokowany.
• Większość danych w tabelach Request Cookies (Pliki cookie żądania) i Response Cookies (Pliki cookie odpowiedzi) pochodzi z nagłówków HTTP zasobu. Dane Domena, Ścieżka i Wygasa/Maksymalny wiek pochodzą z protokołu narzędzi deweloperskich w Chrome.

Problemy w Chromium #856777, #993843

Wyświetlanie wartości plików cookie

Kliknij wiersz w panelu Pliki cookie, aby wyświetlić wartość tego pliku cookie.

Wyświetlanie wartości pliku cookie.

Problem z Chromium 462370

Symulowanie różnych ustawień funkcji 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 zwraca wartość „true”, oznacza to, że użytkownik ustawił w systemie operacyjnym tryb ciemny i preferuje interfejsy w tym trybie.

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

Gdy ustawiona jest ikona prefers-color-scheme: dark (środkowe pole), w panelu Style (prawe pole) wyświetla się kod CSS, który jest stosowany, gdy zapytanie o media ma wartość true, a w obszarze wyświetlania widać style trybu ciemnego (lewe pole).

Możesz też symulować prefers-reduced-motion: reduce za pomocą menu Emuluj funkcję multimedialną CSS prefers-reduced-motion obok menu Emuluj funkcję multimedialną 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 wykrywać fałszowanie lokalizacji, porównując ją z lokalną strefą czasową użytkownika. Teraz, gdy emulacja geolokalizacji i strefy czasowej jest ze sobą powiązana, ta kategoria niezgodności została wyeliminowana.

Aktualizacje pokrycia kodu

Karta Pokrycie może pomóc Ci znaleźć nieużywany kod JavaScript i CSS.

Karta Pokrycie używa teraz nowych kolorów do oznaczania używanego i nieużywanego kodu. To połączenie kolorów jest bardziej dostępne dla osób z zaburzeniami rozpoznawania barw. Czerwony pasek po lewej stronie oznacza nieużywany kod, a niebieskawy pasek po prawej stronie – używany kod.

Nowe pole tekstowe filtra typu zakresu umożliwia filtrowanie informacji o zakresie według typu: wyświetlanie tylko zakresu JavaScript, tylko CSS lub wszystkich typów zakresu.

Karta Pokrycie.

Panel Źródła wyświetla dane o pokryciu kodu, gdy są one dostępne. Kliknięcie czerwonych lub niebieskawych oznaczeń obok numeru wiersza spowoduje otwarcie karty Pokrycie i wyróżnienie pliku.

Dane o pokryciu w panelu Źródła. Wiersz 8 to przykład nieużywanego kodu. Wiersz 11 to przykład użytego kodu.

Problemy z Chromium #1003671, #1004185

Sprawdzanie, dlaczego zażądano zasobu sieciowego

Po zarejestrowaniu aktywności sieciowej wybierz zasób sieciowy, a następnie otwórz kartę Inicjator, aby dowiedzieć się, dlaczego zasób został wysłany. W sekcji Stos wywołań żądania opisano stos wywołań JavaScript prowadzący do żądania sieciowego.

Karta Inicjator.

Problemy z Chromium: 963183, 842488

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

Od dawna w Narzędziach deweloperskich jest ustawienie, które pozwala dostosować preferencje dotyczące wcięcia do 2, 4 lub 8 spacji albo tabulatorów. Ostatnio to ustawienie było w zasadzie bezużyteczne, ponieważ panele Konsola i Źródła je ignorowały. Ten błąd został już naprawiony.

Wybierz Ustawienia > Ustawienia > Źródła > Domyślne wcięcie, aby ustawić preferencje.

Problem z Chromium #977394

Nowe skróty do nawigacji kursorem

Naciśnij Ctrl+P w panelach Konsola lub Źródła, aby przenieść kursor do wiersza powyżej. Naciśnij Control+N, aby przenieść kursor do wiersza poniżej.

Problem z Chromium #983874

Pobieranie kanałów podglądu

Rozważ używanie Chrome w wersji Canary, deweloperskiej lub beta jako domyślnej przeglądarki do programowania. Te kanały wersji testowych zapewniają dostęp do najnowszych funkcji Narzędzi deweloperskich, umożliwiają testowanie najnowocześniejszych interfejsów API platformy internetowej i pomagają znajdować problemy w witrynie, zanim zrobią to użytkownicy.

Skontaktuj się z zespołem Narzędzi deweloperskich w Chrome

Skorzystaj z tych opcji, aby porozmawiać o nowych funkcjach, aktualizacjach lub innych kwestiach związanych z Narzędziami deweloperskimi.

• Prześlij nam opinię 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.
• Zostawiaj komentarze pod filmami na YouTube z serii „Co nowego w Narzędziach deweloperskich” lub filmami z serii „Wskazówki dotyczące Narzędzi deweloperskich”.

Co nowego w Narzędziach deweloperskich

Lista wszystkich tematów omówionych w serii Nowości w Narzędziach deweloperskich.