Nowe narzędzia do debugowania siatki CSS
Narzędzia deweloperskie lepiej obsługują teraz 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.
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 na przykład chcesz jednocześnie wyświetlić panele Elementy i Źródła, możesz kliknąć prawym przyciskiem myszy panel Źródła i wybrać Przenieś na dół, aby przenieść go na dół.
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ę.
Problem w Chromium: 1075732
Zmiany w 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ć.
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 do sprawdzania CSS.
W panelu Elementy wybierz element. Zaznacz pole wyboru Grupuj, aby zgrupować lub rozgrupować właściwości CSS.
Problemy z Chromium: 1096230, 1084673, 1106251
Lighthouse 6.4 w panelu Lighthouse
Panel Lighthouse korzysta teraz z Lighthouse w wersji 6.4. Pełną listę zmian znajdziesz w informacjach o wersji.
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 Czas
W sekcji Czas nagrania wydajności są teraz oznaczane 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.
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 umieszczającego 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.
Więcej informacji o tym, jak włączyć COEP i COOP oraz sprawić, aby Twoja witryna była „izolowana od innych domen”, znajdziesz w tym artykule.
Problem w Chromium: 1051466
Wyświetlanie trybu COEP i COOP report-only
Narzędzia deweloperskie wyświetlają teraz etykietę report-only w przypadku nagłówków COEP i COOP ustawionych w trybie report-only.
Obejrzyj ten film, aby dowiedzieć się, jak zapobiegać wyciekom informacji i włączyć COOP oraz COEP w swojej witrynie.
Problem w Chromium: 1051466
Usunięcie Settings z menu Więcej narzędzi
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
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.
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 z 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.
Aby zresetować wszystkie skróty, kliknij Przywróć domyślne skróty.
Problem w 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.
Skontaktuj się 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.
- Prześlij nam opinię i prośby o dodanie funkcji na stronie crbug.com.
- Zgłoś problem z Narzędziami deweloperskimi, klikając Więcej opcji > Pomoc > Zgłoś problem z Narzędziami deweloperskimi w Narzędziach deweloperskich.
- Wyślij tweeta do @ChromeDevTools.
- Zostawiaj komentarze pod filmami na YouTube z serii „Co nowego w Narzędziach deweloperskich” lub filmami z serii „Wskazówki dotyczące Narzędzi deweloperskich”.
Co nowego w Narzędziach deweloperskich
Lista wszystkich tematów omówionych w serii Nowości w Narzędziach deweloperskich.