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

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 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 zbliżające się 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.

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 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ę.

Więcej informacji o korzystaniu z narzędzia Privacy Sandbox Analysis Tool (PSAT):

• 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

Ta wersja włącza domyślne wyrażenie regularne jako niestandardową regułę wykluczania w Ustawieniach > 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.

Problem z Chromium: 1496301.

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

Gdy debugujesz kod z zaznaczoną opcją 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ń. Spójrz na zrzut ekranu.

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 Wstrzymaj przy wykrytych wyjątkach.
2. Na stronie, w sekcji „Złapane” listę scenariuszy, kliknij odpowiednie przyciski, aby zobaczyć, że wykonanie zostało wstrzymane we wspomnianych przypadkach.

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:

• Czym są mapy źródeł
• Debuguj oryginalny kod zamiast wdrażać go za pomocą map źródeł

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.

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).

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.

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

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.

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 wstrzymywania w przypadku tego zdarzenia w witrynie Debuger jest teraz wstrzymywany również wtedy, gdy odpowiednie zdarzenie wystąpi w instancji roboczej lub workletze dowolnego typu, w tym Worklet Shared Storage.

Problem z Chromium: 1445175.

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

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

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 odzwierciedlić to zachowanie, Aplikacja > Wstępne wczytywanie to teraz Wczytywanie 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.

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.

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 (zaznaczonego lub odznaczonego) 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: górny pasek działań 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 będą usuwane, 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   > 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.