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

Kayce Basques

Nowe funkcje plików cookie

Debugowanie przyczyny zablokowania pliku cookie

Po zarejestrowaniu aktywności sieci wybierz zasób sieciowy, a następnie przejdź na zaktualizowaną kartę Pliki cookie, aby dowiedzieć się, dlaczego pliki cookie żądania lub odpowiedzi tego zasobu zostały zablokowane. Przeczytaj artykuł Zmiany domyślnego działania bez SameSite, aby dowiedzieć się, dlaczego w Chrome 76 i nowszych wersjach możesz widzieć więcej zablokowanych plików cookie.

Karta Pliki cookie.

Karta Pliki cookie.

  • Żółta ikona żądania plików cookie nie została przesłana przez przewód. Domyślnie są one ukryte. Aby je wyświetlić, kliknij pokaż odfiltrowane pliki cookie żądania.
  • Żółte pliki cookie odpowiedzi zostały wysłane przez przewód, ale nie zostały zapisane.
  • Najedź kursorem na opcję Więcej informacji informacje, aby dowiedzieć się, dlaczego plik cookie został zablokowany.
  • Większość danych w tabelach Żądania plików cookie i Pliki cookie odpowiedzi pochodzi z nagłówków HTTP zasobu. Dane dotyczące domeny, ścieżki i Wygasa/Max-Age pochodzą z protokołu Narzędzi deweloperskich w Chrome.

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

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 preferencji użytkownika. Jeśli na przykład zapytanie o multimedia prefers-color-scheme: dark ma wartość spójną, oznacza to, że użytkownik ustawił swój system operacyjny na tryb ciemny i preferował interfejsy trybu ciemnego.

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

prefers-color-scheme: ciemny

Po ustawieniu prefers-color-scheme: dark (środkowe pole) panel Style (po prawej) pokazuje CSS stosowany, gdy zapytanie o multimedia ma wartość prawda, a w widocznym obszarze widoczne są style trybu ciemnego (po lewej stronie).

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

Problem z Chromium #1004246

Emulacja strefy czasowej

Karta Czujniki pozwala teraz nie tylko override geolocation, ale także emulować dowolne strefy czasowe i testować wpływ na aplikacje internetowe. Co zaskakujące, ta nowa funkcja zwiększa też niezawodność emulacji geolokalizacji. Wcześniej aplikacje internetowe mogły wykrywać podszywanie się pod inne osoby, dopasowując lokalizację do lokalnej strefy czasowej użytkownika. Dzięki połączeniu geolokalizacji i emulacji strefy czasowej ta kategoria niezgodności została wyeliminowana.

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. Udowodniono, że ta kombinacja kolorów jest bardziej dostępna dla osób z wadami wzroku. Czerwony pasek po lewej stronie – nieużywany kod, a niebieskawy – używany.

Nowe pole tekstowe Filtr typu pokrycia umożliwia filtrowanie informacji o pokryciu według jego typu: wyświetlanie tylko pokrycia JavaScriptu, tylko CSS lub wyświetlanie wszystkich typów pokrycia.

Karta Zasięg

Karta Zasięg

Panel Źródła wyświetla dane o pokryciu kodu, jeśli są dostępne. Kliknij czerwone lub niebieskawe znaczniki obok numeru wiersza, aby otworzyć kartę Stan i podświetlić plik.

Dane o stanie w panelu Źródła.

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

Problemy z Chromium: #1003671, #1004185

Debugowanie przyczyny żądania zasobu sieciowego

Po zarejestrowaniu aktywności sieciowej wybierz zasób sieciowy, a potem przejdź do karty Inicjator, aby dowiedzieć się, dlaczego wysłano żądanie dotyczące zasobu. Sekcja Stos wywołań żądań opisuje stos wywołań JavaScriptu poprzedzający żądanie sieciowe.

Karta Inicjator

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, 4, 8 spacji lub tabulatorów. Ostatnio to ustawienie było zasadniczo bezużyteczne, ponieważ panele Konsola i Źródła je ignorowały. Naprawiliśmy już ten błąd.

Otwórz Ustawienia > Preferencje > Źródła > Wcięcie domyślne, aby określić swoje 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   Więcej   > Pomoc > Zgłoś problemy z Narzędziami deweloperskimi.
  • Opublikuj tweeta na stronie @ChromeDevTools.
  • Napisz komentarz pod filmem dotyczącym nowości w Narzędziach deweloperskich w Narzędziach deweloperskich w YouTube lub 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.

Chrome 127

Chrome 126

Chrome 125

Chrome 124

Chrome 123

Chrome 122

Chrome 121

Chrome 120

Chrome 119

Chrome 118

Chrome 117

Chrome 116

Chrome 115

Chrome 114

Chrome 113

Chrome 112

Chrome 111

Chrome 110

Chrome 109

Chrome 108

Chrome 107

Chrome 106

Chrome 105

Chrome 104

Chrome 103

Chrome 102

Chrome 101

Chrome 100

Chrome 99

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Chrome 93

Chrome 92

Chrome 91

Chrome 90

Chrome 89

Chrome 88

Chrome 87

Chrome 86

Chrome 85

Chrome 84

Chrome 83

Chrome 82

Chrome 82 został anulowany.

Chrome 81

Chrome 80

Chrome 79

Chrome 78

Chrome 77

Chrome 76

Chrome 75

Chrome 74

Chrome 73

Chrome 72

Chrome 71

Chrome 70

Chrome 68

Chrome 67

Chrome 66

Chrome 65

Chrome 64

Chrome 63

Chrome 62

Chrome 61

Chrome 60

Chrome 59