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

Kayce Basques

Nowe funkcje dotyczące plików cookie

Debugowanie przyczyn zablokowania pliku cookie

Po zarejestrowaniu aktywności sieci wybierz zasób sieciowy, a potem otwórz zaktualizowaną kartę Pliki cookie, by dowiedzieć się, dlaczego pliki cookie żądania lub odpowiedzi zostały zablokowane. Przeczytaj artykuł Zmiany w domyślnym działaniu bez atrybutu 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.

  • Żółte pliki cookie żądania nie zostały przesłane przez sieć przewodową. Domyślnie są one ukryte. Kliknij pokaż odfiltrowane pliki cookie żądania, aby je wyświetlić.
  • Żółte pliki cookie odpowiedzi zostały wysłane przez kabel, ale nie zostały zapisane.
  • Najedź kursorem na Więcej informacji informacje, aby dowiedzieć się, dlaczego plik cookie został zablokowany.
  • Większość danych w tabelach 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 Chrome DevTools.

Problemy z Chromium: #856777, #993843

Wyświetl wartości plików cookie

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

Wyświetlanie wartości pliku cookie.

Wyświetlanie wartości pliku cookie.

Problem w Chromium: #462370

Symulowanie różnych preferencji kolorów i preferencji ograniczonego ruchu

Zapytanie o media prefers-color-scheme pozwala dopasować styl witryny do preferencji użytkownika. Jeśli na przykład zapytanie o media prefers-color-scheme: dark jest prawdziwe, oznacza to, że użytkownik ustawił w swoim systemie operacyjnym tryb ciemny i preferuje interfejs użytkownika w trybie ciemnym.

Otwórz menu poleceń, uruchom polecenie Show Rendering (Pokaż renderowanie), a następnie w menu Emulation media CSS features-color-scheme (funkcja emuluj multimedia) wybierz opcje, aby debugować style prefers-color-scheme: dark i prefers-color-scheme: light.

prefers-color-scheme: ciemny

Gdy ustawiona jest wartość prefers-color-scheme: dark (środkowe pole), panel Style (po prawej) pokazuje kod CSS stosowany, gdy to zapytanie o multimedia jest prawdziwe, a w widocznym obszarze są widoczne style trybu ciemnego (po lewej).

Możesz też przeprowadzić symulację funkcji prefers-reduced-motion: reduce, korzystając z menu Emuluj multimedia CSS w funkcji prefers-reduced-motion obok menu Emuluj multimedia CSS „prefers-color-scheme”.

Problem z Chromium #1004246

Emulacja strefy czasowej

Na karcie Czujniki możesz teraz nie tylko override geolocation, ale także emulować dowolne strefy czasowe i testować wpływ tej funkcji na Twoje aplikacje internetowe. Co ciekawe, nowa funkcja zwiększa również niezawodność emulacji geolokalizacji: wcześniej aplikacje internetowe mogły wykrywać podszywanie się pod lokalizację, porównując ją z lokalną strefą czasową użytkownika. Dzięki połączeniu geolokalizacji i emulacji strefy czasowej ta kategoria niezgodności jest eliminowana.

Aktualizacje zasięgu kodu

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

Na karcie Zasięg widać teraz używany i nieużywany kod w nowych kolorach. Udowodniono, że ta kombinacja kolorów jest bardziej przystępna dla osób z zaburzeniami rozpoznawania barw. Czerwony pasek po lewej stronie oznacza nieużywany kod, a niebieskawy pasek po prawej stronie – kod użyty.

Nowe pole tekstowe filtr typu pokrycia umożliwia filtrowanie informacji o pokryciu według ich typu: wyświetlanie tylko pokrycia JavaScript, tylko CSS, lub wszystkich rodzajów pokrycia.

Karta Zasięg.

Karta Zasięg.

W panelu Źródła wyświetlane są dane o zasięgu kodu, jeśli są dostępne. Kliknięcie czerwonego lub niebieskawego znacznika obok numeru wiersza otwiera kartę Zakres i wyróżnia plik.

Dane dotyczące pokrycia w panelu Źródła.

Dane dotyczące pokrycia w panelu Źródła. Przykład nieużywanego kodu. Przykładem wykorzystanego kodu jest wiersz 11.

Problemy z Chromium: #1003671, #1004185

Debugowanie przyczyny wysłania prośby o zasób sieci

Po zarejestrowaniu aktywności w sieci wybierz zasób sieciowy, a potem otwórz kartę Inicjator, aby dowiedzieć się, dlaczego zażądano zasobu. Sekcja Stos wywołań żądania opisuje stos wywołań JavaScript prowadzący do żądania sieciowego.

Karta Inicjator.

Karta Inicjator.

Problemy z Chromium: 963183, 842488

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

Od dawna w Narzędziach deweloperskich dostępne było ustawienie umożliwiające dostosowywanie wcięć do 2 spacji, 4 spacji, 8 spacji lub 2 spacji albo tabulatorów. Ostatnio to ustawienie było praktycznie bezużyteczne, ponieważ panele konsoli i źródeł ignorowały je. Naprawiliśmy już ten błąd.

Aby skonfigurować ustawienie, kliknij Ustawienia > Preferencje > Źródła > Wcięcie domyślne.

Problem z Chromium #977394

Nowe skróty do nawigacji kursorem

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

Problem z Chromium #983874

Pobieranie kanałów podglądu

Jako domyślnej przeglądarki dla programistów możesz używać Chrome Canary, Dev lub Beta. Te kanały podglądu dają dostęp do najnowszych funkcji Narzędzi deweloperskich, umożliwiają testowanie najnowocześniejszych interfejsów API platform internetowych oraz wykrywanie problemów w witrynie, zanim zdołają zrobić użytkownicy.

Kontakt z zespołem Narzędzi deweloperskich w Chrome

Użyj poniższych opcji, aby omówić nowe funkcje i zmiany w poście lub wszelkie inne kwestie związane z Narzędziami dla deweloperów.

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

Co nowego w Narzędziach deweloperskich

Lista wszystkich omówionych funkcji w serii Co nowego w Narzędziach deweloperskich.

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

101 Chrome

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

Subskrypcja Chrome 82 została anulowana.

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