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 na podjęcie działań, ponieważ zbliża się termin ich wycofania. 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 będzie mieć wpływ wycofanie i wycofanie się z użycia plików cookie innych firm. W każdej chwili możesz wyczyścić to pole wyboru, 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:

• PSAT's How To.
• 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 Scenariusze analizy.

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

Ulepszona lista ignorowanych

Domyślny wzór wykluczenia dla node_modules

Ta wersja umożliwia domyślny wyrażenie regularne jako niestandardową regułę wykluczenia w sekcji Ustawienia > Lista ignorowania. Aby ułatwić Ci skoncentrowanie się na kodzie, Debugger będzie teraz domyślnie pomijać skrypty z /node_modules/ i /bower_components/. Możesz w każdej chwili wyłączyć tę regułę w ustawieniach.

Problem z Chromium: 1496301.

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

Gdy debugujesz kod z zaznaczoną opcją Wstrzymywanie przy wykrytych wyjątkach, Debuger zatrzymuje wykonywanie kodu w przypadku następujących wykrytych wyjątków, zarówno synchronicznych, jak i asynchronicznych:

• Wyjątki wychwycone w ramkach nieignorowanych ramek w zbiorze wywołań.
• Wyjątki przechwycone, które przechodzą przez nieignorowane ramki w stosie wywołań. Przykład zrzutu ekranu znajdziesz poniżej.

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 stronie na liście scenariuszy „Złapany” kliknij różne przyciski, aby zobaczyć, jak w wymienionych przypadkach jest wstrzymywane wykonywanie kodu.

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ń. Od tej wersji Debuger nie przewiduje już, że blok Promise.finally() złapie wyjątek, podobnie jak blok try...finally nie łapie żadnych wyjątków.

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, który napisałeś, a nie zminifikowanego kodu wyświetlanego przez Twoją witrynę.

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

• Co to są mapy źródeł
• Debugowanie oryginalnego kodu zamiast 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. Na przykład, gdy uruchamiasz instancję Chrome z --remote-debugging-port=<port> i łączysz się z tym celem sieci za pomocą 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.

Skuteczne Content Security Policy w panelu aplikacji

Możesz teraz wyświetlić szczegóły Content Security Policy (CSP) dla zbadanego elementu. Aby wyświetlić szczegóły, otwórz Aplikacja > Ramki, wybierz ramkę i przewiń w dół do sekcji Zasady bezpieczeństwa treści (CSP).

Problem z Chromium: 1424714.

Ulepszone debugowanie animacji

Na karcie Animacje możesz teraz:

• Aby ustawić suwak odtwarzania, kliknij dowolne miejsce w nagłówku osi czasu. Jeśli animacja była już odtwarzana, będzie kontynuowana, w przeciwnym razie zostanie zatrzymana. Wcześniej trzeba było je przeciągać.
• Zmień rozmiar kolumny nazw, aby wyświetlić pełne nazwy animacji.

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 własnym XSS podczas wklejania kodu został włączony domyślnie. Self-XSS (self cross-site scripting) 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 dialogowe Czy ufasz temu kodowi?, a w Konsoli wyświetli 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 już więcej wyświetlane.

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 mediów dla <audio> i <video>

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

Ta funkcja jest w trakcie opracowywania i będzie dalej ulepszana. Zespół Narzędzi deweloperskich dziękuje Junseo (Jeremy) Yoo za wprowadzenie tej poprawki.

Problem z Chromium: 1448214.

Nazwa „Wczytywanie wstępne” została zmieniona 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.

Latarnia morska 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.

Ulepszenia ułatwień 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 możesz otworzyć menu Ukryj problemy tego typu za pomocą klawiatury.

Problemy z Chromium: 1488645, 1484918.

Inne najciekawsze momenty

Oto kilka istotnych poprawek i ulepszeń w tej wersji:

• Wydajność: rozwiązaliśmy problem z czasem LCP, który czasami nie był widoczny na nagraniu (1487136).
• Wstępny wczytywanie: poprawiono 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 odświeżeniu 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: górny pasek działań jest teraz zawijany, gdy zmienia się jego rozmiar (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 pierwotnym priorytecie (te same informacje są widoczne, gdy zaznaczona jest opcja Duże wiersze zapytań) (1495735).
• Wycofanie:
  • 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 jako domyślnej przeglądarki deweloperskiej wersji Canary, Dev lub Beta przeglądarki Chrome. 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 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.
• Zgłoś problem z Narzędziami deweloperskimi, klikając more_vert Więcej opcji > Pomoc > Zgłoś problem z Narzędziami deweloperskimi w Narzędziach deweloperskich.
• Wyślij tweeta do @ChromeDevTools.
• Dodaj komentarze do filmów w YouTube z serii „Co nowego w Narzędziach deweloperskich” lub Wskazówki dotyczące Narzędzi deweloperskich.

Co nowego w Narzędziach deweloperskich

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