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

Nowe narzędzia do debugowania siatki CSS

Narzędzia deweloperskie zapewniają teraz lepszą obsługę debugowania siatki CSS.

Jeśli do elementu HTML na stronie jest stosowany atrybut display: grid lub display: inline-grid, obok niego w panelu Elementy będzie widoczna plakietka grid. Kliknij plakietkę, aby włączyć lub wyłączyć wyświetlanie nakładki z siatką na stronie.

W nowym panelu Układ znajduje się sekcja Siatka oferująca szereg opcji wyświetlania siatki.

Więcej informacji znajdziesz w dokumentacji.

Problem w Chromium: 1047356

Nowa karta WebAuthn

Możesz teraz emulować uwierzytelnianie i debugować interfejs Web Authentication API przy użyciu nowego interfejsu WebAuthn .

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

Przed wprowadzeniem nowej karty WebAuthn w Chrome nie było obsługiwane bezpośrednio debugowanie WebAuthn. Aby przetestować swoje aplikacje internetowe z użyciem interfejsu Web Authentication API, programiści potrzebowali fizycznych mechanizmów uwierzytelniających.

Na nowej karcie WebAuthn programiści stron internetowych mogą emulować te uwierzytelnianie, dostosowywać ich i kontrolować ich stany bez konieczności fizycznego uwierzytelniania. Dzięki temu debugowanie jest znacznie łatwiejsze.

Więcej informacji o funkcji WebAuthn znajdziesz w dokumentacji.

Problem w Chromium: 1034663

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

Narzędzia deweloperskie obsługują teraz przenoszenie narzędzi między górnym i dolnym panelem. Dzięki temu możesz: wyświetlanie dwóch narzędzi jednocześnie.

Jeśli np. chcesz wyświetlić jednocześnie panele Elementy i Źródła, możesz odpowiednio kliknij panel Źródła i wybierz Przenieś na dół, by przenieść go na dół.

W podobny sposób możesz przenieść dowolną dolną kartę na górę. W tym celu kliknij kartę prawym przyciskiem myszy i wybierz Przenieś do do góry.

Problem z Chromium: 1075732

Aktualizacje panelu Elementy

Wyświetl panel Obliczony pasek boczny w panelu Style

W panelu Style możesz teraz przełączać panel Obliczony pasek boczny.

Panel Obliczony pasek boczny w panelu Style jest domyślnie zwinięty. Kliknij przycisk, aby: włącz lub wyłącz tę opcję.

Problem w Chromium: 1073899

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

Możesz teraz grupować właściwości CSS według kategorii w panelu Obliczone.

Ta nowa funkcja grupowania ułatwi poruszanie się po panelu Obliczone (mniej przewijanie) i selektywnie skupić się na zestawie powiązanych właściwości, aby przeprowadzić kontrolę CSS.

W panelu Elementy wybierz element. Przełącz pole wyboru Grupa, aby zgrupować lub rozgrupować CSS. usług.

Problemy z Chromium: 1096230, 1084673, 1106251

Lighthouse 6.4 w panelu Lighthouse

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

Nowe audyty w Lighthouse 6.4:

• Wstępne wczytywanie czcionek Sprawdza, czy wszystkie czcionki korzystające z pola font-display: optional zostały wstępnie wczytane.
• Prawidłowe mapy źródłowe. Sprawdza, czy strona ma prawidłowe mapy źródeł dla dużego, własnego kodu JavaScript.
• [Funkcja eksperymentalna] Duża biblioteka JavaScript. Duże biblioteki JavaScript mogą źle skuteczność reklam. Ten audyt wskazuje tańsze alternatywy dla popularnych, dużych bibliotek JavaScript, takich jak moment.js

Problem w Chromium: 772558

performance.mark() zdarzeń w sekcji Czasy

W sekcji Czasy w nagraniu skuteczności oznaczenie jest teraz performance.mark() zdarzeń.

Nowe filtry resource-type i url w panelu Sieć

Używaj nowych słów kluczowych resource-type i url w panelu Sieć do filtrowania żądań sieciowych.

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

Zapoznaj się z artykułem o filtrowaniu żądań według miejsc zakwaterowania, aby znaleźć więcej specjalnych słów kluczowych, takich jak resource-type. i url.

Problemy z Chromium: 1121141, 1104188

Aktualizacje widoku szczegółów ramki

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

Możesz teraz wyświetlić zasady dotyczące umieszczania treści z różnych domen (COEP) i zasady otwierającego treści z różnych domen (COOP)reporting to w sekcji Zabezpieczenia i Izolacja.

Reporting API definiuje nowy nagłówek HTTP Report-To, który daje programistom stron internetowych możliwość określ punkty końcowe serwera, do których przeglądarka ma wysyłać ostrzeżenia i błędy.

Przeczytaj ten artykuł, aby dowiedzieć się więcej o tym, jak włączyć modelowanie firm i coOP oraz jak utworzyć swoją stronę internetową. izolowany od zasobów z innych domen.

Problem z Chromium: 1051466

Wyświetl tryby COEP i COOP report-only

Narzędzia deweloperskie wyświetlają teraz etykietę report-only dla CoEP i COOP, które są ustawione w trybie report-only.

Obejrzyj ten film, aby dowiedzieć się, jak zapobiegać wyciekom informacji oraz włączyć współpracę w zakresie współpracy i kosztu własnego sprzedaży w do Twojej witryny.

Problem z Chromium: 1051466

Wycofanie narzędzia Settings z menu Więcej narzędzi

Funkcja Settings w menu Więcej narzędzi została wycofana. Na panelu głównym otwórz Ustawienia. .

Problem z 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 o niskim kontraście kolorów.

W tym przykładzie na stronie demonstracyjnej występuje problem z niskim kontrastem kolorów. Kliknij problem, wyświetl listę elementów, których dotyczy problem.

Kliknij element na liście, aby otworzyć go w panelu Elementy. Narzędzia deweloperskie udostępniają sugerowanie 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

W Narzędziach deweloperskich możesz teraz dostosować skróty klawiszowe do ulubionych poleceń.

Otwórz Ustawienia > Skróty, najeżdżanie kursorem na polecenie i kliknięcie przycisku Edytuj (ikona pióra). aby dostosować skrót klawiszowy.

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

Problem z Chromium: 174309

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.