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

Zadbaj o dobrą organizację dzięki kolekcji Zapisuj i kategoryzuj treści zgodnie ze swoimi preferencjami.

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.

Pole wyboru Uwzględnij problemy z plikami cookie innych firm jest domyślnie włączone dla wszystkich użytkowników Chrome, więc na karcie Problemy znajdziesz ostrzeżenia dotyczące plików 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 Narzędzi deweloperskich jest aktywnie rozwijane. 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 Piaskownica prywatności. 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 rozszerzenia Privacy Sandbox Analysis Tool (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 ma to wpływ, zapoznaj się z artykułem Ogólne działania związane z analizą.
• Aby dowiedzieć się, jak analizować typowe scenariusze, w tym analitykę, e-commerce, usługi SSO, treści osadzone i inne, zapoznaj się z przykładami demonstracyjnymi w sekcji Scenariusze analizy.

Ponadto zapoznaj się 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/. W każdej chwili możesz wyłączyć tę regułę w ustawieniach.

Problem z Chromium: 1496301.

Wyjątki teraz przerywają wykonywanie kodu, jeśli zostaną wykryte lub przepuszczone 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 wychwycone, które przechodzą przez nieignorowane ramki w stosie wywołań. Przykładowy 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 stronie na liście scenariuszy „Złapany” kliknij różne przyciski, aby zobaczyć, jak w wymienionych przypadkach następuje wstrzymanie wykonania.

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() zarejestruje wyjątek, podobnie jak blok try...finally nie rejestruje żadnych wyjątków.

Problemy z Chromium: 1489312, 1291064.

Na mapach źródeł x_google_ignoreList zmieniono nazwę 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 napisanego przez Ciebie kodu, a nie zminifikowanego kodu wyświetlanego przez 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

Teraz możesz wyświetlić szczegóły standardu 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 na 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ł domyślnie włączony. Self-XSS (samoistne skrypty między witrynami) to atak, który nakłania Cię do wklejania 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. Gdy raz zezwolisz na wklejanie, ostrzeżenie nie będzie się już wyświetlać.

Problem z Chromium: 345205.

Punkty przerwania detektora zdarzeń w procesach i workletach internetowych

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ć nowe logo mediów dla elementów <audio> i <video>. Gdy klikniesz plakietkę, 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 poprzedniej nazwy i lepiej odzwierciedlić działanie, zmieniliśmy nazwę Aplikacja > Wczytywanie z wyprzedzeniem na Wczytywanie z wyprzedzeniem. 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 skuteczności są teraz oceniane i ustawiane w kolejności priorytetów na podstawie szacowanego wpływu na dane o 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 wynikach śledzenia (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 początkowym priorytecie (te same informacje są wyświetlane po zaznaczeniu opcji Wiersze prośby o dużą objętość) (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 z powodu niskiego wykorzystania 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ędziech deweloperskich.