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

Pomoc w debugowaniu naruszeń zaufanych typów

Punkt przerwania w przypadku naruszeń zaufanych typów

W panelu Źródła możesz teraz ustawiać punkty przerwania i wyłapywać wyjątki związane z naruszeniami zaufanych typów.

Interfejs Trusted Types pomaga zapobiegać lukom w zabezpieczeniach typu cross-site scripting opartym na DOM. Dowiedz się, jak pisać, sprawdzać i utrzymywać aplikacje wolne od luk w zabezpieczeniach DOM XSS za pomocą dyrektywy Trusted Types. Więcej informacji znajdziesz tutaj.

W panelu Źródła otwórz panel boczny debugera. Rozwiń sekcję Punkty przerwania dla naruszeń zasad CSP i zaznacz pole wyboru Naruszenia zaufanych typów, aby wstrzymywać działanie programu w przypadku wyjątków. Wypróbuj to na tej stronie demonstracyjnej.

Problem w Chromium: 1142804

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

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

Problem w Chromium: 1150883

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

Możesz teraz robić zrzuty ekranu węzłów, aby obejmowały cały węzeł, w tym treści poniżej linii podziału. Wcześniej zrzut ekranu był ucinany w przypadku treści niewidocznych w obszarze wyświetlania. Zrzuty ekranu całej strony są teraz również dokładne.

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

Problem w Chromium: 1003629

Nowa karta tokenów zaufania w przypadku żądań sieciowych

Sprawdzaj żądania sieciowe Trust Token na nowej karcie Trust Token.

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 dodatkowe funkcje debugowania.

Problem w Chromium: 1126824

Lighthouse 7 w panelu Lighthouse

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

Nowe audyty w Lighthouse 7:

• Wstępnie wczytuj 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 PWA zmieniła się dość znacząco.

• Grupa Możliwość instalacji jest teraz w całości oparta na sprawdzeniach możliwości, które umożliwiają spełnienie kryteriów instalacji w Chrome. Są to te same sygnały, które są widoczne w panelu manifestu.

  • Test „Rejestruje usługę Service Worker…” został przeniesiony do grupy PWA Optimized, a test „Używa protokołu HTTPS” jest teraz uwzględniany jako część kluczowego testu „Wymagania dotyczące instalacji”.
  • Grupa Szybkie i niezawodne zostanie usunięta. Odświeżony audyt „Wymagania dotyczące instalacji” obejmuje sprawdzanie możliwości działania offline, dlatego audyt „Bieżąca strona i start_url wyświetlają błąd 200, kiedy są offline” został usunięty. Usunęliśmy też test „Wczytywanie strony przez sieć komórkową jest dostatecznie szybkie”.

Problem w Chromium: 772558

Zmiany w panelu Elementy

Obsługa wymuszania stanu :target w arkuszu CSS

Teraz możesz używać Narzędzi deweloperskich, aby wymuszać i sprawdzać stan CSS :target.

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 elementowi, gdy hash w adresie URL i identyfikator elementu są takie same. Aby wypróbować tę funkcję, zapoznaj się z tą wersją demonstracyjną. Ta nowa funkcja Narzędzi deweloperskich umożliwia testowanie takich stylów bez konieczności ciągłego ręcznego zmieniania adresu URL.

Problem w Chromium: 1156628

Nowy skrót do duplikowania elementu

Użyj nowego skrótu Duplikuj element, aby natychmiast sklonować element.

W panelu Elementy kliknij prawym przyciskiem myszy element i wybierz Duplikuj element. Pod nim zostanie utworzony nowy element.

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

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

Problemy z Chromium: 1150797, 1150797

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

W panelu Style są teraz wyświetlane 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 RGBA, HSLA i szesnastkową wartości koloru.

Problem w Chromium: 1147016

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

Dzięki kilku 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 w panelu Style, aby skopiować wartość.

Opcje kopiowania klasy CSS:

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

Opcje kopiowania właściwości CSS:

• Skopiuj deklarację Skopiuj deklarację bieżącego wiersza.
• Skopiuj usługę. Skopiuj właściwość bieżącego wiersza.
• Skopiuj wartość: skopiuj wartość bieżącego wiersza.

Problem w 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świetlać wartość plików cookie po dekodowaniu URL.

Otwórz panel Aplikacja i wybierz panel Pliki cookie. Wybierz dowolny plik cookie na liście. Zaznacz nowe pole wyboru Pokaż zdekodowane z adresu URL, aby wyświetlić zdekodowany plik cookie.

Problem w Chromium: 997625

Usuwanie tylko widocznych plików cookie

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

W panelu Application (Aplikacja) > Cookies (Pliki cookie) wpisz tekst w polu tekstowym, aby przefiltrować pliki cookie. W tym przykładzie filtrujemy listę według „PREF”. Kliknij przycisk Wyczyść odfiltrowane pliki cookie, aby usunąć widoczne pliki cookie. Wyczyść tekst filtra, a zobaczysz, że pozostałe pliki cookie nadal znajdują się na liście. Wcześniej można było tylko wyczyścić wszystkie pliki cookie.

Problem z Chromium: 978059

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

Podczas czyszczenia danych witryny w panelu Pamięć Narzędzia deweloperskie domyślnie usuwają tylko własne pliki cookie. Włącz opcję uwzględnianie plików cookie innych firm, aby wyczyścić również pliki cookie innych firm.

Problem w Chromium: 1012337

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

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

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

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

Problem w Chromium: 1073909

Aktualizacje panelu Sieć

Zachowywanie ustawienia „Rejestruj dziennik sieci”

Narzędzia deweloperskie zapamiętują teraz ustawienie „Rejestruj dziennik sieci”. Wcześniej Narzędzia deweloperskie resetowały wybór użytkownika za każdym razem, gdy strona była ponownie ładowana.

Problem w Chromium: 1122580

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

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

WebTransport to nowy interfejs API, który oferuje dwukierunkowe przesyłanie wiadomości między klientem a serwerem z niskim opóźnieniem. Więcej informacji o przypadkach użycia i o tym, jak przekazać opinię na temat przyszłości implementacji, znajdziesz na stronie web.dev/webtransport/.

Problem z Chromium: 1152290

Nazwa „Online” została zmieniona na „Bez ograniczeń”

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

Problem w Chromium: 1028078

Nowe opcje kopiowania w panelach Konsola i Źródła oraz w okienku Style

Nowe skróty do kopiowania obiektu w panelach Konsola i Źródła

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

Problemy z Chromium: 1149859, 1148353

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

Nazwę pliku możesz teraz skopiować, klikając prawym przyciskiem myszy:

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

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

Problem z Chromium: 1155120

Aktualizacje widoku szczegółów ramki

Nowe informacje o Service Workerach w widoku szczegółów ramki

Narzędzia deweloperskie wyświetlają teraz dedykowane instancje robocze usługi w ramce, która je tworzy.

W panelu Aplikacja rozwiń ramkę z procesami roboczymi usługi, a następnie wybierz proces roboczy usługi w drzewie Procesy robocze usługi, aby wyświetlić szczegóły.

Problem w Chromium: 1122507

Informacje 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ą tego nowego interfejsu API.

Problem w Chromium: 1139899

Przesyłanie opinii na karcie Problemy

Jeśli chcesz ulepszyć komunikat o problemie, 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?. Następnie możesz przesłać opinię w wyskakującym okienku.

Utracone klatki w panelu Wydajność

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

Problem w Chromium: 1075865

Emulowanie urządzeń składanych i z dwoma ekranami w trybie urządzenia

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

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

Kliknij ikonę nowego zakresu, aby przełączać się między trybem pojedynczego ekranu (złożonego) a trybem dwóch ekranów (rozłożonego).

Możesz też włączyć eksperymentalne funkcje platformy internetowej, aby uzyskać dostęp do nowej funkcji CSS mediascreen-spanning i interfejsu API JavaScript getWindowSegments. Ikona eksperymentalna wyświetla stan flagi Funkcje eksperymentalne platformy internetowej. Ikona jest wyróżniona, gdy flaga jest włączona. Przejdź do chrome://flags i włącz flagę.

Problem w Chromium: 1054281

Funkcje eksperymentalne

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

Narzędzia deweloperskie mogą teraz generować skrypty Puppeteer na podstawie Twoich 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 kontrolowania 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 nadaj mu nazwę (np. test01.js).

Kliknij przycisk Nagrywaj u dołu, aby rozpocząć nagrywanie interakcji. Spróbuj wypełnić formularz na ekranie. Zauważ, że polecenia Puppeteer są odpowiednio dołączane do pliku. Aby zatrzymać nagrywanie, ponownie kliknij przycisk Nagrywaj.

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. Z czasem planujemy ulepszać i rozszerzać funkcje Rejestratora.

Problem w Chromium: 1144127

Edytor czcionek w panelu Style

Nowy edytor czcionek to wysuwany edytor w panelu Style, który zawiera właściwości związane z czcionkami, aby pomóc Ci znaleźć idealną typografię dla Twojej strony internetowej.

Wyskakujące okienko zapewnia przejrzysty interfejs do dynamicznego manipulowania typografią za pomocą serii intuicyjnych typów danych wejściowych.

Problem w Chromium: 1093229

Narzędzia do debugowania CSS Flexbox

Od ostatniej wersji narzędzia deweloperskie mają eksperymentalną obsługę debugowania flexboxa.

Narzędzia deweloperskie rysują 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 tym przykładzie mamy CSS gap: 12px;. Zwróć uwagę na wzór kreskowania każdej luki.

Problem w Chromium: 1139949

Nowa karta Naruszenia CSP

Na nowej karcie Naruszenia 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 Types.

Problem w Chromium: 1137837

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

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

APCA to nowy sposób obliczania kontrastu oparty na najnowszych badaniach dotyczących percepcji 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 (postrzegana różnica jasności między tekstem a tłem) i kontekstu (światło otoczenia, otoczenie, zamierzone przeznaczenie tekstu).

W tym przykładzie próg APCA wynosi 38%. Współczynnik kontrastu musi być równy podanej wartości lub od niej większy. Ta wartość jest obliczana na podstawie grubości i rozmiaru czcionki zgodnie z tą tabelą wyszukiwania APCA.

Problem w Chromium: 1121900

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.

Skontaktuj się 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.
• Zostawiaj komentarze pod filmami na YouTube z serii „Co nowego w Narzędziach deweloperskich” lub filmami 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.