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

Nowe narzędzia do debugowania siatki usług porównywania cen

W narzędziach dla deweloperów poprawiliśmy obsługę debugowania siatki CSS.

Jeśli element HTML na stronie ma zastosowany element display: grid lub display: inline-grid, obok niego w panelu Elementy zobaczysz plakietkę grid. Kliknij plakietkę, aby przełączyć wyświetlanie nakładki siatki na stronie.

Nowa karta Układ zawiera sekcję Siatka, w której znajdziesz kilka opcji wyświetlania siatek.

Aby dowiedzieć się więcej, zapoznaj się z dokumentacją.

Problem z Chromium: 1047356

Nowa karta WebAuthn

Teraz możesz emulować uwierzytelniacze i debugować interfejs Web Authentication API za pomocą nowego spisu WebAuthn.

Aby otworzyć kartę WebAuthn, kliknij Więcej opcji > Więcej narzędzi > WebAuthn.

Przed wprowadzeniem nowej karty WebAuthn w Chrome nie było obsługi debugowania WebAuthn. Aby przetestować aplikację internetową za pomocą interfejsu Web Authentication API, deweloperzy potrzebowali fizycznego uwierzytelniania.

Dzięki nowej karcie WebAuthn deweloperzy stron internetowych mogą teraz emulować te uwierzytelniacze, dostosowywać ich możliwości i sprawdzać ich stan bez konieczności korzystania z fizycznych uwierzytelniaczy. Dzięki temu debugowanie jest znacznie łatwiejsze.

Więcej informacji o funkcji WebAuthn znajdziesz w dokumentacji.

Problem z Chromium: 1034663

Przenoszenie narzędzi między górnym a dolnym panelem

Narzędzia deweloperskie umożliwiają teraz przenoszenie narzędzi między górnym a dolnym panelem. Dzięki temu możesz wyświetlać 2 narzędzia naraz.

Jeśli np. chcesz wyświetlić panel Elementy i Źródła jednocześnie, kliknij prawym przyciskiem myszy panel Źródła i wybierz Przenieś na dół, aby przesunąć go w dół.

Podobnie możesz przenieść dowolną kartę z dołu na górę. Aby to zrobić, kliknij prawym przyciskiem myszy kartę i wybierz Przenieś na górę.

Problem z Chromium: 1075732

Aktualizacje panelu Elementy

Wyświetlanie panelu bocznego Stylizacja w panelu Styl

W panelu Styl możesz teraz włączać i wyłączać pasek boczny Wyliczone.

Panel Obliczone w panelu Style jest domyślnie zwinięty. Kliknij przycisk, aby go włączyć lub wyłączyć.

Problem z Chromium: 1073899

Grupowanie właściwości CSS w panelu Wynikowy

Właściwości CSS możesz teraz grupować według kategorii w panelu Wynikowy.

Dzięki tej nowej funkcji grupowania łatwiej będzie nawigować w sekcji Wynikowy (mniej przewijania) i selektywnie skupiać się na zestawie powiązanych właściwości podczas sprawdzania kodu CSS.

W panelu Elementy wybierz element. Zaznacz lub odznacz pole wyboru Grupuj, aby zgrupować lub odzewidekować właściwości usługi porównywania cen.

Problemy z Chromium: 1096230, 1084673, 1106251

Lighthouse 6.4 w panelu Lighthouse

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

Nowe audyty w Lighthouse 6.4:

• Wstępnie wczytaj czcionki. Sprawdzanie, czy wszystkie czcionki, które używają font-display: optional, zostały wstępnie załadowane.
• Prawidłowe mapy źródeł. Sprawdza, czy strona ma prawidłowe mapy źródeł dla własnych dużych plików JavaScript.
• [Experimental] Duża biblioteka JavaScript. Duże biblioteki JavaScript mogą obniżać wydajność. Ten audyt sugeruje tańsze alternatywy dla popularnych, dużych bibliotek JavaScript, takich jak moment.js.

Problem z Chromium: 772558

performance.mark() zdarzeń w sekcji Czasy trwania

Sekcja Czasy w nagraniu z wynikiem zawiera teraz oznaczenia zdarzeń performance.mark().

Nowe filtry resource-type i url w panelu Sieć

Aby filtrować żądania sieci, użyj nowych słów kluczowych resource-type i url w panelu Sieć.

Na przykład za pomocą resource-type:image możesz skupić się na żądaniach sieci, które są obrazami.

Aby poznać więcej takich słów kluczowych jak resource-type i url, filtruj żądania według właściwości.

Problemy z Chromium: 1121141, 1104188

Aktualizacje widoku szczegółów ramki

Wyświetl punkt końcowy COEP i COOP reporting to

W sekcji Bezpieczeństwo i izolacja możesz teraz wyświetlić punkt końcowy zasad dotyczących osadzania z innych domen (COEP) i zasad dotyczących otwierającego z innej domeny (COOP)reporting to.

Interfejs API do raportowania definiuje nowy nagłówek HTTP, Report-To, który umożliwia deweloperom stron internetowych określenie punktów końcowych serwera, na które przeglądarka ma wysyłać ostrzeżenia i błędy.

Więcej informacji o włączaniu COEP i COOP oraz izolowaniu witryny z użyciem mechanizmu „cross-origin isolation” znajdziesz w tym artykule.

Problem z Chromium: 1051466

Wyświetlanie trybu COEP i COOP report-only

Narzędzia deweloperskie wyświetlają teraz etykietę report-only dla COEP i COOP w trybie report-only.

Obejrzyj ten film, aby dowiedzieć się, jak zapobiegać wyciekom informacji i włączyć w swojej witrynie tagi COOP i COEP.

Problem z Chromium: 1051466

wycofanie Settings z menu Więcej narzędzi;

Klawisz Settings w menu Więcej narzędzi zostało wycofane. Zamiast tego otwórz Ustawienia na panelu głównym.

Problem z Chromium: 1121312

Funkcje eksperymentalne

Wyświetlanie i rozwiązywanie problemów z kontrastem kolorów w panelu Przegląd CSS

Panel Przegląd CSS zawiera teraz listę tekstów na stronie o niskim kontraście kolorów.

W tym przykładzie strona demonstracyjna ma problem z niskim kontrastem kolorów. Kliknij problem, aby wyświetlić listę elementów, które go dotyczą.

Kliknij element na liście, aby otworzyć go w panelu Elementy. DevTools zawiera automatyczne sugestie kolorów, które pomogą Ci poprawić tekst o niskim kontraście.

Problem z Chromium: 1120316

Dostosowywanie skrótów klawiszowych w Narzędziach deweloperskich

Teraz możesz dostosowywać skróty klawiszowe ulubionych poleceń w Narzędziach deweloperskich.

Kliknij Ustawienia > Skróty, najedź kursorem na polecenie i kliknij przycisk Edytuj (ikona pióra), aby dostosować skrót klawiszowy.

Aby zresetować wszystkie skróty, kliknij Przywróć domyślne skróty.

Problem z Chromium: 174309

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.

• Przesyłaj opinie 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.
• Dodaj komentarze do filmów w YouTube z serii „Co nowego w Narzędziach deweloperskich” lub Wskazówki dotyczące Narzędzi deweloperskich.

Co nowego w Narzędziach deweloperskich

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