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

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

Punkt przerwania w przypadku naruszeń zaufanego typu

Możesz teraz ustawiać punkty przerwania i wyjątki dla naruszeń w przypadku naruszeń zaufanych typów w sekcji Źródła panel.

Interfejs API Trusted Types (Zaufane typy) pomaga zapobiegać lukom w zabezpieczeniach związanym z budowaniem skryptów między witrynami w modelu DOM. Dowiedz się, jak to zrobić aby pisać, przeglądać i obsługiwać aplikacje wolne od luk w zabezpieczeniach DOM XSS za pomocą zaufanych typów tutaj.

W panelu Źródła otwórz panel paska bocznego debugera. Rozwiń naruszenie zasad CSP punktów przerwania i zaznacz pole wyboru Naruszenia typu zaufanego, aby wstrzymać wyjątki. Możesz to zrobić, korzystając z tej strony demonstracyjnej.

Problem w Chromium: 1142804

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

W panelu Źródła obok wiersza dotyczącego naruszenia zaufanego typu pojawi się teraz ikona ostrzeżenia. Najechanie kursorem go, aby wyświetlić podgląd wyjątku. Kliknij ją, aby rozwinąć kartę Problemy, gdzie znajdziesz więcej informacji: oraz wskazówki, jak go rozwiązać.

Problem z Chromium: 1150883

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

Teraz możesz przechwytywać zrzuty ekranu całego węzła, w tym treści w części strony widocznej po przewinięciu. Wcześniej, Zrzut ekranu został przycięty ze względu na zawartość niewidoczną w widocznym obszarze. Zrzuty całego ekranu są teraz także bardzo precyzyjnie.

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

Problem w Chromium: 1003629

Nowa karta Tokeny zaufania dla żądań sieciowych

Sprawdź żądania sieciowe z tokenem zaufania na nowej karcie Tokeny zaufania.

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

W kolejnych wersjach udostępnimy dalszą obsługę debugowania.

Problem z Chromium: 1126824

Latarnia morska 7 w panelu Lighthouse

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

Nowe audyty w Lighthouse 7:

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

• Grupa Do zainstalowania jest teraz w pełni oparta na testach możliwości, które umożliwiają działanie kryteria instalacji. To te same sygnały, które są widoczne w panelu pliku manifestu.

  • Komunikat „Rejestruje skrypt service worker...” audyt zostanie przeniesiony do grupy PWA Optimized, a w kolumnie „Uses HTTPS" audyt jest teraz częścią kluczowych „wymagań dotyczących instalacji”
  • Grupa Szybkie i niezawodne zostanie usunięta. W związku ze zaktualizowanymi „wymaganiami dotyczącymi instalacji” kontrola obejmuje sprawdzanie możliwości offline, a pole „current page i start_url” zwraca kod 200, gdy offline” wyświetla się komunikat „Strona wczytuje się wystarczająco szybko w sieci komórkowej”. usunięto kontrolę .

Problem w Chromium: 772558

Aktualizacje panelu Elementy

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

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

W panelu Elementy wybierz element i przełącz jego stan. Włącz :target za pomocą pola wyboru, by wymusić i sprawdzić style.

Aby określić styl elementu, używaj pseudoklasy :target, gdy hasz w adresie URL i identyfikator elementu. są takie same. Zapoznaj się z tą wersją demonstracyjną i przekonaj się, jak działa. Ta nowa funkcja w Narzędziach deweloperskich pozwala przetestować takich stylów bez konieczności ręcznego zmieniania adresu URL przez cały czas.

Problem w Chromium: 1156628

Nowy skrót do duplikatu elementu

Nowy skrót Powiel element pozwala od razu sklonować element.

Kliknij prawym przyciskiem myszy element w panelu Elementy i wybierz Powiel element. Nowy element który nie został utworzony.

Możesz też zduplikować element, używając skrótów klawiszowych:

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

Problemy z Chromium: 1150797, 1150797

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

W panelu Style znajdziesz teraz selektory kolorów 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 RGBA, HSLA i i szesnastkowa wartość koloru.

Problem z Chromium: 1147016

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

Teraz możesz szybciej kopiować właściwości CSS za pomocą kilku nowych skrótów.

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

Opcje kopiowania klasy CSS:

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

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.
• Kopiuj wartość: skopiuj wartość z bieżącego wiersza.

Problem z Chromium: 1152391

Aktualizacje dotyczące plików cookie

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

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

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.

Problem z Chromium: 997625

Wyczyść tylko widoczne pliki cookie

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

W panelu Aplikacja > Pliki cookie, wpisz tekst w polu tekstowym, by filtrować pliki cookie. W w naszym przykładzie, filtrujemy listę według wartości „PREF”. Kliknij przycisk Wyczyść odfiltrowane pliki cookie, aby usunąć widoczne pliki cookie. Wyczyść tekst filtra, a pozostałe pliki cookie pozostaną widoczne z listy. Wcześniej dostępna była tylko opcja usunięcia wszystkich plików 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 usuwają teraz tylko własne pliki cookie wartość domyślną. Aby usunąć pliki cookie innych firm, włącz też opcję Uwzględnianie plików cookie innych firm.

Problem z Chromium: 1012337

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

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

Otwórz Ustawienia > Urządzenia i kliknij Dodaj urządzenie niestandardowe... Rozwiń sekcję Klient użytkownika wskazówki dla klientów, by edytować wskazówki dla klientów.

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

Problem z Chromium: 1073909

Aktualizacje panelu Sieć

Zachowuj „rejestruj dziennik sieciowy” ustawienie

Narzędzia deweloperskie utrwalają teraz „Rejestruj dziennik sieciowy” . Wcześniej Narzędzia deweloperskie resetowały wybór użytkownika za każdym razem, gdy strona jest ponownie ładowana.

Problem z Chromium: 1122580

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

Na panelu Sieć wyświetlają się teraz połączenia WebTransport.

WebTransport to nowy interfejs API oferujący przesyłanie wiadomości klient-serwer z małym opóźnieniem i dwukierunkowe. Więcej informacji o jego przypadkach użycia oraz o sposobie przekazywania opinii na temat przyszłości wdrożenia web.dev/webtransport/.

Problem z Chromium: 1152290

„Online” zmieniono na „Bez ograniczania”

opcja emulacji sieci „Online”, została zmieniona na „No Throttling” (Bez ograniczenia).

Problem w Chromium: 1028078

Nowe opcje kopiowania w konsoli, panelu Źródła i 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. To jest jest to przydatne zwłaszcza wtedy, gdy masz do skopiowania 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 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.

Aby skopiować nazwę pliku, z menu kontekstowego wybierz Skopiuj nazwę pliku.

Problem z Chromium: 1155120

Aktualizacje widoku szczegółów ramki

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

W Narzędziach deweloperskich są teraz wyświetlane dedykowane mechanizmy Service Worker pod ramką, która powoduje ich utworzenie.

W panelu Aplikacja rozwiń ramkę za pomocą mechanizmów Service Worker, a następnie wybierz skrypt service worker w drzewie Service Workers, aby wyświetlić szczegóły.

Problem z Chromium: 1122507

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

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

Nowy interfejs API performance.measureMemory() szacuje wykorzystanie pamięci przez całą stronę internetową. Ucz się jak monitorować całkowite wykorzystanie pamięci przez stronę internetową za pomocą nowego interfejsu API. Przeczytaj ten artykuł.

Problem w Chromium: 1139899

Prześlij opinię z karty Problemy

Jeśli chcesz poprawić komunikat o błędzie, otwórz kartę Problemy w Konsoli lub Więcej ustawień > Więcej narzędzi > Problemy > aby otworzyć kartę Problemy. Rozwiń problem i kliknij Czy komunikat o problemie jest dla Ciebie przydatny?, a następnie prześlij opinię na gdy pojawi się wyskakujące okienko.

Pominięte klatki w panelu Wydajność

Podczas analizowania wydajności wczytywania w panelu Wydajność sekcja Klatki oznacza teraz: pomijać klatki jako czerwone. Najedź na niego kursorem, aby poznać liczbę klatek.

Problem w Chromium: 1075865

Emuluj funkcje składane i dwuekranowe w trybie urządzenia

W Narzędziach deweloperskich możesz teraz emulować urządzenia z 2 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ę spanu, aby przełączać się między trybem jednoekranowym lub złożonym a dwuekranowym lub rozłożonym. w różnych stanach.

Możesz też włączyć funkcje eksperymentalnej platformy internetowej, aby uzyskać dostęp do nowych multimediów CSS. screen-spanning oraz JavaScript getWindowSegments API. Ikona eksperymentalna wyświetla stan flagi Eksperymentalne funkcje platformy internetowej. Ikona jest wyróżniona, gdy flaga jest włączony. Przejdź do elementu chrome://flags i przełącz flagę.

Problem z Chromium: 1054281

Funkcje eksperymentalne

Zautomatyzuj testowanie przeglądarki za pomocą aplikacji Puppeteer Dyktafon

Narzędzia deweloperskie mogą teraz generować skrypty Puppeteer na podstawie interakcji z przeglądarką. Dzięki temu ułatwia automatyzację testowania przeglądarki. Puppeteer to biblioteka środowiska Node.js, która udostępnia Ogólnego interfejsu API 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. Wybierz kartę Nagrywanie na w panelu po lewej stronie. Dodaj nowe nagranie i nadaj plikowi nazwę (np. test01.js).

Kliknij przycisk Rejestruj na dole, aby rozpocząć rejestrowanie interakcji. Wpisz formularza wyświetlanego na ekranie. Zwróć uwagę, że polecenia Puppeteer są odpowiednio dołączane do pliku. Kliknij Nagraj jeszcze raz, aby zatrzymać nagrywanie.

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

Pamiętaj, że jest to eksperyment na wczesnym etapie. Planujemy ulepszyć i rozszerzyć Dyktafon funkcje aplikacji w czasie.

Problem z Chromium: 1144127

Edytor czcionek w panelu Style

Nowy edytor czcionek to nowy edytor podręczny w panelu Style, który zawiera właściwości związane z czcionkami. znajdziesz idealną typografię swojej strony.

Wyskakujące okienko zapewnia przejrzysty interfejs, który dynamicznie zarządza typografią za pomocą kilku intuicyjnych typów danych wejściowych.

Problem z Chromium: 1093229

Narzędzia do debugowania CSS Flexbox

W Narzędziach deweloperskich dodaliśmy eksperymentalną obsługę debugowania flexbox od ostatniej wersji.

Narzędzia deweloperskie wyznaczają teraz wskazówkę, która pomaga lepiej zwizualizować właściwość CSS align-items. Obsługiwana jest również właściwość CSS gap. W tym przykładzie mamy CSS gap: 12px;. Zwróć uwagę na w każdej szczelice pojawia się wzór wyklucia się.

Problem z Chromium: 1139949

Nowa karta Naruszenia CSP

Wszystkie naruszenia Content Security Policy (CSP) znajdziesz w jednym miejscu na nowej karcie Naruszenia CSP. Ta nowa karta jest eksperymentem, który powinien ułatwić pracę ze stronami internetowymi o dużej ilości naruszenia zasad CSP i zaufanego typu.

Problem z Chromium: 1137837

Nowy sposób obliczania kontrastu kolorów – Advanced Perceptual Contrast Contrast Algorithm (APCA)

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

APCA to nowy sposób obliczania kontrastu oparty na nowoczesnych badaniach nad postrzeganiem kolorów. W porównaniu z wytycznych AA/AAA, APCA jest bardziej zależny od kontekstu. Kontrast jest obliczany na podstawie właściwości przestrzenne (waga i rozmiar czcionki), kolor (różnica jasności tekstu tła) oraz kontekstu (jasność otoczenia, otoczenie, przeznaczenie tekstu).

Przykład pokazuje, że próg APCA wynosi 38%. Współczynnik kontrastu musi być co najmniej równy podanej wartości. Ta wartość jest obliczana na podstawie grubości i rozmiaru czcionki. Informacje na ten temat znajdziesz w tej tabeli przeglądowej APCA.

Problem z Chromium: 1121900

Pobierz kanały podglądu

Zastanów się, czy nie ustawić Chrome w wersji Canary, Dev lub beta jako domyślnej przeglądarki do programowania. Te kanały wersji testowej dają dostęp do najnowszych funkcji Narzędzi deweloperskich, umożliwiają testowanie najnowocześniejszych interfejsów API platformy internetowej i wykrywanie problemów w witrynie, zanim użytkownicy ją zobaczą.

Kontakt z zespołem ds. Narzędzi deweloperskich w Chrome

Skorzystaj z poniższych opcji, aby porozmawiać o nowych funkcjach i zmianach w poście lub o innych kwestiach związanych z Narzędziami deweloperskimi.

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

Co nowego w Narzędziach deweloperskich

Lista wszystkich tematów, które zostały omówione w serii Co nowego w Narzędziach deweloperskich.