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.

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

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

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

Przenieś na koniec

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.

Przenieś na początek

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

Obliczone okienko paska bocznego

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.

Grupowanie właściwości CSS

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.

Latarnia morska

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

Zdarzenia „Performance.mark”

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.

filtr typu zasobu

Zapoznaj się z artykułem o filtrowaniu żądań według miejsca 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.

raportowanie do punktu końcowego

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.

etykieta tylko do raportu

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

Ustawienia w 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

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.

Problemy z niskim kontrastem kolorów

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 po najechaniu kursorem na polecenie i kliknięciu przycisku Edytuj (ikona pióra). aby dostosować skrót klawiszowy.

Dostosuj skróty klawiszowe

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   Więcej > 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.