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

Sofia Emelianova
Sofia Emelianova
GitHub

Wycofanie plików cookie innych firm

Twoja witryna może korzystać z plików cookie innych firm. W miarę zbliżania się do wycofania tych plików musisz podjąć odpowiednie działania. Aby dowiedzieć się, co zrobić z plikami cookie, których dotyczy ten problem, przeczytaj artykuł Przygotowanie do wycofania plików cookie innych firm.

Pole wyboru Pole wyboru. Uwzględnij problemy z plikami cookie innych firm jest domyślnie włączone dla wszystkich użytkowników Chrome. Dlatego karta Problemy wyświetla teraz ostrzeżenie o plikach cookie, na które będzie mieć wpływ planowane wycofanie i wycofanie tych plików. Możesz w dowolnym momencie usunąć zaznaczenie tego pola wyboru, aby problemy nie były już wyświetlane.

Na karcie Problemy pojawi się ostrzeżenie o nadchodzącym wycofaniu plików cookie innych firm.

Problem z Chromium: 1466310.

Analizowanie plików cookie w witrynie za pomocą narzędzia do analizy Piaskownicy prywatności

Trwają prace nad rozszerzeniem narzędzia do analizy Piaskownicy prywatności dla Narzędzi deweloperskich. Obecnie znajduje się w nim najnowsza przedpremierowa wersja 0.3.2. Dzięki temu narzędziu dowiesz się, jak Twoja witryna wykorzystuje pliki cookie, a także uzyskasz wskazówki na temat nowych interfejsów API Chrome chroniących prywatność.

Aby analizować pliki cookie:

  1. Zainstaluj rozszerzenie w Chrome.
  2. Aby uzyskać jak najlepszą analizę, otwórz witrynę w jednej karcie.
  3. Otwórz Narzędzia deweloperskie i przejdź do panelu Piaskownica prywatności. Ten panel może być ukryty za przyciskiem menu Więcej kart. u góry.
  4. Otwórz sekcję Pliki cookie i kliknij Analizuj tę kartę. Jeśli narzędzie nie znalazło żadnych plików cookie, odśwież stronę.

Narzędzie do analizy Piaskownicy prywatności.

Więcej informacji o tym, jak korzystać z narzędzia analizy Piaskownicy prywatności (PSAT), znajdziesz w tych artykułach:

  • Poradnik PSAT.
  • Aby przewidzieć, co może się stać po wycofaniu tej funkcji, skonfiguruj środowisko oceny.
  • Aby zidentyfikować te aspekty, zapoznaj się z sekcją Ogólne działania analizy.
  • Aby dowiedzieć się, jak analizować typowe scenariusze, w tym analitykę, handel elektroniczny, usługi logowania jednokrotnego, umieszczone treści i inne, zapoznaj się z przykładami demonstracyjnymi w artykule Scenariusze analizy.

Zapoznaj się też ze wskazówkami dotyczącymi problemów z raportowaniem.

Rozszerzona lista ignorowanych informacji

Domyślny wzorzec wykluczania dla: node_modules

Ta wersja włącza domyślne wyrażenie regularne jako niestandardową regułę wykluczania w Ustawienia. Ustawienia > Lista ignorowanych. Aby pomóc Ci skupić się tylko na kodzie, Debuger domyślnie pominie teraz skrypty od /node_modules/ i /bower_components/. W każdej chwili możesz wyłączyć tę regułę w ustawieniach.

Przed i po dodaniu wyrażenia regularnego.

Problem z Chromium: 1496301.

Wyjątki zatrzymują teraz wykonywanie, jeśli zostaną przechwycone lub przekazane do nieignorowanego kodu

Gdy podczas debugowania kodu Pole wyboru. zaznaczono opcję Wstrzymaj przy wykrytych wyjątkach, Debuger zatrzymuje teraz wykonanie w następujących przypadkach (synchronicznych i asynchronicznych) w następujących przypadkach:

  • Wyjątki wychwycone w nieignorowanych ramkach w stosie wywołań.
  • Wykryte wyjątki, które przechodzą przez nieignorowane klatki w stosie wywołań. Zobacz np. zrzut ekranu.

Wstrzymaj się przy zarejestrowanych wyjątków, które przeszły przez nieignorowany kod.

Aby przetestować to działanie, otwórz tę stronę demonstracyjną:

  1. Otwórz Narzędzia deweloperskie > Źródła, dodaj folder hidden do listy ignorowanych i zaznacz Pole wyboru. Wstrzymaj przy wykrytych wyjątkach.
  2. Na stronie pod listą scenariuszy „Przechwycone” kliknij poszczególne przyciski, aby sprawdzić, czy wykonanie zostało wstrzymane we wspomnianych przypadkach.

Aby wstrzymać wykonywanie w przypadku rozpoznanych lub niewykrytych wyjątków (gdy jest zaznaczone) w wywołaniach asynchronicznych, Debugger szuka modułów obsługi odrzucenia w obietnicach. Począwszy od tej wersji Debugger nie przewiduje już, że Promise.finally() wychwyci wyjątek, podobnie jak blok try...finally.

Problemy z Chromium: 1489312, 1291064.

Nazwa zasobu x_google_ignoreList została zmieniona na ignoreList w mapach źródeł

Specyfikacja map źródłowych zawiera pole ignoreList zamiast x_google_ignoreList, a Narzędzia deweloperskie obsługują teraz nową nazwę z zastępczą starą. Platformy i pakiety mogą teraz używać nowej nazwy pola.

Mapy źródeł umożliwiają debugowanie napisanego kodu zamiast zminifikowanego kodu udostępnianego przez Twoją witrynę.

Więcej informacji o mapach źródeł znajdziesz w tych artykułach:

Nowy przełącznik trybu wprowadzania podczas zdalnego debugowania

Teraz podczas zdalnego debugowania karty Chrome możesz przełączać się między trybem dotykowym i sterowaniem myszą. Dzieje się tak na przykład wtedy, gdy uruchomisz instancję Chrome z interfejsem --remote-debugging-port=<port> i połączysz się z tą siecią docelową przez chrome://inspect/#devices.

Obejrzyj film, by zobaczyć, jak działa tryb wprowadzania.

Problem z Chromium: 1410433.

Panel Elementy wyświetla teraz adresy URL #document węzła

Aby ułatwić debugowanie elementów iframe, panel Elementy wyświetla teraz ikonę documentURL obok #document węzłów.

Przed i po widać element documentURL obok węzła #document.

Problem z Chromium: 1376976.

Obowiązująca polityka bezpieczeństwa treści w panelu aplikacji

Możesz teraz wyświetlić szczegóły sprawdzanej ramki Content Security Policy (CSP). Aby wyświetlić szczegóły, kliknij Aplikacja > Ramki, wybierz ramkę i przewiń w dół do sekcji Content Security Policy (CSP).

Sekcja Content Security Policy na karcie Application.

Problem z Chromium: 1424714.

Ulepszone debugowanie animacji

Na karcie Animacje możesz teraz:

  • Kliknij dowolne miejsce nagłówka osi czasu, aby ustawić suwak odtwarzania. Animacja jest odtwarzana dalej, jeśli była już odtwarzana, lub zatrzymuje się w innym przypadku. Wcześniej trzeba było to przeciągnąć.
  • Aby zobaczyć pełne nazwy animacji, zmień rozmiar kolumny z nazwą.

Problemy z Chromium: 1492460, 1489721.

Okno „Czy ufasz temu kodowi?” w sekcji Źródła i ostrzeżenie przed samodzielnym XSS w konsoli

Pole wyboru. Pokaż ostrzeżenie o własnym XSS podczas wklejania kodu eksperyment jest domyślnie włączony. Self-XSS (self-cross-site scripting) to atak, który nakłania cyberprzestępcy do wklejenia złośliwego kodu do Narzędzi deweloperskich i pozwala hakerowi przejąć kontrolę nad Twoimi kontami internetowymi i danymi osobowymi.

Jeśli jesteś nowym użytkownikiem Narzędzi deweloperskich i próbujesz wkleić kod, w panelu Źródła pojawi się okno Czy ufasz temu kodowi?, a w konsoli pojawi się podobne ostrzeżenie. Wklej tylko ten kod, który rozumiesz i został przez Ciebie sprawdzony. Aby wkleić, po wyświetleniu prośby wpisz allow pasting. Jeśli raz zezwolisz na wklejanie, ostrzeżenie nie będzie się już pojawiać.

Okno dialogowe „Czy ufasz temu kodowi?” podczas wklejania kodu w Źródłach.

Problem z Chromium: 345205.

Punkty przerwania detektora zdarzeń w instancjach roboczych i Workletach

Gdy ustawisz punkt przerwania zdarzenia w sekcji Źródła > Punkty przerwania detektora zdarzeń, oprócz wstrzymania działania tego zdarzenia w witrynie Debugger zostanie też wstrzymany, gdy odpowiednie zdarzenie wystąpi w instancji roboczej lub worklecie dowolnego typu, w tym workletu pamięci współdzielonej.

Debuger został wstrzymany, gdy skrypt service worker wywoła funkcję ustawiania limitu czasu.

Problem z Chromium: 1445175.

Nowa plakietka mediów dla: <audio> i <video>

Nową plakietkę multimediów możesz teraz włączyć w przypadku elementów <audio> i <video> w panelu Elementy. Gdy klikniesz plakietkę, przejdziesz do panelu Multimedia, gdzie możesz debugować te elementy.

Włączono nową plakietkę multimediów dla tagów audio i wideo.

Ta funkcja jest w trakcie opracowywania i będzie stale ulepszana. Zespół Narzędzi deweloperskich chce podziękować Junseo (Jeremy) Yoo za wprowadzenie tego ulepszenia.

Problem z Chromium: 1448214.

Zmiana nazwy wstępnego ładowania na ładowanie spekulacyjne

Aby uniknąć nadużywania poprzedniego terminu i lepiej odzwierciedlić to zachowanie, zmieniliśmy nazwę opcji Aplikacja > Wstępne wczytywanie na Ładowanie spekulacyjne. Wczytywanie spekulacyjne umożliwia błyskawiczne ładowanie strony na podstawie reguł spekulacyjnych, które możesz zdefiniować na potrzeby wstępnego renderowania i pobierania z wyprzedzeniem większości odwiedzanych stron.

Zmiany przed i po zmianie nazwy wstępnego ładowania na ładowanie spekulacyjne.

Problem z Chromium: 1478888.

Lighthouse 11.2.0

Panel Lighthouse korzysta teraz z Lighthouse 11.2.0. Zobacz pełną listę zmian.

Ta aktualizacja obejmuje zmianę kategorii skuteczności. Statystyki skuteczności są teraz oceniane i ustalane w pierwszej kolejności na podstawie ich szacowanego wpływu na dane o skuteczności. Dodatkowo wskaźnik wyniku wydajności zawiera bardziej szczegółowe informacje o wpływie poszczególnych danych na wynik.

Zmiana wydajności przed i po.

Podstawy korzystania z panelu Lighthouse w Narzędziach deweloperskich znajdziesz w artykule Lighthouse: optymalizacja szybkości witryny.

Problemy z Chromium: 772558.

Udoskonalone ułatwienia dostępu

W tej wersji wprowadziliśmy te ulepszenia ułatwień dostępu:

  • Czytniki ekranu będą teraz informować o stanie pól wyboru w sekcji Źródła > Punkty przerwania (zaznaczone lub odznaczone).
  • Teraz możesz otworzyć menu Ukryj takie problemy za pomocą klawiatury.

Problemy z Chromium: 1488645, 1484918.

Inne ważne informacje

Oto kilka ważnych poprawek i ulepszeń w tej wersji:

  • Wydajność: naprawiono brakujący wskaźnik LCP w nagraniu (1487136).
  • Ładowanie spekulacyjne: poprawiono pełne adresy URL celów w menu w panelu Sieć (1471020).
  • Pokrycie:
    • Stały podział wiersza po wierszu w przypadku dokładnie nadrukowanego kodu (1464974).
    • Informacje o zasięgu są teraz aktualizowane podczas ponownego wczytywania strony (1494457).
  • Konsola:
    • Rozwiązanie problemu z częściowym zaznaczaniem tekstu w wiadomościach (1487449).
    • Naprawiliśmy migotanie menu autouzupełniania (1487453).
    • Obsługiwane nawiasy w ścieżkach stosu i adresach URL w zrzucie stosu (1473926).
  • Źródła: obsługiwane jest wyróżnianie składni słowa kluczowego using TypeScript (1490515).
  • Menu Szybkie otwieranie pokazuje teraz metody prywatne (1492957).
  • Aplikacja > Usługi w tle: górny pasek działań zawija teraz tekst podczas zmiany rozmiaru (1487276).
  • Elementy > Style:
    • Poprawiono rozdzielczość dziedziczonych zmiennych CSS w przypadku elementów z boksami (1492162).
    • Gdy wyłączysz właściwość CSS, jej komentarze są teraz usuwane, by naprawić błędy w składni (1101224).
  • Sieć: w kolumnie Priorytet wyświetla się teraz etykietka z informacjami o początkowym priorytecie (jest ona wyświetlana, gdy zaznaczona jest opcja Duże wiersze żądania) (1495735).
  • Elementy wycofane z użytku:
    • Ustawienie Format kolorów zostało wyłączone w poprzednich wersjach i zostanie usunięte.
    • Opcja Usuń wszystkie zastąpienia w sekcji Źródła została usunięta ze względu na niewielkie wykorzystanie po uprościeniu zastąpień (1473681).

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