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

Jecelyn Yeen

Nowe narzędzia do debugowania siatki CSS

Narzędzia deweloperskie lepiej obsługują teraz debugowanie siatki CSS.

Debugowanie siatki CSS

Gdy do elementu HTML na stronie zastosowano atrybut display: grid lub display: inline-grid, w panelu Elementy obok niego zobaczysz plakietkę grid. Kliknij plakietkę, aby włączyć lub wyłączyć wyświetlanie siatki na stronie.

W nowym panelu Układ znajduje się sekcja Siatka, w której znajdziesz wiele opcji wyświetlania siatek.

Więcej informacji znajdziesz w dokumentacji.

Problem w Chromium: 1047356

Nowa karta WebAuthn

Możesz teraz emulować uwierzytelnianie i debugować interfejs Web Authentication API za pomocą nowej karty WebAuthn.

Wybierz Więcej opcji > Więcej narzędzi > WebAuthn, aby otworzyć kartę WebAuthn.

Karta WebAuthn

Przed wprowadzeniem nowej karty WebAuthn Chrome nie obsługiwał natywnego debugowania WebAuthn. Deweloperzy potrzebowali fizycznych urządzeń uwierzytelniających, aby przetestować swoją aplikację internetową za pomocą interfejsu Web Authentication API.

Dzięki nowej karcie WebAuthn deweloperzy stron internetowych mogą teraz emulować te uwierzytelnianie, dostosowywać ich możliwości i sprawdzać ich stany bez konieczności używania fizycznych uwierzytelniaczy. Ułatwia to debugowanie.

Więcej informacji o funkcji WebAuthn znajdziesz w naszej dokumentacji.

Problem w 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ć jednocześnie dowolne 2 narzędzia.

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

Przenieś na koniec

Podobnie możesz przenieść dowolną kartę z dołu na górę, klikając ją prawym przyciskiem myszy i wybierając Przenieś na górę.

Przenieś na początek

Problem w Chromium: 1075732

Aktualizacje panelu Elementy

Wyświetlanie panelu bocznego Styl wynikowy w panelu Style

W panelu Style możesz teraz przełączać panel Pasek boczny stylów wynikowych.

Panel Pasek boczny stylów wynikowych w panelu Style jest domyślnie zwinięty. Kliknij przycisk, aby go przełączyć.

Panel boczny stylów wynikowych

Problem w Chromium: 1073899

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

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

Dzięki tej nowej funkcji grupowania łatwiej będzie poruszać się po panelu Wynikowy (mniej przewijania) i wybiórczo skupiać się na zestawie powiązanych właściwości w celu sprawdzenia CSS.

W panelu Elementy wybierz element. Zaznacz pole wyboru Group (Grupuj), aby zgrupować lub rozgrupować właściwości CSS.

Grupowanie właściwości CSS

Problemy z Chromium: 1096230, 1084673, 1106251

Lighthouse 6.4 w panelu Lighthouse

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

Latarnia morska

Nowe audyty w Lighthouse 6.4:

  • Wstępne wczytywanie czcionek Sprawdza, czy wszystkie czcionki, które używająfont-display: optional, zostały wstępnie wczytane.
  • Prawidłowe mapy źródeł Sprawdza, czy strona ma prawidłowe mapy źródeł dla własnych dużych plików JavaScript.
  • [Eksperymentalne] 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 w Chromium: 772558

performance.mark() zdarzenia w sekcji Czasy,

W sekcji Czas nagrania wydajności są teraz oznaczane zdarzenia performance.mark().

Zdarzenia Performance.mark

Nowe filtry resource-type i url w panelu Sieć

Użyj nowych słów kluczowych resource-type i url w panelu Sieć, aby filtrować żądania sieciowe.

Na przykład użyj resource-type:image, aby skupić się na żądaniach sieciowych, które są obrazami.

filtr typu zasobu,

Więcej specjalnych słów kluczowych, takich jak resource-type i url, znajdziesz w artykule Filtrowanie próśb według właściwości.

Problemy z Chromium: 1121141, 1104188

Aktualizacje widoku szczegółów ramki

Wyświetlanie punktu końcowego COEP i COOP reporting to

W sekcji Bezpieczeństwo i izolacja możesz teraz wyświetlić punkt końcowy reporting tozasady dotyczące umieszczania z innej domeny (COEP) i zasady dotyczące otwierającego z innej domeny (COOP).

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

wysyłanie raportów do punktu końcowego,

Więcej informacji o włączaniu COEP i COOP oraz o tym, jak sprawić, by Twoja witryna była „izolowana od innych domen”, znajdziesz w tym artykule.

Problem w Chromium: 1051466

Tryb wyświetlania COEP i COOPreport-only

Narzędzia deweloperskie wyświetlają teraz etykietę report-only w przypadku nagłówków COEP i COOP ustawionych w trybie report-only.

etykieta tylko do raportowania,

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

Problem w Chromium: 1051466

Wycofanie Settings z menu Więcej narzędzi

Settings w menu Więcej narzędzi zostało wycofane. Otwórz Ustawienia w panelu głównym.

Ustawienia w panelu głównym

Problem w Chromium: 1121312

Funkcje eksperymentalne

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

W panelu Przegląd CSS wyświetla się teraz lista 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, w przypadku których występuje.

Problemy z niskim kontrastem kolorów

Kliknij element na liście, aby otworzyć go w panelu Elementy. Narzędzia deweloperskie automatycznie sugerują kolor, aby pomóc Ci poprawić tekst o niskim kontraście.

Problem w Chromium: 1120316

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

Możesz teraz dostosowywać skróty klawiszowe do ulubionych poleceń w Narzędziach deweloperskich.

Kliknij Ustawienia > Skróty, najedź kursorem na polecenie i kliknij przycisk Edytuj (ikonę ołówka), aby dostosować skrót klawiszowy.

Dostosuj skróty klawiszowe

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

Problem z Chromium: 174309

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.

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

Co nowego w Narzędziach deweloperskich

Lista wszystkich tematów omówionych w serii Nowości w Narzędziach deweloperskich.