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

Jecelyn Yeen

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

Punkt przerwania w przypadku naruszeń zaufanego typu

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

Interfejs API Trusted Types (Zaufane typy) pomaga zapobiegać lukom w zabezpieczeniach związanym z budowaniem skryptów między witrynami w modelu DOM. Informacje o tym, jak pisać, przeglądać i obsługiwać aplikacje bez 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 naruszeń zasad CSP i zaznacz pole wyboru Naruszenia typu zaufanego, aby wstrzymać wyjątki. Możesz to zrobić, korzystając z tej strony demonstracyjnej.

Punkt przerwania w przypadku naruszeń zaufanego typu

Problem w Chromium: 1142804

W panelu Źródła obok wiersza dotyczącego naruszenia zaufanego typu pojawi się teraz ikona ostrzeżenia. Najedź na niego kursorem, aby wyświetlić podgląd wyjątku. Kliknij ją, aby rozwinąć kartę Problemy. Znajdziesz na niej więcej informacji o wyjątkach i wskazówki, jak je rozwiązać.

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

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 był przycięty z powodu treści, które nie były widoczne w widocznym obszarze. Zrzuty całego ekranu również są już dokładne.

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

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

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 pomagający w walce z oszustwami i w odróżnianiu botów od prawdziwych ludzi bez pasywnego śledzenia. Dowiedz się, jak zacząć korzystać z tokenów zaufania.

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

Nowa karta Token zaufania dla żądań sieciowych

Problem z Chromium: 1126824

Latarnia morska 7 w panelu Lighthouse

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

Latarnia morska 7 w panelu Lighthouse

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 rejestrowane w panelu Issues. Wskazuje listę nierozwiązanych problemów w panelu Issues.
  • Progresywne aplikacje internetowe (PWA). Kategoria aplikacji PWA znacznie się zmieniła.

  • Grupa Dostępna do zainstalowania jest teraz w pełni oparta na testach możliwości, które umożliwiają włączenie kryteriów instalacji Chrome. To te same sygnały, które są widoczne w panelu pliku manifestu.

    • Kontrola „Rejestruje mechanizm Service Worker...” zostanie teraz przeniesiona do grupy PWA Optimized, a kontrola „Używa HTTPS” w ramach najważniejszego audytu „Wymagania dotyczące instalacji”.
    • Grupa Szybkie i niezawodne zostanie usunięta. W ramach ulepszonego audytu „Wymagania dotyczące instalacji” obejmuje on sprawdzenie możliwości offline, dlatego „bieżąca strona i adres URL start_url” odpowiadają z wartością 200, gdy kontrola offline została usunięta. Usunęliśmy też kontrolę „Strona wczytuje się wystarczająco szybko w sieci komórkowej”.

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. Zaznacz pole wyboru :target, aby wymusić i sprawdzić style.

Używaj pseudoklasy :target, aby określać styl elementu, 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 testować takie style bez konieczności ręcznego zmieniania adresu URL.

wymuszanie stanu „:target” CSS

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. Utworzy się pod nim nowy element.

Możesz też zduplikować element, używając 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 znajdziesz teraz selektory kolorów niestandardowych właściwości CSS.

Możesz też przytrzymać klawisz Shift i klikać selektor kolorów, by przełączać się między reprezentacjami RGBA, HSLA i wartością szesnastkową 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 szybciej kopiować właściwości CSS za pomocą kilku nowych skrótów.

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

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

Opcje kopiowania klasy CSS:

  • Selektor kopii. Skopiuj bieżącą nazwę selektora.
  • Kopiuj regułę. Skopiuj regułę bieżącego selektora.
  • Kopiuj wszystkie deklaracje: skopiuj wszystkie deklaracje w ramach bieżącej reguły, w tym właściwości 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.
  • 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.

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

Problem z Chromium: 997625

Wyczyść tylko widoczne pliki cookie

Przycisk Wyczyść wszystkie pliki cookie w okienku Pliki cookie zastąpiono przyciskiem Wyczyść odfiltrowane pliki cookie.

W panelu Aplikacja w panelu Pliki cookie wpisz w polu tekstowym tekst, według którego chcesz filtrować pliki cookie. 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. Pozostałe pliki cookie pozostaną na liście. Wcześniej dostępna była tylko opcja usunięcia wszystkich plików cookie.

Wyczyść tylko widoczne 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. Aby usunąć pliki cookie innych firm, włącz też opcję Uwzględnianie plików cookie innych firm.

Opcja usuwania 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... Aby edytować wskazówki dotyczące klienta, rozwiń sekcję Wskazówki dotyczące klienta użytkownika.

Edytuj wskazówki dotyczące klienta użytkownika

Wskazówki dotyczące klienta użytkownika to alternatywa dla ciągu znaków User-Agent, która umożliwia deweloperom uzyskiwanie dostępu do informacji o przeglądarce użytkownika w sposób zapewniający ochronę prywatności i ergonomię. 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 Sieć

Zachowuj ustawienie „Rejestruj dziennik sieciowy”

Narzędzia deweloperskie zachowują teraz 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ć

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

Połączenia WebTransport

WebTransport to nowy interfejs API oferujący przesyłanie wiadomości klient-serwer z małym opóźnieniem i dwukierunkowe. Aby dowiedzieć się więcej o przypadkach użycia tego narzędzia oraz o tym, jak przesłać opinię o przyszłości wdrożenia, wejdź na stronę web.dev/webtransport/.

Problem z Chromium: 1152290

„Online” zmieniono na „Bez ograniczania”

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

Rejestruj dziennik sieci

Problem z 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. Jest to przydatne zwłaszcza w przypadku dużych obiektów (np. długiej tablicy) do skopiowania.

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 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.

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

Skopiuj nazwę pliku w panelu Style

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 Skrypty service worker, 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 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ą. Informacje o tym, jak monitorować całkowite wykorzystanie pamięci przez stronę internetową za pomocą nowego interfejsu API, znajdziesz w tym artykule.

Pomiar pamięci

Problem w Chromium: 1139899

Prześlij opinię z karty Problemy

Jeśli chcesz poprawić komunikat o problemie, otwórz kartę Problemy w Konsoli lub otwórz Więcej ustawień > Więcej narzędzi > Problemy i otwórz kartę Problemy. Rozwiń komunikat o problemie i kliknij Czy komunikat o problemie jest dla Ciebie przydatny?, a następnie prześlij opinię w wyskakującym okienku.

Link do zgłaszania problemów

Pominięte klatki w panelu Wydajność

Podczas analizowania wydajności wczytywania w panelu Wydajność sekcja Klatki oznacza teraz usunięte klatki jako czerwone. Aby poznać liczbę klatek, najedź na niego kursorem.

Pominięte klatki

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 1 ekranem lub złożonym a dwuekranowym lub rozłożonym.

Możesz też włączyć eksperymentalne funkcje platformy internetowej, aby uzyskać dostęp do nowych funkcji CSS screen-spanning i JavaScript getWindowSegments API. Ikona eksperymentalna przedstawia stan flagi Eksperymentalne funkcje platformy internetowej. Po włączeniu flagi ikona jest podświetlana. Przejdź do elementu chrome://flags i przełącz flagę.

Emuluj tryb dwóch ekranów

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 Twoich interakcji z przeglądarką, co ułatwia automatyzację jej testowania. Puppeteer to biblioteka Node.js, która udostępnia ogólny interfejs API do sterowania Chrome i 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 Rejestruj na dole, aby rozpocząć rejestrowanie interakcji. Spróbuj wypełnić formularz na ekranie. Zwróć uwagę, że polecenia Puppeteer są odpowiednio dołączane do pliku. Ponownie kliknij przycisk Nagraj, 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 z czasem ulepszać i rozszerzać funkcje Dyktafonu.

Dyktafon lalek

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 powiązane z czcionkami, dzięki czemu możesz znaleźć idealną typografię dla swojej strony.

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

Edytor czcionek w panelu Style

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 wzorzec wyklucia się każdej luki.

Urządzenie Flexbox

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 liczbie naruszeń zasad CSP i zaufanego typu.

Karta Naruszenia CSP

Problem z Chromium: 1137837

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

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

APCA to nowy sposób obliczania kontrastu oparty na nowoczesnych badaniach nad postrzeganiem kolorów. W porównaniu z wytycznymi AA/AAA APCA jest bardziej zależny od kontekstu. Kontrast jest obliczany na podstawie właściwości przestrzennych tekstu (grubości i rozmiaru czcionki), koloru (różnica między tekstem a tłem) 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ć 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   Więcej   > Pomoc > Zgłoś problemy z Narzędziami deweloperskimi.
  • Opublikuj tweeta na stronie @ChromeDevTools.
  • Napisz komentarz pod filmem dotyczącym nowości w Narzędziach deweloperskich w Narzędziach deweloperskich w YouTube lub 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.

Chrome 127

Chrome 126

Chrome 125

Chrome 124

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

Chrome 101

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

Chrome 82 został anulowany.

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