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

Jecelyn Yeen

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 zastosowano atrybut display: grid lub display: inline-grid, w panelu Elementy zobaczysz obok niego plakietkę grid. Kliknij plakietkę, aby włączyć wyświetlanie nakładki siatki na stronie.

Nowy panel Układ zawiera sekcję Siatka z różnymi opcjami wyświetlania siatki.

Więcej informacji znajdziesz w dokumentacji.

Problem z Chromium: 1047356

Nowa karta WebAuthn

Na nowej karcie WebAuthn możesz teraz emulować uwierzytelnianie i debugować interfejs Web Authentication API.

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 natywnej obsługi debugowania WebAuthn. Programiści potrzebowali fizycznych uwierzytelniania, aby przetestować swoje aplikacje internetowe z użyciem interfejsu Web Authentication API.

Dzięki nowej karcie WebAuthn programiści mogą teraz emulować te uwierzytelnianie, dostosowywać ich możliwości i sprawdzać stan bez konieczności korzystania z fizycznych uwierzytelniania. Znacznie ułatwia to debugowanie.

Więcej informacji o funkcji WebAuthn znajdziesz w dokumentacji.

Problem z Chromium: 1034663

Przenieś narzędzia między górnym a dolnym panelem

Narzędzia deweloperskie obsługują teraz przenoszenie narzędzi między górnym i dolnym panelem. Dzięki temu możesz wyświetlać dowolne 2 narzędzia jednocześnie.

Jeśli na przykład chcesz jednocześnie wyświetlić panel Elementy i Źródła, możesz kliknąć prawym przyciskiem myszy panel Źródła i wybrać Przenieś na dół, by przenieść go na dół.

Przenieś na dół

Możesz też przenieść dowolną dolną kartę na górę. Wystarczy, że klikniesz ją prawym przyciskiem myszy i wybierzesz Przenieś na początek.

Przenieś na górę

Problem z Chromium: 1075732

Aktualizacje panelu Elementy

Wyświetlanie panelu Obliczonego paska bocznego w panelu Style

Możesz teraz przełączać panel Wynikowy pasek boczny w panelu Style.

Panel Wygenerowany pasek boczny w panelu Style jest domyślnie zwinięty. Kliknij przycisk, aby go włączyć.

Panel obliczonego paska bocznego

Problem z Chromium: 1073899

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

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

Ta nowa funkcja grupowania ułatwia poruszanie się po panelu Przetworzone (bez przewijania) i selektywne skupienie się na zestawie powiązanych właściwości na potrzeby inspekcji CSS.

W panelu Elementy wybierz element. Zaznacz pole wyboru Grupa, 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 korzysta teraz z Lighthouse 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 korzystające z font-display: optional zostały wstępnie wczytane.
  • Prawidłowe mapy źródeł. Kontroluje, czy strona ma prawidłowe mapy źródeł dla dużych własnych skryptów JavaScript.
  • [Funkcja eksperymentalna] Duża biblioteka JavaScript. Duże biblioteki JavaScript mogą obniżać wydajność. Ten audyt wskazuje tańsze alternatywy dla popularnych, dużych bibliotek JavaScript, takich jak moment.js.

Problem z Chromium: 772558

Zdarzenia performance.mark() w sekcji Czasy

Zdarzenia (performance.mark()) są teraz oznaczone w sekcji Czas nagrania z występu.

Zdarzenia Performance.mark

Nowe filtry resource-type i url w panelu Sieć

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

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

filtr typu zasobu

Aby odkryć więcej specjalnych słów kluczowych, np. resource-type czy url, sprawdź filtrowanie żądań według usług.

Problemy z Chromium: 1121141, 1104188

Zmiany w widoku szczegółów ramki

Wyświetl punkty końcowe COEP i COOP reporting to

W sekcji Zabezpieczenia i izolacja możesz teraz wyświetlić punkty końcowe zasad dotyczących umieszczania elementów z innych domen (COEP) oraz zasad otwierających treści z innych źródeł (COOP)reporting to.

Interfejs API do raportowania definiuje nowy nagłówek HTTP Report-To, który umożliwia programistom stron internetowych określanie punktów końcowych 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 włączaniu COEP i COOP oraz o tym, jak zapewnić izolację witryny od zasobów z innych domen.

Problem z Chromium: 1051466

Wyświetl tryb COEP i COOP report-only

Narzędzia deweloperskie wyświetlają teraz etykietę report-only w przypadku COEP i COOP ustawionego na tryb report-only.

etykieta tylko do raportowania

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

Problem z Chromium: 1051466

Wycofanie funkcji Settings z menu Więcej narzędzi

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

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 usług porównywania cen

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

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

Problemy z niskim kontrastem kolorów

Kliknij element na liście, aby otworzyć go w panelu Elementy. Narzędzia deweloperskie udostępniają automatyczne sugestie kolorów, które pomagają rozwiązać problemy z tekstem o niskim kontraście.

Problem z Chromium: 1120316

Dostosuj skróty klawiszowe w Narzędziach deweloperskich

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

Kliknij Ustawienia > Skróty, najedź kursorem na polecenie i kliknij przycisk Edytuj (ikonę pióra), 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

Jako domyślnej przeglądarki dla programistów możesz używać Chrome Canary, Dev lub Beta. Te kanały podglądu dają dostęp do najnowszych funkcji Narzędzi deweloperskich, umożliwiają testowanie najnowocześniejszych interfejsów API platform internetowych oraz wykrywanie problemów w witrynie, zanim zdołają zrobić użytkownicy.

Kontakt z zespołem Narzędzi deweloperskich w Chrome

Użyj poniższych opcji, aby omówić nowe funkcje i zmiany w poście lub wszelkie inne kwestie związane z Narzędziami dla deweloperów.

  • Prześlij nam sugestię lub opinię na stronie crbug.com.
  • Aby zgłosić problem z Narzędziami deweloperskimi, kliknij Więcej opcji   Więcej   > Pomoc > Zgłoś problemy z Narzędziami deweloperskimi.
  • zatweetuj na @ChromeDevTools.
  • Napisz komentarz o nowościach w filmach w YouTube dostępnych w Narzędziach deweloperskich lub z poradami dotyczącymi narzędzi dla deweloperów w filmach w YouTube.

Co nowego w Narzędziach deweloperskich

Lista wszystkich omówionych funkcji w serii Co nowego w Narzędziach deweloperskich.

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

101 Chrome

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

Subskrypcja Chrome 82 została anulowana.

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