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

Jecelyn Yeen

Obsługa debugowania w przypadku naruszeń zasad dotyczących zaufanych typów

Punkt przerwania w przypadku naruszeń dotyczących zaufanego typu

W panelu Źródła możesz teraz ustawiać punkty przerwania i wychwytywać wyjątki dotyczące wykrytych naruszeń typów zaufanych.

Interfejs Trusted APIs pomaga zapobiegać lukom w zabezpieczeniach opartych na DOM. Informacje o tym, jak pisać, sprawdzać i utrzymywać aplikacje wolne od luk w zabezpieczeniach DOM XSS za pomocą zaufanych typów, znajdziesz tutaj.

W panelu Źródła otwórz panel paska bocznego debugera. Rozwiń sekcję Punkty przerwania naruszenia zasad CSP i zaznacz pole wyboru Naruszenia zasad dotyczących zaufanego typu, aby wstrzymać wyjątki. Sprawdź, jak to działa, na tej stronie demonstracyjnej.

Punkt przerwania w przypadku naruszeń dotyczących zaufanego typu

Problem z Chromium: 1142804

W panelu Źródła obok wiersza, który narusza typ Zaufany, wyświetla się teraz ikona ostrzeżenia. Najedź na niego kursorem, aby wyświetlić podgląd wyjątku. Kliknij go, aby rozwinąć kartę Problemy, na której znajdziesz więcej informacji o wyjątkach i wskazówki, jak rozwiązać ten problem.

Połącz problem w panelu Źródła z kartą Problemy

Problem z Chromium: 1150883

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

Możesz teraz przechwytywać zrzuty ekranu węzłów dla całego węzła, w tym treści w części strony widocznej po przewinięciu. Wcześniej zrzut ekranu był przycięty w przypadku treści, które nie były widoczne w widocznym obszarze. Zrzuty ekranu na całą stronę również są dokładne.

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

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

Problem z Chromium: 1003629

Nowa karta Tokeny zaufania dla żądań sieciowych

Żądania sieciowe tokena zaufania na nowej karcie Tokeny zaufania możesz sprawdzić.

Token zaufania to nowy interfejs API, który pomaga w walce z oszustwami i odróżnia boty od prawdziwych ludzi bez konieczności pasywnego śledzenia. Dowiedz się, jak zacząć korzystać z tokenów zaufania.

W nadchodzących wersjach wprowadzimy dalszą obsługę debugowania.

Nowa karta Token zaufania dla żądań sieciowych

Problem z Chromium: 1126824

Lighthouse 7 w panelu Lighthouse

W panelu Lighthouse działa teraz Lighthouse 7. Pełną listę zmian znajdziesz w informacjach o wersji.

Lighthouse 7 w panelu Lighthouse

Nowe audyty w Lighthouse 7:

  • Wstępnie wczytuj obraz największego wyrenderowania treści (LCP). Kontroluje, czy obraz używany przez element LCP jest wstępnie wczytywany, aby poprawić czas LCP.
  • Problemy zarejestrowane w panelu Issues. Oznacza listę nierozwiązanych problemów w panelu Issues.
  • Progresywne aplikacje internetowe (PWA). Kategoria PWA znacznie się zmieniła.

  • Grupa Zainstaluj jest teraz obsługiwana w całości dzięki testom możliwości, które włączają kryteria instalacji Chrome. To te same sygnały, które widać w panelu pliku manifestu.

    • Kontrola „Rejestruje skrypt service worker...” do grupy Zoptymalizowana pod kątem PWA, a kontrola „Używa HTTPS” jest teraz uwzględniona w głównej części kontroli „Wymagania dotyczące możliwości instalacji”.
    • Grupa Szybkość i niezawodność została usunięta. Zmieniony audyt „wymagań instalacji” obejmuje sprawdzanie możliwości offline, więc po usunięciu kontroli w trybie offline parametry „current page i start_url” zwracają wartość 200. Audyt „Wczytuje się wystarczająco szybko w sieci komórkowej” został też usunięty.

Problem z Chromium: 772558

Aktualizacje panelu Elementy

Obsługa wymuszania stanu :target CSS

Za pomocą Narzędzi deweloperskich możesz teraz wymuszać i sprawdzać stan :target CSS.

W panelu Elementy wybierz element i przełącz jego stan. Zaznacz pole wyboru :target, aby wymusić stosowanie stylów i je sprawdzić.

Jeśli hasz w adresie URL i identyfikator elementu są takie same, użyj pseudoklasy :target, by określić styl elementu. Obejrzyj tę prezentację, aby samodzielnie wypróbować tę usługę. Ta nowa funkcja DevTools umożliwia testowanie takich stylów bez konieczności ciągłego ręcznego zmieniania adresu URL.

wymuszanie stanu „:target” CSS

Problem z Chromium: 1156628

Nowy skrót do duplikatu elementu

Aby natychmiast skopiować element, użyj nowego skrótu Powiel element.

Kliknij prawym przyciskiem myszy element w panelu Elementy i wybierz Powiel element. Pod nim zostanie utworzony nowy element.

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

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

Zduplikowany element

Problemy z Chromium: 1150797, 1150797

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

W panelu Style wyświetlają się teraz selektory kolorów dla niestandardowych właściwości CSS.

Możesz też przytrzymać wciśnięty klawisz Shift i klikać selektor kolorów, aby przełączać się między wartościami RGBA, HSLA i szesnastkowymi wartości koloru.

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

Problem z Chromium: 1147016

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

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

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

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

Skopiuj opcje klasy CSS:

  • Selektor kopiowania. Skopiuj bieżącą nazwę selektora.
  • Kopiuj regułę. Skopiuj regułę bieżącego selektora.
  • Skopiuj wszystkie deklaracje: skopiuj wszystkie deklaracje w bieżącej regule, w tym nieprawidłowe i z prefiksami.

Opcje kopiowania właściwości CSS:

  • Skopiuj deklarację. Skopiuj deklarację bieżącego wiersza.
  • Kopiuj właściwość. Skopiuj właściwość bieżącego wiersza.
  • Skopiuj 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 adresem URL

Możesz teraz włączyć wyświetlanie wartości plików cookie zdekodowanych z adresem URL w panelu Pliki cookie.

Przejdź do panelu Aplikacja i wybierz panel Pliki cookie. Wybierz dowolny plik cookie z listy. Aby wyświetlić zdekodowany plik cookie, zaznacz nowe pole wyboru Pokaż zdekodowane z adresu URL.

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

Problem z Chromium: 997625

Usuń tylko widoczne pliki cookie

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

W panelu Aplikacja w panelu Pliki cookie wpisz tekst w polu tekstowym, według którego chcesz filtrować pliki cookie. W naszym przykładzie filtrujemy listę według „PREF”. Kliknij przycisk Wyczyść odfiltrowane pliki cookie, aby usunąć widoczne pliki cookie. Wyczyść tekst filtra, a pozostałe pliki cookie pozostaną na liście. Wcześniej dostępna była tylko opcja usunięcia wszystkich plików cookie.

Usuń tylko widoczne pliki cookie

Problem z Chromium: 978059

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

Podczas czyszczenia danych witryn w panelu Miejsce na dane Narzędzia deweloperskie domyślnie usuwają teraz tylko własne pliki cookie. Aby usunąć też pliki cookie innych firm, włącz w tym pliki cookie innych firm.

Opcja usuwania plików cookie innych firm

Problem z Chromium: 1012337

Edytuj wskazówki klienta użytkownika dla urządzeń niestandardowych

Możesz teraz edytować wskazówki dotyczące klienta użytkownika w przypadku urządzeń niestandardowych.

Otwórz Ustawienia > Urządzenia i kliknij Dodaj urządzenie niestandardowe... Rozwiń sekcję Wskazówki dotyczące klienta użytkownika, aby edytować te wskazówki.

Edytuj wskazówki dla klienta użytkownika

Wskazówki dotyczące klienta użytkownika to alternatywa dla ciągu znaków User-Agent, która umożliwia deweloperom dostęp do informacji o przeglądarce użytkownika w sposób zapewniający ochronę prywatności i ergonomiczny. Więcej informacji o wskazówkach dotyczących klienta User-Agent znajdziesz na stronie web.dev/user-agent-client-hints/.

Problem z Chromium: 1073909

Aktualizacje panelu sieci

Zachowywanie ustawienia „rejestruj dziennik sieci”

W Narzędziach deweloperskich zostanie zachowane ustawienie „Rejestruj dziennik sieciowy”. Wcześniej narzędzia deweloperskie resetowały wybór użytkownika przy każdym ponownym załadowaniu strony.

Rejestruj dziennik sieci

Problem z Chromium: 1122580

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

Panel Sieć wyświetla teraz połączenia WebTransport.

Połączenia WebTransport

WebTransport to nowy interfejs API oferujący małe opóźnienia, dwukierunkową komunikację klient-serwer. Więcej informacji o ich zastosowaniach i o tym, jak przekazać opinię o przyszłości wdrożenia, znajdziesz na stronie web.dev/webtransport/.

Problem z Chromium: 1152290

Nazwa „Online” została zmieniona na „Bez ograniczenia”

Nazwa opcji emulacji sieci „Online” została zmieniona na „Bez ograniczania”.

Rejestruj dziennik sieci

Problem z Chromium: 1028078

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

Nowe skróty do kopiowania obiektu w konsoli i panelu Źródła

Możesz teraz kopiować wartości obiektów za pomocą nowych skrótów w konsoli i panelu Źródła. Jest to przydatne zwłaszcza wtedy, gdy chcesz skopiować duży obiekt (np. długą tablicę).

Skopiuj obiekt w konsoli

Skopiuj obiekt w panelu Źródła

Problemy z Chromium: 1149859, 1148353

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

Możesz teraz skopiować nazwę pliku, klikając prawym przyciskiem myszy:

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

Z menu kontekstowego wybierz Skopiuj nazwę pliku, aby skopiować nazwę pliku.

Skopiuj nazwę pliku z panelu Źródła

Skopiuj nazwę pliku w panelu Style

Problem z Chromium: 1155120

Zmiany w widoku szczegółów ramki

Nowe informacje o skryptach Service Worker w widoku szczegółów ramki

W Narzędziach deweloperskich wyświetlają się teraz dedykowane mechanizmy Service Worker w ramce, która je tworzy.

W panelu Aplikacja rozwiń ramkę z mechanizmami Service Worker, a następnie wybierz skrypt w drzewie Service Workers, aby wyświetlić szczegóły.

Informacje o instancjach Service Worker w widoku szczegółów ramki

Problem z Chromium: 1122507

Pomiar informacji o pamięci w widoku szczegółów klatki

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

Nowy interfejs performance.measureMemory() API szacuje wykorzystanie pamięci przez całą stronę internetową. Z tego artykułu dowiesz się, jak monitorować całkowite wykorzystanie pamięci przez stronę internetową za pomocą nowego interfejsu API.

Pomiar pamięci

Problem z Chromium: 1139899

Przesyłanie opinii na karcie Problemy

Jeśli chcesz poprawić komunikat o problemie, otwórz kartę Problemy w sekcji Konsola lub Więcej ustawień > Więcej narzędzi > Problemy, aby otworzyć kartę Problemy. Rozwiń komunikat o problemie i kliknij Czy komunikat o problemie jest dla Ciebie przydatny?, aby przesłać opinię w wyskakującym okienku.

Link do opinii o problemie

Pominięte klatki w panelu Wydajność

Podczas analizowania szybkości wczytywania w panelu Wydajność sekcja Klatki oznacza teraz pominięte klatki jako czerwone. Najedź na nią kursorem, aby sprawdzić liczbę klatek.

Pominięte klatki

Problem z Chromium: 1075865

Emuluj urządzenia składane i 2-ekranowe w trybie urządzenia

W Narzędziach deweloperskich możesz teraz emulować urządzenia składane i 2 ekrany.

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

Kliknij nową ikonę rozpiętości, aby przełączać się między trybem złożonym, złożonym a podwójnym i rozłożonym.

Możesz też włączyć eksperymentalne funkcje platformy internetowej, aby uzyskać dostęp do nowej funkcji mediów CSS screen-spanning i interfejsu JavaScript API getWindowSegments. Ikona eksperymentalna pokazuje stan flagi Eksperymentalne funkcje platformy internetowej. Gdy flaga jest włączona, ikona się wyróżnia. Przejdź do sekcji chrome://flags i włącz flagę.

Emuluj podwójny ekran

Problem z Chromium: 1054281

Funkcje eksperymentalne

Zautomatyzuj testowanie przeglądarki dzięki aplikacji Puppeteer Recorder

Narzędzia deweloperskie mogą teraz generować skrypty Puppeteer na podstawie Twoich interakcji z przeglądarką, co ułatwia zautomatyzowanie jej testowania. Puppeteer to biblioteka Node.js, która zapewnia wysoki poziom interfejsu API do sterowania Chrome lub Chromium za pomocą protokołu DevTools.

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 nadaj plikowi nazwę (np. test01.js).

Kliknij przycisk Nagraj u dołu, aby rozpocząć nagrywanie interakcji. Wypełnij formularz widoczny na ekranie. Zwróć uwagę, że polecenia Puppeteer są odpowiednio dołączone do pliku. Kliknij ponownie przycisk Nagraj, aby zatrzymać nagrywanie.

Aby uruchomić skrypt, postępuj zgodnie z przewodnikiem dla początkujących na oficjalnej stronie Puppeteer.

Pamiętaj, że jest to eksperyment na wczesnym etapie. Planujemy z czasem ulepszyć i rozszerzyć funkcjonalność Dyktafonu.

Dyktafon do lalek

Problem z Chromium: 1144127

Edytor czcionek w panelu Style

Nowy edytor czcionek to nowy edytor czcionek w panelu Style, który wyświetla właściwości związane z czcionkami. Pomaga on znaleźć idealną typografię dla Twojej strony.

Wyskakujące okienko zapewnia przejrzysty interfejs, umożliwiając dynamiczne manipulacje typografią przy użyciu szeregu intuicyjnych typów danych wejściowych.

Edytor czcionek w panelu Style

Problem z Chromium: 1093229

Narzędzia do debugowania CSS Flexbox

Od ostatniej wersji Narzędzia deweloperskie dodały eksperymentalną obsługę debugowania Flexbox.

W Narzędziach deweloperskich rysuje się teraz linia pomocnicza, która ułatwia lepszą wizualizację właściwości CSS align-items. Obsługiwana jest też właściwość CSS gap. W tym przykładzie mamy do czynienia z CSS gap: 12px;. Zwróć uwagę na wzorzec wykluwania się każdej luki.

Flexbox

Problem z Chromium: 1139949

Nowa karta Naruszenia CSP

Wszystkie informacje o naruszeniach polityki bezpieczeństwa treści (CSP) znajdziesz w jednym miejscu na nowej karcie Naruszenia zasad CSP. Nowa karta to eksperyment, który powinien ułatwić pracę ze stronami internetowymi o dużej liczbie naruszeń zasad CSP i zaufanego typu.

Karta Naruszenia CSP

Problem z Chromium: 1137837

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

Zaawansowany algorytm kontrastu percepcyjnego (APCA) zastępuje współczynnik kontrastu zgodny z wytycznymi AA/AAA w selektorze kolorów.

APCA to nowy sposób obliczania kontrastu, opracowany na podstawie najnowszych badań nad postrzeganiem kolorów. W porównaniu z wytycznymi AA/AAA APCA zależy bardziej od kontekstu. Kontrast jest obliczany na podstawie właściwości przestrzennych tekstu (waga i rozmiar czcionki), koloru (zauważona różnica w jasności tekstu i tła) oraz kontekstu (jasność otoczenia, otoczenie, przeznaczenie tekstu).

APCA w selektorze kolorów

Przykład pokazuje, że próg APCA wynosi 38%. Współczynnik kontrastu musi być równy podanej wartości lub od niej wyższy. Ta wartość jest obliczana na podstawie grubości i rozmiaru czcionki w kontekście tabeli przeglądowej APCA.

Problem z Chromium: 1121900

Pobieranie kanałów podglądu

Jako domyślnej przeglądarki dla programistów możesz używać Chrome Canary, Dev lub Beta. Te kanały podglądu dają dostęp do najnowszych funkcji Narzędzi deweloperskich, umożliwiają testowanie najnowocześniejszych interfejsów API platform internetowych oraz wykrywanie problemów w witrynie, zanim zdołają zrobić użytkownicy.

Kontakt z zespołem Narzędzi deweloperskich w Chrome

Użyj poniższych opcji, aby omówić nowe funkcje i zmiany w poście lub wszelkie inne kwestie związane z Narzędziami dla deweloperów.

  • Prześlij nam sugestię lub opinię na stronie crbug.com.
  • Aby zgłosić problem z Narzędziami deweloperskimi, kliknij Więcej opcji   Więcej   > Pomoc > Zgłoś problemy z Narzędziami deweloperskimi.
  • zatweetuj na @ChromeDevTools.
  • Napisz komentarz o nowościach w filmach w YouTube dostępnych w Narzędziach deweloperskich lub z poradami dotyczącymi narzędzi dla deweloperów w filmach w YouTube.

Co nowego w Narzędziach deweloperskich

Lista wszystkich omówionych funkcji w serii Co nowego w Narzędziach deweloperskich.

Chrome 123

Chrome 122

Chrome 121

Chrome 120

Chrome 119

Chrome 118

Chrome 117

Chrome 116

Chrome 115

Chrome 114

Chrome 113

Chrome 112

Chrome 111

Chrome 110

Chrome 109

Chrome 108

Chrome 107

Chrome 106

Chrome 105

Chrome 104

Chrome 103

Chrome 102

101 Chrome

Chrome 100

Chrome 99

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Chrome 93

Chrome 92

Chrome 91

Chrome 90

Chrome 89

Chrome 88

Chrome 87

Chrome 86

Chrome 85

Chrome 84

Chrome 83

Chrome 82

Subskrypcja Chrome 82 została anulowana.

Chrome 81

Chrome 80

Chrome 79

Chrome 78

Chrome 77

Chrome 76

Chrome 75

Chrome 74

Chrome 73

Chrome 72

Chrome 71

Chrome 70

Chrome 68

Chrome 67

Chrome 66

Chrome 65

Chrome 64

Chrome 63

Chrome 62

Chrome 61

Chrome 60

Chrome 59