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

Kayce Basques

Nowe funkcje plików cookie

Debugowanie przyczyny zablokowania pliku cookie

Po zarejestrowaniu aktywności sieciowej wybierz jej zasób, a następnie przejdź do zaktualizowanego Pliki cookie, aby dowiedzieć się, dlaczego pliki cookie żądania lub odpowiedzi danego zasobu zostały zablokowane. Zobacz Zmiany w domyślnym działaniu bez zastosowania atrybutu SameSite, które pozwalają ustalić, dlaczego widzisz więcej pliki cookie w przeglądarce Chrome 76 i nowszych zostały zablokowane.

Karta Pliki cookie.

• Żółta ikona żądania plików cookie nie została przesłana przez przewód. Domyślnie są one ukryte. Kliknij przycisk Pokaż odfiltrować pliki cookie żądania, aby je wyświetlić.
• Żółte pliki cookie odpowiedzi zostały wysłane przez przewód, ale nie zostały zapisane.
• Najedź kursorem na Więcej informacji. , aby dowiedzieć się, dlaczego jest używany plik cookie Użytkownik został zablokowany.
• Większość danych w tabelach Pliki cookie żądań i Pliki cookie odpowiedzi pochodzi z plików cookie nagłówki HTTP zasobu. Dane domeny, ścieżki i Wygasa/Max-Age pochodzą z Protokół Chrome DevNarzędzia.

Problemy z Chromium: #856777, #993843

Wyświetlanie wartości plików cookie

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

Wyświetlanie wartości pliku cookie

Problem z Chromium #462370

Symulowanie różnych preferencji „prefers-color-sche” i „prefers-reduced-motion”

Zapytanie o multimedia prefers-color-scheme pozwala dopasować styl witryny do stylu użytkownika. ustawieniach. Jeśli na przykład zapytanie o media prefers-color-scheme: dark jest prawdziwe, oznacza to, że użytkownik ustawił system operacyjny w trybie ciemnym i preferuje UI w tym trybie.

Otwórz menu poleceń, uruchom polecenie Pokaż renderowanie, a następnie ustaw Emmuluj multimedia CSS funkcja prefers-color-scheme do debugowania elementów prefers-color-scheme: dark i prefers-color-scheme: light stylów.

Po ustawieniu atrybutu prefers-color-scheme: dark (środkowe pole) w panelu Style (po prawej stronie) wyświetla się arkusz CSS, który zostanie zastosowany, gdy zapytanie o multimedia zostanie zrealizowane, a w widocznym obszarze wyświetlą się style trybu ciemnego (po lewej stronie).

Możesz również zasymulować prefers-reduced-motion: reduce, używając funkcji Emuluj multimedia CSS menu prefers-reduced-motion obok opcji Emuluj funkcję multimediów CSS „prefers-color-scheme”. .

Problem z Chromium #1004246

Emulacja strefy czasowej

Na karcie Czujniki możesz teraz nie tylko zastępować geolokalizację, ale też emulować dowolne stref czasowych i testować wpływ tych zmian na Twoje aplikacje internetowe. Być może zaskakująco, nowa funkcja poprawia niezawodność emulacji geolokalizacji. Wcześniej aplikacje internetowe mogły wykrywać próby podszywania się dopasowania lokalizacji do lokalnej strefy czasowej użytkownika. Dzięki emulacji geolokalizacji i strefy czasowej są sprzężone, ta kategoria niedopasowań jest eliminowana.

Aktualizacje pokrycia kodu

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

Karta Pokrycie ma teraz nowe kolory reprezentujące używany i nieużywany kod. Ta kombinacja kolorów jest są bardziej przystępne dla osób z wadami wzroku. Czerwony pasek po lewej oznacza nieużywany kod, a niebieskawy pasek po prawej stronie symbolizuje używany kod.

Nowe pole tekstowe Filtr typu umożliwia filtrowanie informacji o stanie pokrycia według jego typu: wyświetlanie tylko zasięgu JavaScriptu i CSS albo wyświetlanie wszystkich typów pokrycia.

Karta Zasięg

Panel Źródła wyświetla dane o pokryciu kodu, jeśli są dostępne. klikając czerwone lub niebieskawe znaki, obok numeru wiersza, otwiera kartę Stan i podświetla plik.

Dane o stanie w panelu Źródła. Przykład nieużywanego kodu to wiersz 8. Wiersz 11 to przykład: użyty kod.

Problemy z Chromium: #1003671, #1004185

Debugowanie przyczyny żądania zasobu sieciowego

Po zarejestrowaniu aktywności sieciowej wybierz zasób sieciowy, a następnie przejdź do sekcji Inicjator. , aby poznać przyczynę wysłania prośby o dostęp do zasobu. Sekcja Stos wywołań żądań opisuje Stos wywołań JavaScriptu prowadzący do żądania sieciowego.

Karta Initiator (Inicjator).

Problemy z Chromium: 963183, 842488

Panele konsoli i źródeł ponownie uwzględniają ustawienia wcięć

Od dawna w Narzędziach deweloperskich było dostępne ustawienie dostosowywania preferencji wcięcia do 2 spacji: 4 spacje, 8 spacji lub tabulatorów. Ostatnio to ustawienie było zasadniczo bezużyteczne, ponieważ konsola Panele źródeł ignorowały to ustawienie. Naprawiliśmy już ten błąd.

Otwórz Ustawienia > Ustawienia > Źródła > Wcięcie domyślne pozwala ustawić ustawienia.

Problem w Chromium: #977394

Nowe skróty do nawigacji za pomocą kursora

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

Problem z Chromium #983874

Pobierz kanały podglądu

Zastanów się, czy nie ustawić Chrome w wersji Canary, Dev lub beta jako domyślnej przeglądarki do programowania. Te kanały wersji testowej dają dostęp do najnowszych funkcji Narzędzi deweloperskich, umożliwiają testowanie najnowocześniejszych interfejsów API platformy internetowej i wykrywanie problemów w witrynie, zanim użytkownicy ją zobaczą.

Kontakt z zespołem ds. Narzędzi deweloperskich w Chrome

Skorzystaj z poniższych opcji, aby porozmawiać o nowych funkcjach i zmianach w poście lub o innych kwestiach związanych z Narzędziami deweloperskimi.

• Prześlij nam sugestię lub opinię na crbug.com.
• Aby zgłosić problem z Narzędziami deweloperskimi, kliknij Więcej opcji   > Pomoc > Zgłoś problemy z Narzędziami deweloperskimi w Narzędziach deweloperskich.
• Opublikuj tweeta na stronie @ChromeDevTools.
• Napisz komentarz w filmach w YouTube o nowościach w Narzędziach deweloperskich lub o filmach w YouTube ze wskazówkami dotyczącymi Narzędzi deweloperskich.

Co nowego w Narzędziach deweloperskich

Lista wszystkich tematów, które zostały omówione w serii Co nowego w Narzędziach deweloperskich.