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

Jecelyn Yeen

Pomoc dotycząca debugowania naruszeń zasad dotyczących zaufanych typów

Punkt przerwania w przypadku naruszeń dotyczących zaufanych typów

W panelu Źródła możesz teraz ustawiać punkty przerwania i łapać wyjątki dotyczące naruszeń zaufanego typu.

Interfejs Zaufane typy API pomaga zapobiegać lukom w zabezpieczeniach związanym z skryptami w domenie. Dowiedz się, jak pisać, sprawdzać i utrzymywać aplikacje wolne od luk XSS w DOM za pomocą zaufanych typów.

W panelu Źródła otwórz panel boczny debugera. Rozwiń sekcję Punkty przerwania dla naruszeń zasad CSP i odznacz pole wyboru Zaufane typy naruszeń, aby wstrzymać wyjątki. Wypróbuj to samodzielnie na tej stronie demonstracyjnej.

Punkt przerwania w przypadku naruszeń dotyczących zaufanych typów

Problem z Chromium: 1142804

W panelu Źródła wyświetla się teraz ikona ostrzeżenia obok wiersza, który narusza regułę typu zaufanie. Najedź na niego, aby wyświetlić podgląd wyjątku. Kliknij go, aby rozwinąć kartę Problemy, która zawiera więcej informacji o wyjątkach i wskazówki dotyczące ich rozwiązywania.

Łączenie problemu w panelu Źródła z kartą Problemy

Problem z Chromium: 1150883

Zrób zrzut ekranu węzła poza widocznym obszarem

Teraz możesz robić zrzuty ekranu węzła w pełnej formie, w tym treści znajdujące się pod zgięciem. Wcześniej zrzut ekranu był przycinany w przypadku treści, które nie były widoczne w widocznym obszarze. Zrzuty ekranu pełnej strony są teraz również dokładne.

W panelu Elementy kliknij prawym przyciskiem myszy element i wybierz Zrób zrzut ekranu węzła.

Zrób zrzut ekranu węzła poza widokiem

Problem z Chromium: 1003629

Nowa karta „Zaufane tokeny” do żądań sieciowych

Sprawdzaj prośby sieci o tokeny zaufania na nowej karcie Tokeny zaufania.

Trust Token to nowy interfejs API, który pomaga zwalczać oszustwa i odróżniać boty od prawdziwych użytkowników bez pasywnego śledzenia. Dowiedz się, jak zacząć korzystać z tokenów zaufania.

W kolejnych wersjach udostępnimy więcej funkcji debugowania.

Nowa karta „Token zaufania” dla żądań sieciowych

Problem z Chromium: 1126824

Lighthouse 7 w panelu Lighthouse

Panel Lighthouse korzysta teraz z Lighthouse 7. Pełną listę zmian znajdziesz w informacjach o wersji.

Lighthouse 7 w panelu Lighthouse

Nowe audyty w Lighthouse 7:

  • Wstępnie wczytaj obraz największego wyrenderowania treści (LCP). Sprawdza, czy obraz używany przez element LCP jest wstępnie wczytywany, aby poprawić czas LCP.
  • Problemy zarejestrowane w panelu Issues. Wskazuje listę nierozwiązanych problemów w panelu Issues.
  • Progresywne aplikacje internetowe (PWA). Kategoria aplikacji internetowych Progressive Web Apps (PWA) uległa znacznej zmianie.

  • Grupa Możliwość zainstalowania jest teraz obsługiwana wyłącznie przez sprawdzanie możliwości, które umożliwiają spełnienie kryteriów Chrome dotyczących możliwości zainstalowania. To te same sygnały, które są widoczne w panelu pliku manifestu.

    • Weryfikacja „Rejestruje element service worker…” została przeniesiona do grupy PWA zoptymalizowane, a weryfikacja „Używa HTTPS” jest teraz uwzględniana w ramach kluczowej weryfikacji „Wymagania dotyczące możliwości instalacji”.
    • Grupa Szybkie i niezawodne została usunięta. Zaktualizowany audyt „Wymagania dotyczące możliwości instalacji” obejmuje sprawdzanie możliwości działania w trybie offline, dlatego usunięto audyt „Bieżąca strona i start_url wyświetlają błąd 200 w trybie offline”. Usunięto też audyt „Wczytywanie strony przez sieć komórkową jest dostatecznie szybkie”.

Problem z Chromium: 772558

Aktualizacje panelu Elementy

Obsługa wymuszania stanu :target usługi porównywania cen

Teraz możesz użyć Narzędzi deweloperskich, aby wymusić i sprawdzić stan :target w CSS.

W panelu Elementy wybierz element i przełącz jego stan. Zaznacz pole wyboru :target, aby wymusić i sprawdzić style.

Użyj pseudoklasy :target, aby nadać styl elementom, gdy ciąg znaków w adresie URL i identyfikator elementu są takie same. Aby wypróbować tę funkcję, obejrzyj to demo. Ta nowa funkcja w Narzędziach deweloperskich umożliwia testowanie takich stylów bez konieczności ciągłego ręcznego zmieniania adresu URL.

wymuszanie stanu CSS „:target”;

Problem z Chromium: 1156628

Nowy skrót do duplikowania elementów

Aby błyskawicznie sklonować element, użyj nowego skrótu Duplikuj element.

W panelu Elementy kliknij prawym przyciskiem myszy element i wybierz Duplikuj element. Utworzony zostanie nowy element.

Możesz też zduplikować element za pomocą skrótów klawiszowych:

  • Mac: Shift + Option + ⬇️
  • Windows/ Linux: Shift + Alt + ⬇️

Zduplikowany element

Problemy z Chromium: 1150797, 1150797

Selektory kolorów do niestandardowych właściwości CSS

W panelu Style dostępne są teraz selektory kolorów dla niestandardowych właściwości CSS.

Możesz też przytrzymać klawisz Shift i kliknąć selektor kolorów, aby przełączać się między reprezentacjami wartości koloru RGBA, HSLA i Hex.

Selektory kolorów do niestandardowych właściwości CSS

Problem z Chromium: 1147016

Nowe skróty do kopiowania właściwości CSS

Dzięki nowym skrótom możesz teraz szybciej kopiować właściwości CSS.

W panelu Elementy wybierz element. Następnie kliknij prawym przyciskiem myszy klasę CSS lub właściwość CSS na panelu Stylizacja, aby skopiować wartość.

Nowe skróty do kopiowania właściwości CSS

Opcje kopiowania klasy CSS:

  • Kopiowanie selektora. Skopiuj nazwę bieżącego selektora.
  • Kopiowanie reguły. Skopiuj regułę bieżącego selektora.
  • Kopiuj wszystkie deklaracje: skopiuj wszystkie deklaracje w ramach bieżącej reguły, w tym te nieprawidłowe i właściwości z prefiksem.

Opcje kopiowania właściwości CSS:

  • Kopiowanie deklaracji. Skopiuj deklarację bieżącego wiersza.
  • Kopiowanie właściwości. Skopiuj właściwości bieżącego wiersza.
  • Kopiuj wartość: skopiuj wartość bieżącego wiersza.

Problem z Chromium: 1152391

Aktualizacje dotyczące plików cookie

Nowa opcja wyświetlania plików cookie zdekodowanych z adresu URL

W panelu Pliki cookie możesz teraz wyświetlić wartość plików cookie po dekodowaniu adresu URL.

Otwórz panel Aplikacja i kliknij panel Pliki cookie. Wybierz dowolny plik cookie z listy. Aby wyświetlić zdekodowane pliki cookie, zaznacz nowe pole wyboru Pokaż zdekodowane z adresu URL.

Opcja wyświetlania plików cookie zdekodowanych z adresu URL

Problem z Chromium: 997625

Usuwanie tylko widocznych plików cookie

Przycisk Wyczyść wszystkie pliki cookie w panelu Pliki cookie został zastąpiony przyciskiem Wyczyść odfiltrowane pliki cookie.

W panelu Aplikacja > Pliki cookie wpisz tekst w polu tekstowym, aby odfiltrować pliki cookie. W naszym przykładzie filtrujemy listę według kolumny „PREF”. Kliknij przycisk Wyczyść odfiltrowane pliki cookie, aby usunąć widoczne pliki cookie. Wyczyść tekst filtra, a inne pliki cookie pozostaną na liście. Wcześniej można było tylko wyczyścić wszystkie pliki cookie.

Usuwanie tylko widocznych plików cookie

Problem z Chromium: 978059

Nowa opcja usuwania plików cookie innych firm w panelu Pamięć

Podczas czyszczenia danych witryny w panelu Pamięć DevTools domyślnie usuwa tylko pliki cookie własne. Aby usunąć pliki cookie innych firm, włącz opcję Uwzględnij pliki cookie innych firm.

Opcja usuwania plików cookie innych firm

Problem z Chromium: 1012337

Edytowanie wskazówek dotyczących klienta użytkownika w przypadku urządzeń niestandardowych

Możesz teraz edytować wskazówki dotyczące klienta User-Agent na potrzeby niestandardowych urządzeń.

Kliknij kolejno Ustawienia > Urządzenia i Dodaj niestandardowe urządzenie…. Aby edytować wskazówki dotyczące klienta, rozwiń sekcję Wskazówki dotyczące klienta użytkownika.

Edytowanie wskazówek dotyczących klienta użytkownika

Wskazówki dotyczące klienta użytkownika to zamienniki ciągu użytkownika, które umożliwiają deweloperom dostęp do informacji o przeglądarce użytkownika w sposób ergonomiczny i z zachowaniem prywatności. Więcej informacji o interfejsie User-Agent Client Hints znajdziesz na stronie web.dev/user-agent-client-hints/.

Problem z Chromium: 1073909

Aktualizacje panelu sieci

Zachowywanie ustawienia „Rejestruj dziennik sieci”

Narzędzia deweloperskie zachowują teraz ustawienie „Rejestruj dziennik sieci”. Wcześniej narzędzia dla deweloperów resetowały wybór użytkownika za każdym razem, gdy strona była ponownie wczytywana.

Rejestrowanie dziennika sieci

Problem z Chromium: 1122580

Wyświetlanie połączeń WebTransport w panelu Sieć

Panel sieciowy wyświetla teraz połączenia WebTransport.

Połączenia WebTransport

WebTransport to nowy interfejs API zapewniający dwukierunkowe przesyłanie wiadomości między klientem a serwerem z minimalnym opóźnieniem. Dowiedz się więcej o przypadkach użycia i o tym, jak przekazać opinię na temat przyszłej implementacji na stronie web.dev/webtransport/.

Problem z Chromium: 1152290

Nazwa „Online” została zmieniona na „Brak ograniczania przepustowości”.

Opcja emulacji sieci „Online” została teraz zmieniona na „Bez ograniczania przepustowości”.

Rejestrowanie dziennika sieci

Problem z Chromium: 1028078

Nowe opcje kopiowania w Konsoli, panelu Źródła i panelu Style

Nowe skróty do kopiowania obiektów w panelu Konsoli i Źródła

Wartości obiektów możesz teraz kopiować za pomocą nowych skrótów w panelu Konsola i Źródła. Jest to szczególnie przydatne, gdy chcesz skopiować duży obiekt (np. długi tablicę).

Kopiowanie obiektu w Konsoli

Kopiowanie obiektu w panelu Źródła

Problemy z Chromium: 1149859, 1148353

Nowe skróty do kopiowania nazwy pliku w panelu Źródła i panelu Style

Teraz możesz skopiować nazwę pliku, klikając prawym przyciskiem myszy:

  • plik w panelu Źródła,
  • nazwę pliku w panelu Style w panelu Elementy;

Aby skopiować nazwę pliku, w menu kontekstowym kliknij Kopiuj nazwę pliku.

Kopiowanie nazwy pliku w panelu Źródła

Kopiowanie nazwy pliku na panelu Styl

Problem z Chromium: 1155120

Aktualizacje widoku szczegółów ramki

Nowe informacje o usługach workera w widoku Szczegóły ramki

Narzędzia deweloperskie wyświetlają teraz dedykowanych pracowników usługi pod ramką, która je tworzy.

W panelu Aplikacja rozwiń ramkę z usługami działającymi w tle, a potem w drzewie Usługi działające w tle wybierz usługę działającą w tle, aby wyświetlić szczegóły.

Informacje o usługach działających w tle w widoku Szczegóły ramki

Problem z Chromium: 1122507

Pomiar informacji o wspomnieniu w widoku Szczegóły kadru

Stan interfejsu API performance.measureMemory() jest teraz wyświetlany w sekcji Dostępność interfejsu API.

Nowe API performance.measureMemory() szacuje wykorzystanie pamięci przez całą stronę internetową. W tym artykule dowiesz się, jak za pomocą tego nowego interfejsu API monitorować łączne wykorzystanie pamięci przez stronę internetową.

Pomiar pamięci

Problem z Chromium: 1139899

Przesyłanie opinii na karcie Problemy

Jeśli chcesz poprawić wiadomość dotyczącą problemu, otwórz kartę Problemy w Konsoli lub Więcej ustawień > Więcej narzędzi > Problemy >. Rozwiń komunikat o problemie i kliknij Czy ten komunikat o problemie jest przydatny?, a potem prześlij opinię w wyświetlonym oknie.

Link do przesyłania opinii

Pominięte klatki w panelu Wydajność

Podczas analizowania wydajności wczytywania w panelu Wydajność sekcja Kadry oznacza teraz utracone kadry na czerwono. Najedź na niego kursorem, aby sprawdzić liczbę klatek.

Pominięte klatki

Problem z Chromium: 1075865

Emulowanie składanego urządzenia i urządzenia z dwoma ekranami w trybie urządzenia

W DevTools możesz teraz emulować urządzenia z dwoma ekranami i składane.

Po włączeniu paska narzędzi urządzenia wybierz jedno z tych urządzeń: Surface Duo lub Samsung Galaxy Fold.

Kliknij nową ikonę, aby przełączać się między trybem jednoekranowym, z położonym ekranem i dwuekranowym oraz rozłożonym.

Możesz też włączyć funkcje eksperymentalnej platformy internetowej, aby uzyskać dostęp do nowej funkcji mediów CSS screen-spanning i interfejsu JavaScript getWindowSegments API. Ikona eksperymentalna informuje o stanie flagi Funkcje eksperymentalnej platformy internetowej. Gdy flaga jest włączona, ikona jest podświetlona. Przejdź do chrome://flags i przełącz flagę.

Emulacja trybu Dual Screen

Problem z Chromium: 1054281

Funkcje eksperymentalne

Automatyzowanie testowania przeglądarki za pomocą narzędzia Puppeteer Recorder

DevTools może teraz generować skrypty Puppeteer na podstawie Twojej interakcji z przeglądarką, co ułatwia automatyzację testowania przeglądarki. Puppeteer to biblioteka Node.js, która udostępnia interfejs API wysokiego poziomu do sterowania Chrome lub Chromium za pomocą protokołu narzędzi deweloperskich.

Otwórz tę stronę demonstracyjną. Otwórz panel Źródła w Narzędziach deweloperskich. W panelu po lewej stronie wybierz kartę Nagrywanie. Dodaj nowe nagranie i nazwij plik (np. test01.js).

Aby rozpocząć nagrywanie interakcji, kliknij przycisk Nagrywanie u dołu ekranu. Spróbuj wypełnić formularz na ekranie. Zwróć uwagę, że polecenia Puppeteer są odpowiednio dołączane do pliku. Aby zatrzymać nagrywanie, ponownie kliknij przycisk Nagrywanie.

Aby uruchomić skrypt, postępuj zgodnie z przewodnikiem na temat pierwszego użycia na oficjalnej stronie Puppeteer.

Pamiętaj, że jest to eksperyment na wczesnym etapie. Z czasem planujemy ulepszać i rozszerzać możliwości aplikacji Rejestrator.

Dyktafon Puppeteer

Problem z Chromium: 1144127

Edytor czcionek w panelu Styl

Nowy Edytor czcionek to edytor wyskakującego okienka w panelu Stylów, który służy do określania właściwości związanych z czcionką. Dzięki niemu możesz znaleźć idealną typografię dla swojej strony internetowej.

Pop-up zawiera przejrzysty interfejs, który umożliwia dynamiczną manipulację typografią za pomocą serii intuicyjnych typów danych wejściowych.

Edytor czcionek w panelu Styl

Problem z Chromium: 1093229

Narzędzia do debugowania flexboxa w CSS

W narzędziach deweloperskich dodano eksperymentalne wsparcie dla debugowania flexboxa od ostatniej wersji.

Narzędzie DevTools rysuje teraz linię pomocniczą, która ułatwia wizualizację właściwości CSS align-items. Obsługiwana jest też właściwość CSS gap. W naszym przykładzie mamy CSS gap: 12px;. Zwróć uwagę na wzór kreskowania dla każdej przerwy.

Flexbox

Problem z Chromium: 1139949

Nowa karta Naruszenia zasad CSP

Na nowej karcie Naruszenia zasad CSP możesz szybko sprawdzić wszystkie naruszenia standardu Content Security Policy (CSP). Ta nowa karta to eksperyment, który powinien ułatwić pracę ze stronami internetowymi z dużą liczbą naruszeń zasad CSP i Trusted Type.

Karta Naruszenia CSP

Problem z Chromium: 1137837

Nowe obliczanie kontrastu kolorów – zaawansowany algorytm percepcyjnego kontrastu (APCA)

Zaawansowany algorytm percepcyjnego kontrastu (APCA) zastępuje w selektorze kolorów współczynnik kontrastu określony w wytycznych AA/AAA.

APCA to nowy sposób obliczania kontrastu na podstawie współczesnych badań dotyczących postrzegania kolorów. W porównaniu z wytycznymi AA/AAA APCA jest bardziej zależna od kontekstu. Kontrast jest obliczany na podstawie właściwości przestrzennych tekstu (grubość i rozmiar czcionki), koloru (odczuwana różnica jasności między tekstem a tłem) oraz kontekstu (światło otoczenia, otoczenie, zamierzone przeznaczenie tekstu).

APCA w selektorze kolorów

W tym przykładzie próg APCA wynosi 38%. Stosunek kontrastu musi być równy podanej wartości lub od niej większy. Ta wartość jest obliczana na podstawie grubości i rozmiaru czcionki w odwołaniu do tej tabeli wyszukiwania APCA.

Problem z Chromium: 1121900

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.

Co nowego w Narzędziach deweloperskich

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