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

Sofia Emelianova
Sofia Emelianova
GitHub

Wycofanie plików cookie innych firm

Twoja witryna może używać plików cookie innych firm. Nadszedł czas, by podjąć działania, gdy będzie zbliżać się ich wycofanie. Aby dowiedzieć się, co zrobić z plikami cookie, których dotyczy 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 na karcie Problemy pojawi się ostrzeżenie o plikach cookie, na które będzie miało wpływ nadchodzące wycofanie lub wycofanie plików cookie innych firm. W każdej chwili możesz usunąć zaznaczenie tego pola wyboru, jeśli nie chcesz, aby te problemy były wyświetlane.

Ostrzeżenie na karcie Problemy o zbliżającym się wycofaniu plików cookie innych firm.

Problem z Chromium: 1466310.

Analizuj pliki cookie w swojej witrynie za pomocą narzędzia Privacy Sandbox Analysis Tool

Rozszerzenie Privacy Sandbox Analysis Tool do Narzędzi deweloperskich jest w fazie rozwoju w najnowszej przedpremierowej wersji 0.3.2. To narzędzie pozwala dowiedzieć się, jak witryna korzysta z plików cookie, oraz podaje wskazówki na temat nowych interfejsów API Chrome chroniących prywatność.

Aby przeanalizować pliki cookie:

  1. Zainstaluj rozszerzenie w Chrome.
  2. Aby uzyskać najlepszą analizę, otwórz swoją witrynę w jednej karcie.
  3. Otwórz Narzędzia deweloperskie i przejdź do panelu Piaskownicy 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 znajdzie żadnych plików cookie, spróbuj ponownie załadować stronę.

Privacy Sandbox Analysis Tool.

Więcej informacji o korzystaniu z narzędzia Privacy Sandbox Analysis Tool (PSAT) znajdziesz w tych artykułach:

  • Poradnik PSAT.
  • Aby przewidzieć, co się stanie po wycofaniu usługi, skonfiguruj środowisko oceny.
  • Aby określić aspekty, na które mają wpływ zmiany, przeczytaj artykuł Ogólne działania analizy.
  • Aby dowiedzieć się, jak analizować typowe scenariusze, m.in. usługi analityczne, e-commerce, usługi logowania jednokrotnego, umieszczone treści i inne, zapoznaj się z przykładami demonstracyjnymi w sekcji Scenariusze analizy.

Zapoznaj się też ze wskazówkami dotyczącymi zgłaszania problemów.

Rozszerzone informacje o ignorowaniu

Domyślny wzorzec wykluczania dla: node_modules

W tej wersji domyślne wyrażenie regularne może być używane jako niestandardowa reguła wykluczania w sekcji Ustawienia. Ustawienia > Lista ignorowanych. Aby pomóc Ci skupić się tylko na kodzie, Debuger będzie teraz domyślnie pomijać skrypty z języków /node_modules/ i /bower_components/. W każdej chwili możesz wyłączyć tę regułę w ustawieniach.

Informacje o dodaniu wyrażenia regularnego przed i po nim.

Problem z Chromium: 1496301.

Wyjątki teraz zatrzymują wykonywanie, jeśli zostaną wykryte lub przekazane przez nieignorowany kod

Gdy debugujesz kod z zaznaczoną opcją Pole wyboru. Wstrzymaj przy wykrytych wyjątkach, Debuger zatrzymuje teraz wykonywanie w przypadku następujących przechwyconych wyjątków, zarówno synchronicznych, jak i asynchronicznych:

  • Wyjątki stanowiące nieignorowane klatki w stosie wywołań.
  • Wykryto wyjątki, które przechodzą przez nieignorowane klatki w stosie wywołań. Patrz przykładowy zrzut ekranu.

Wstrzymaj na wykrytym wyjątekach, które przeszły przez nieignorowany kod.

Aby przetestować to zachowanie, 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 liście w sekcji „Przechwycone” scenariusze kliknij odpowiednie przyciski, aby sprawdzić, czy wykonywanie we wspomnianych przypadkach zostało wstrzymane.

Aby wstrzymać wykonywanie po wykryciu lub niewychwyconych wyjątkach (gdy ta opcja jest zaznaczona) w wywołaniach asynchronicznych, Debuger wyszukuje moduły obsługi odrzucenia w ramach obietnic. Począwszy od tej wersji, Debuger nie przewiduje, że Promise.finally() wyłapuje wyjątek, podobnie jak blok try...finally nie wykrywa żadnego.

Problemy z Chromium: 1489312, 1291064.

Nazwa „x_google_ignoreList” została zmieniona na „ignoreList” w mapach źródłowych

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

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

Więcej informacji o mapach źródłowych znajdziesz tutaj:

Nowy przełącznik trybu wprowadzania podczas debugowania zdalnego

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

Obejrzyj film, aby zobaczyć, jak działa przełączanie trybów wprowadzania.

Problem z Chromium: 1410433.

Panel Elementy pokazuje teraz adresy URL #document węzła

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

Elementy „przed” i „po” pokazują adres documentURL obok węzła #document.

Problem z Chromium: 1376976.

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

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

Sekcja Content Security Policy (Polityka bezpieczeństwa treści) na karcie Aplikacja.

Problem z Chromium: 1424714.

Ulepszone debugowanie animacji

Na karcie Animacje możesz teraz:

  • Aby ustawić suwak odtwarzania, kliknij dowolne miejsce nagłówka osi czasu. Animacja jest nadal odtwarzana, jeśli była już odtwarzana. Jeśli tego nie zrobisz, animacja zostanie zatrzymana. Wcześniej trzeba było go przeciągnąć.
  • Aby zobaczyć pełne nazwy animacji, zmień rozmiar kolumny.

Problemy z Chromium: 1492460, 1489721.

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

Pole wyboru. Pokaż ostrzeżenie o auto-XSS podczas wklejania kodu eksperymentu jest domyślnie włączone. Self-XSS (self cross-site scripting) to atak polegający na nakłonieniu Cię do wklejenia złośliwego kodu do Narzędzi deweloperskich i umożliwienie atakującego przejęcie kontroli 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ć treść, po wyświetleniu prośby wpisz allow pasting. Jeśli zezwolisz na wklejanie tylko raz, ostrzeżenie nie będzie wyświetlane ponownie.

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

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 tego zdarzenia w witrynie Debuger będzie się teraz wstrzymywać, gdy wystąpi odpowiednie zdarzenie w web worker lub workletie dowolnego typu, w tym Worklet Shared Storage.

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

Problem z Chromium: 1445175.

Nowa plakietka multimediów na kontach <audio> i <video>

W panelu Elementy możesz teraz włączyć nową plakietkę multimediów w elementach <audio> i <video>. Po kliknięciu plakietki otworzy się panel Multimedia, w którym możesz debugować te elementy.

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

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

Problem z Chromium: 1448214.

Zmiana nazwy ładowania wstępnego na spekulacyjne

Aby uniknąć nadużywania poprzedniego hasła i lepiej odzwierciedlać jego zachowanie, nazwa Aplikacja > Wstępne wczytywanie została zmieniona na Ładowania spekulacyjne. Ładowanie spekulacyjne umożliwia szybkie wczytywanie strony na podstawie reguł spekulacyjnych, które możesz zdefiniować na potrzeby wstępnego renderowania i wczytywania z wyprzedzeniem większości odwiedzanych stron w witrynie.

Zmiana nazwy typu „przed” i „po” w ładowaniu spekulacyjnym.

Problem w Chromium: 1478888.

Lighthouse 11.2.0

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

Ta aktualizacja obejmuje gruntowne zmiany kategorii skuteczności. Statystyki skuteczności są teraz oceniane i traktowane priorytetowo na podstawie ich szacowanego wpływu na dane o skuteczności. Wskaźnik wyników wydajności zawiera też bardziej szczegółowe informacje o wpływie na niego poszczególnych danych.

Zwiększenie skuteczności przed i po.

Podstawowe informacje na temat 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 ulepszyliśmy ułatwienia dostępu:

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

Problemy z Chromium: 1488645, 1484918.

Różne wyróżnienia

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

  • Wydajność: poprawiliśmy czasami brakujący wskaźnik LCP w nagraniu (1487136).
  • Ładowanie spekulacyjne: naprawiono pełne adresy URL celów w menu w panelu Sieć (1471020).
  • Pokrycie:
    • Stałe pokrycie wiersza po wierszu dla kodu pisanego ładnie (1464974).
    • Informacje o zasięgu są teraz aktualizowane po ponownym załadowaniu strony (1494457).
  • Konsola:
    • Poprawiono częściowe zaznaczenie tekstu w wiadomościach (1487449).
    • Poprawiliśmy migotanie menu autouzupełniania (1487453).
    • Obsługiwane nawiasy w ścieżkach stosu i adresach URL w zrzutach stosu (1473926).
  • Źródła: obsługiwane jest wyróżnianie składni słowa kluczowego TypeScript using (1490515).
  • Menu Szybkie otwieranie pokazuje teraz metody prywatne (1492957).
  • Aplikacja > Usługi w tle: pasek działań u góry zawija teraz tekst podczas zmiany rozmiaru (1487276).
  • Elementy > Style:
    • Poprawiliśmy rozdzielczość odziedziczonych zmiennych CSS w przypadku elementów umieszczonych w boksach (1492162).
    • Gdy wyłączysz właściwość CSS, jej komentarze zostaną usunięte, aby naprawić błędy składni (1101224).
  • Sieć: w kolumnie Priorytet wyświetla się teraz etykietka z informacjami o początkowym priorytecie (taka sama wartość pojawia się, gdy zaznaczona jest opcja Duże wiersze żądania) (1495735).
  • Wycofania:
    • Ustawienie Format koloru zostało wyłączone w poprzednich wersjach, a teraz jest usunięte.
    • Opcja Usuń wszystkie zastąpienia w sekcji Źródła została usunięta ze względu na niewielkie wykorzystanie po uproszczeniu zastąpień (1473681).

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