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. Więcej informacji o tym, co zrobić z dotyczącymi plikami cookie, znajdziesz w artykule Przygotowanie się na wycofanie plików cookie innych firm.

 Domyślnie dla wszystkich użytkowników Chrome włączono pole wyboru Uwzględnij problemy z plikami cookie innych firm, więc na karcie Problemy znajdziesz ostrzeżenia o plikach cookie, na które wpłynie wycofanie i wycofanie się z użycia plików cookie innych firm. Możesz w dowolnym momencie odznaczyć to pole, aby nie wyświetlać tych problemów.

Problem z Chromium: 1466310.

Analizowanie plików cookie witryny za pomocą rozszerzenia Privacy Sandbox Analysis Tool

Rozszerzenie Privacy Sandbox Analysis Tool do DevTools jest w trakcie aktywnego rozwijania. Najnowsza wersja wstępna to 0.3.2. Narzędzie pozwala zrozumieć, jak Twoja witryna używa plików cookie, i zawiera wskazówki dotyczące nowych interfejsów API Chrome zapewniających ochronę prywatności.

Aby przeanalizować pliki cookie:

1. Zainstaluj rozszerzenie w Chrome.
2. Aby uzyskać najlepsze wyniki analizy, otwórz stronę w pojedynczej karcie.
3. Otwórz Narzędzia deweloperskie i otwórz panel Privacy Sandbox (Prywatny piaskownicy). Ten panel może być ukryty za menu u góry.
4. Otwórz sekcję Pliki cookie i kliknij Przeanalizuj tę kartę. Jeśli narzędzie nie znalazło żadnych plików cookie, spróbuj ponownie załadować stronę.

Więcej informacji o używaniu narzędzia do analizy Piaskownicy prywatności (PSAT) znajdziesz w tych artykułach:

• Poradnik PSAT.
• Aby przewidzieć, co może się stać po wprowadzeniu wycofania, skonfiguruj środowisko oceny.
• Aby określić, na co wpłynie zmiana, zapoznaj się z artykułem Ogólne działania związane z analizą.
• Aby dowiedzieć się, jak analizować typowe scenariusze, m.in. analitykę, e-commerce, usługi SSO czy treści osadzone, zapoznaj się z przykładami demonstracyjnymi w sekcji Scenariusz analizy.

Ponadto zapoznaj się ze wskazówkami dotyczącymi zgłaszania problemów.

Rozszerzone informacje o ignorowaniu

Domyślny wzór wykluczenia dla node_modules

W tej wersji domyślne wyrażenie regularne może być używane jako niestandardowa reguła wykluczania w sekcji Ustawienia > Lista ignorowanych. Aby ułatwić Ci skoncentrowanie się na kodzie, Debugger będzie teraz domyślnie pomijać skrypty z /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 wychwycone w ramkach nieignorowanych ramek w zbiorze 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 pole Wstrzymaj w przypadku wykrytych wyjątków.
2. Na liście w sekcji „Przechwycone” scenariusze kliknij poszczególne przyciski, aby sprawdzić, czy wykonywanie we wspomnianych przypadkach zostało wstrzymane.

Aby w przypadku wywołań asynchronicznych wstrzymywać wykonywanie kodu w przypadku obsługiwanych lub nieobsługiwanych wyjątków (jeśli jest zaznaczona taka opcja), Debuger wyszukuje w obietnicach obsługi odrzuceń. 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.

Na mapach źródeł nazwa x_google_ignoreList została zmieniona na ignoreList

Specyfikacja map źródeł zaakceptowała pole ignoreList zamiast x_google_ignoreList, a DevTools obsługuje teraz nową nazwę z opcją zastępczą dla starej. Ramy i pakery mogą teraz używać nowej nazwy pola.

Mapy źródeł umożliwiają debugowanie kodu napisanego przez Ciebie, a nie zminifikowanego kodu wyświetlanego przez witrynę.

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

• 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 wprowadzaniem za pomocą ekranu dotykowego a myszy. 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.

W panelu Elementy wyświetlane są teraz adresy URL węzłów #document

Aby ułatwić debugowanie ramek iframe, panel Elementy wyświetla teraz documentURL obok węzłów #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).

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 je przeciągać.
• Aby zobaczyć pełne nazwy animacji, zmień rozmiar kolumny.

Problemy z Chromium: 1492460, 1489721.

Okno „Czy ufasz temu kodowi?” w Źródłach i ostrzeżenie przed samoistnym XSS w Konsoli

Eksperyment Pokaż ostrzeżenie o samowzbudzeniu XSS podczas wklejania kodu został włączony domyślnie. Self-XSS (samoistne skrypty między witrynami) to atak, który nakłania Cię do wklejenia złośliwego kodu w DevTools i pozwala atakującemu 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. Wklejaj tylko kod, który rozumiesz i który został przez Ciebie sprawdzony. Aby wkleić, gdy pojawi się prośba, wpisz allow pasting. Po zezwoleniu na wklejanie ostrzeżenie nie będzie się już wyświetlać.

Problem z Chromium: 345205.

Punkty przerwania detektora zdarzeń w workerach i workletach

Gdy ustawisz punkt przerwania zdarzenia w sekcji Źródła > Punkty przerwania odbiornika zdarzeń, Debuger zatrzymuje się nie tylko w przypadku tego zdarzenia w witrynie, ale też w przypadku wystąpienia odpowiedniego zdarzenia w web workerze lub worklecie dowolnego typu, w tym worklecie Shared Storage.

Problem z Chromium: 1445175.

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

W panelu Elementy możesz teraz włączyć nowe logo mediów dla elementów <audio> i <video>. 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 dziękuje Junseo (Jeremy) Yoo za wdrożenie tej poprawki.

Problem z Chromium: 1448214.

Zmiana nazwy wstępnego wczytywania na ładowanie spekulacyjne

Aby uniknąć nadużywania poprzedniego terminu i lepiej odzwierciedlić działanie, zmieniliśmy nazwę opcji Aplikacja > Wczytywanie wstępne na Wczytywanie spekulatywne. Wstępne wczytywanie umożliwia bardzo szybkie wczytywanie stron na podstawie reguł spekulacyjnych, które możesz zdefiniować w swojej witrynie, aby wstępnie renderować i wstępnie pobierać większość stron, do których użytkownicy przechodzą.

Problem z Chromium: 1478888.

Lighthouse 11.2.0

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

Ta aktualizacja obejmuje gruntowną zmianę kategorii wydajności. Statystyki dotyczące skuteczności są teraz oceniane i umieszczane w kolejności priorytetów na podstawie szacowanego wpływu na dane dotyczące skuteczności. Dodatkowo wskaźnik skuteczności zawiera bardziej szczegółowe informacje o tym, jak poszczególne dane wpływają na wynik.

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

Ta wersja zawiera następujące ułatwienia dostępu:

• Czytniki ekranu będą teraz ogłaszać stan (zaznaczony lub niezaznaczony) 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 istotnych 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).
• Zakres:
  • Naprawiono pokrycie wiersz po wierszu w przypadku ładnie wydrukowanego kodu (1464974).
  • Informacje o zasięgu są teraz aktualizowane po ponownym załadowaniu strony (1494457).
• Konsola:
  • Rozwiązano problem z częściowym zaznaczaniem tekstu w wiadomościach (1487449).
  • Rozwiązano problem z miganiem menu autouzupełniania (1487453).
  • Obsługiwane nawiasy w ścieżkach stosu i adresach URL w śladach stosu (1473926).
• Źródła: obsługiwane jest wyróżnianie składni słowa kluczowego TypeScript using (1490515).
• Menu Szybkie otwieranie zawiera teraz metody prywatne (1492957).
• Aplikacja > Usługi w tle: pasek działań u góry zawija teraz tekst podczas zmiany rozmiaru (1487276).
• Elementy > Style:
  • Rozwiązano problem z rozwiązaniem dziedziczonych zmiennych CSS w przypadku elementów w schowalni (1492162).
  • Gdy wyłączysz właściwość CSS, jej komentarze zostaną usunięte, aby naprawić przerwy w 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 kolorów zostało wyłączone w poprzednich wersjach i teraz zostało usunięte.
  • Opcja Usuń wszystkie zastąpienia w sekcji Źródła została usunięta ze względu na rzadkie używanie po uproszczeniu zastąpień (1473681).

Pobieranie kanałów podglądu

Rozważ użycie przeglądarki Chrome Canary, Dev lub Beta jako domyślnej przeglądarki deweloperskiej. Te kanały wersji wstępnej zapewniają dostęp do najnowszych funkcji DevTools, umożliwiają testowanie najnowocześniejszych interfejsów API platformy internetowej i pomagają znaleźć problemy w witrynie, zanim zrobią to użytkownicy.

Kontakt z zespołem ds. Narzędzi deweloperskich w Chrome

Aby omówić nowe funkcje, aktualizacje lub inne kwestie związane z Narzędziami deweloperskimi, skorzystaj z tych opcji.

• Przesyłaj opinie i prośby o dodanie funkcji na stronie crbug.com.
• Aby zgłosić problem z Narzędziami deweloperskimi, kliknij more_vert Więcej opcji > Pomoc > Zgłoś problem z Narzędziami deweloperskimi w Narzędziach deweloperskich.
• Opublikuj tweeta na stronie @ChromeDevTools.
• Napisz komentarz pod filmem Co nowego w Narzędziach deweloperskich w Narzędziach deweloperskich w YouTube lub filmach ze wskazówkami dotyczącymi Narzędzi deweloperskich w YouTube.

Co nowego w Narzędziach deweloperskich

Lista wszystkich tematów omawianych w cyklu artykułów Co nowego w Narzędziach deweloperskich.