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

Wycofywanie plików cookie innych firm

Twoja witryna może używać plików cookie innych firm, a wraz ze zbliżającym się terminem ich wycofania nadszedł czas na podjęcie odpowiednich działań. Aby dowiedzieć się, co zrobić z plikami cookie, których dotyczy problem, przeczytaj artykuł Przygotowanie się na wycofanie plików cookie innych firm.

Pole wyboru Uwzględnij problemy z plikami cookie innych firm jest domyślnie włączone u wszystkich użytkowników Chrome, więc karta Problemy ostrzega teraz o plikach cookie, na które wpłynie nadchodzące wycofanie plików cookie innych firm. W każdej chwili możesz odznaczyć to pole, aby przestać widzieć te problemy.

Problem z Chromium: 1466310.

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

Rozszerzenie Privacy Sandbox Analysis Tool do Narzędzi deweloperskich jest w trakcie aktywnego rozwoju. Najnowsza wersja przedpremierowa to 0.3.2. To 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 witrynę na jednej karcie.
3. Otwórz Narzędzia deweloperskie i przejdź do panelu Piaskownica prywatności. Ten panel może być ukryty za przyciskiem menu  u góry.
4. Otwórz sekcję Pliki cookie i kliknij Analyze this tab (Przeanalizuj tę kartę). Jeśli narzędzie nie znalazło żadnych plików cookie, spróbuj ponownie załadować stronę.

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

• PSAT's How To
• Aby przewidzieć, co się stanie po wejściu w życie wycofania, skonfiguruj środowisko testowe.
• Aby dowiedzieć się, których aspektów dotyczy problem, zapoznaj się z sekcją 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.

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

Ulepszona lista ignorowanych fragmentów kodu

Domyślny wzorzec wykluczenia dla node_modules

Ta wersja umożliwia włączenie domyślnego wyrażenia regularnego jako niestandardowej reguły wykluczania w sekcji Ustawienia > Lista ignorowanych. Aby ułatwić Ci skupienie się tylko na Twoim 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 w Chromium: 1496301.

Wyjątki powodują teraz zatrzymanie wykonywania, jeśli zostaną przechwycone lub przechodzą przez nieignorowany kod.

Gdy debugujesz kod z zaznaczoną opcją Wstrzymywanie przy wykrytych wyjątkach, debuger zatrzymuje teraz wykonywanie w przypadku tych wykrytych wyjątków, zarówno synchronicznych, jak i asynchronicznych:

• Wyjątki przechwycone w klatkach niestosowanych w stosie wywołań.
• Wyjątki przechwycone, które przechodzą przez nieignorowane ramki w stosie wywołań. Przykład znajdziesz na zrzucie ekranu.

Aby przetestować to działanie, otwórz tę stronę demonstracyjną:

1. Otwórz Narzędzia deweloperskie > Źródła, dodaj hidden folder do listy ignorowanych i zaznacz Wstrzymaj przy przechwyconych wyjątkach.
2. Na stronie w sekcji „Caught” (Złapano) kliknij różne przyciski i sprawdź, czy w wymienionych przypadkach wykonanie zostało wstrzymane.

Aby wstrzymać wykonywanie w przypadku przechwyconych lub nieprzechwyconych wyjątków (gdy jest zaznaczone) w wywołaniach asynchronicznych, Debugger szuka w obietnicach procedur obsługi odrzucenia. Od tej wersji Debugger nie przewiduje już, że blok Promise.finally() przechwyci wyjątek, podobnie jak blok try...finally nie przechwytuje żadnych wyjątków.

Problemy z Chromium: 1489312, 1291064.

x_google_ignoreList zmieniono na ignoreList w mapach źródeł

Specyfikacja map źródłowych przyjęła pole ignoreList zamiast x_google_ignoreList, a Narzędzia deweloperskie obsługują teraz nową nazwę z wersją zapasową dla starej. Frameworki i programy do łączenia plików mogą teraz używać nowej nazwy pola.

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

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

• Czym są mapy źródeł
• Debugowanie oryginalnego kodu zamiast kodu wdrożonego 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 danych za pomocą dotyku i myszy. Na przykład gdy uruchamiasz instancję Chrome z parametrem --remote-debugging-port=<port> i łączysz się z tym miejscem docelowym sieci za pomocą parametru chrome://inspect/#devices.

Obejrzyj film, aby zobaczyć, jak działa przełączanie trybu wpisywania.

Problem w Chromium: 1410433.

W panelu Elementy wyświetlają się teraz adresy URL węzłów #document.

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

Problem w Chromium: 1376976.

Obowiązujący standard Content Security Policy w panelu Aplikacja

Możesz teraz wyświetlać szczegóły zasad Content Security Policy (CSP) w przypadku zbadanej ramki. Aby wyświetlić szczegóły, otwórz Aplikacja > Ramki, wybierz ramkę i przewiń w dół do sekcji Content Security Policy (CSP).

Problem w Chromium: 1424714.

Ulepszone debugowanie animacji

Na karcie Animacje możesz teraz:

• Kliknij dowolne miejsce w nagłówku osi czasu, aby ustawić suwak odtwarzania. Animacja jest nadal odtwarzana, jeśli była już odtwarzana, a w przeciwnym razie jest zatrzymywana. Wcześniej trzeba było go przeciągnąć.
• Zmień rozmiar kolumny z nazwami, aby wyświetlić pełne nazwy animacji.

Problemy z Chromium: 1492460, 1489721.

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

Eksperyment „Wyświetlaj ostrzeżenie o Self-XSS podczas wklejania kodu” został domyślnie włączony. Self-XSS (self cross-site scripting) to atak, który polega na nakłonieniu Cię do wklejenia złośliwego kodu do Narzędzi deweloperskich. Dzięki temu osoba atakująca może uzyskać 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 wyświetli się podobne ostrzeżenie. Wklejaj tylko kod, który rozumiesz i który został przez Ciebie sprawdzony. Aby wkleić, wpisz allow pasting, gdy pojawi się prośba. Gdy zezwolisz na wklejanie, ostrzeżenie nie będzie już wyświetlane.

Problem w Chromium: 345205.

Punkty przerwania detektora zdarzeń w instancjach roboczych i workletach

Gdy ustawisz punkt przerwania zdarzenia w sekcji Źródła > Punkty przerwania w detektorach zdarzeń, debugger będzie się zatrzymywać nie tylko w przypadku tego zdarzenia w Twojej witrynie, ale też w przypadku odpowiedniego zdarzenia w procesie roboczym lub worklecie dowolnego typu, w tym w worklecie pamięci współdzielonej.

Problem w 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>. Gdy klikniesz plakietkę, otworzy się panel Media, 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 wprowadzenie tej zmiany.

Problem w Chromium: 1448214.

Zmiana nazwy wstępnego ładowania na ładowanie spekulacyjne

Aby uniknąć nadużywania poprzedniego terminu i lepiej odzwierciedlić zachowanie, zmieniliśmy nazwę sekcji Aplikacja > Wstępne wczytywanie na Spekulacyjne wczytywanie. Spekulacyjne wczytywanie umożliwia niemal natychmiastowe wczytywanie strony na podstawie reguł spekulacji, które możesz zdefiniować dla swojej witryny, aby wstępnie renderować i wstępnie pobierać najczęściej odwiedzane strony.

Problem z Chromium: 1478888.

Lighthouse 11.2.0

Panel Lighthouse działa teraz w wersji 11.2.0. Zobacz pełną listę zmian.

Ta aktualizacja obejmuje gruntowne zmiany w kategorii wydajności. Wskazówki dotyczące skuteczności są teraz oceniane i ustalane według priorytetu na podstawie szacowanego wpływu na dane o skuteczności. Wskaźnik oceny skuteczności zawiera też bardziej szczegółowe informacje o tym, jak poszczególne dane wpływają na wynik.

Podstawowe informacje o korzystaniu 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 ulepszenia ułatwień dostępu:

• Czytniki ekranu będą teraz odczytywać stan (zaznaczone lub odznaczone) 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.

Różne wyróżnione informacje

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

• Skuteczność: rozwiązaliśmy problem z czasami brakującym wskaźnikiem LCP w nagraniu (1487136).
• Wczytywanie spekulacyjne: naprawiono pełne adresy URL celów w menu rozwijanym w panelu Sieć (1471020).
• Zasięg:
  • Poprawiono pokrycie wiersz po wierszu w przypadku kodu sformatowanego (1464974).
  • Informacje o zasięgu są teraz aktualizowane po ponownym załadowaniu strony (1494457).
• Konsola:
  • Rozwiązaliśmy problem z wybieraniem części tekstu w wiadomościach (1487449).
  • Rozwiązano problem z migotaniem menu autouzupełniania (1487453).
  • Obsługa nawiasów w ścieżkach stosu i adresach URL w śladach stosu (1473926).
• Źródła: dodano obsługę wyróżniania składni słowa kluczowego using w TypeScript (1490515).
• Menu Szybkie otwieranie wyświetla teraz metody prywatne (1492957).
• Aplikacja > Usługi w tle: górny pasek działań zawija teraz tekst podczas zmiany rozmiaru (1487276).
• Elementy > Style:
  • Rozwiązano problem z rozdzielczością odziedziczonych zmiennych CSS w przypadku elementów z gniazdami (1492162).
  • Podczas wyłączania właściwości CSS jej komentarze są teraz usuwane, aby naprawić błędy składni (1101224).
• Sieć: w kolumnie Priorytet wyświetla się teraz etykietka z informacjami o początkowym priorytecie (takie same informacje są wyświetlane, gdy zaznaczona jest opcja Wiersze dużych żądań) (1495735).
• Wycofane:
  • Ustawienie Format koloru zostało wyłączone w poprzednich wersjach i jest teraz usunięte.
  • Opcja Usuń wszystkie zastąpienia w sekcji Źródła została usunięta z powodu niewielkiego zainteresowania po uproszczeniu zastąpień (1473681).

Pobieranie kanałów podglądu

Rozważ używanie Chrome w wersji Canary, deweloperskiej lub beta jako domyślnej przeglądarki do programowania. Te kanały wersji testowych zapewniają dostęp do najnowszych funkcji Narzędzi deweloperskich, umożliwiają testowanie najnowocześniejszych interfejsów API platformy internetowej i pomagają znajdować problemy w witrynie, zanim zrobią to użytkownicy.

Kontakt z zespołem Narzędzi deweloperskich w Chrome

Skorzystaj z tych opcji, aby porozmawiać o nowych funkcjach, aktualizacjach lub innych kwestiach związanych z Narzędziami deweloperskimi.

• Prześlij nam opinię 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.
• Dodawaj komentarze do filmów na YouTube z serii „Co nowego w Narzędziach deweloperskich” lub filmów na YouTube z serii „Wskazówki dotyczące Narzędzi deweloperskich”.

Co nowego w Narzędziach deweloperskich

Lista wszystkich tematów omówionych w serii Nowości w Narzędziach deweloperskich.