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

Jecelyn Yeen

Funkcja w wersji beta: nowy panel Przegląd CSS

Użyj nowego panelu Przegląd CSS, aby określić potencjalne ulepszenia CSS na stronie. Otwórz panel Przegląd CSS, a następnie kliknij Złóż przegląd, aby wygenerować raport dotyczący kodu CSS strony.

Możesz też przejść do bardziej szczegółowych informacji. Aby wyświetlić listę elementów, które mają ten sam kolor, kliknij ten kolor w sekcji Kolory. Kliknij element, aby otworzyć go w panelu Elementy.

Panel Przegląd CSS to funkcja w wersji testowej. Nasz zespół nadal nad tym pracuje i chcemy poznać Twoją opinię, abyśmy mogli wprowadzić dalsze ulepszenia.

Aby dowiedzieć się więcej o panelu Przegląd CSS, przeczytaj ten artykuł.

Panel Przegląd CSS

Problem z Chromium: 1254557

przywróciliśmy i ulepsiliśmy proces kopiowania i edytowania długości kodu CSS;

W przypadku właściwości CSS z długością przywrócono funkcje kopiuj CSS i edytuj jako tekst. Te funkcje nie działają w ostatniej wersji.

Możesz też przeciągać wartość jednostki, a w menu zaktualizować typ jednostki. Ta funkcja tworzenia dodatków nie powinna wpływać na główną funkcję edycji tekstu.

Jeśli zauważysz jakieś problemy, zgłoś je na stronie goo.gle/length-feedback.

Możesz go wyłączyć, zaznaczając pole wyboru Ustawienia > Eksperymenty > Włącz narzędzia do tworzenia długości CSS w panelu Style.

Problemy z Chromium: 1259088, 1172993

Aktualizacje karty Renderowanie

Emuluj funkcję mediów CSS „prefers-contrast”

Emuluj funkcję mediów CSS „prefers-contrast”

Funkcja mediów prefers-contrast służy do wykrywania, czy użytkownik poprosił o większą lub mniejszą kontrastowość strony.

Otwórz menu poleceń, uruchom polecenie Pokaż renderowanie, a następnie ustaw menu Emuluj funkcję multimedialną CSS „prefers-contrast”.

Problem z Chromium: 1139777

Emulowanie funkcji automatycznego ciemnego motywu w Chrome

Używaj Narzędzi deweloperskich, aby emulować automatyczny tryb ciemny i łatwo sprawdzać, jak wygląda Twoja strona, gdy włączony jest automatyczny tryb ciemny w Chrome.

Chrome 96 wprowadza testowanie origin automatycznego ciemnego motywu na Androidzie. Dzięki tej funkcji przeglądarka stosuje automatycznie wygenerowany ciemny motyw do stron z jasnym motywem, gdy użytkownik włączy ciemny motyw w systemie operacyjnym.

Otwórz Menu poleceń, uruchom polecenie Pokaż renderowanie, a następnie ustaw menu Naśladuj automatyczny tryb ciemny.

Emulowanie funkcji automatycznego ciemnego motywu w Chrome

Problem z Chromium: 1243309

Kopiowanie deklaracji jako kodu JavaScript w panelu Style

Do menu kontekstowego dodano 2 nowe opcje, które umożliwiają łatwe kopiowanie reguł CSS jako właściwości JavaScript. Te opcje skrótów są przydatne zwłaszcza dla deweloperów, którzy korzystają z bibliotek CSS-in-JS.

W panelu Style kliknij prawym przyciskiem myszy regułę CSS. Możesz kliknąć Kopiuj deklarację jako JS, aby skopiować pojedynczą regułę, lub Kopiuj wszystkie deklaracje jako JS, aby skopiować wszystkie reguły.

Na przykład przykład poniżej skopiuje paddingLeft: '1.5rem' do schowka.

Kopiowanie deklaracji jako kodu JavaScript

Problem z Chromium: 1253635

Nowa karta Payload w panelu Sieć

Podczas sprawdzania żądania sieci z ładunkiem użyteczności używaj nowej karty Ładunek użyteczności w panelu Sieć. Wcześniej informacje o ładunku były dostępne na karcie Nagłówki.

Karta Payload w panelu Sieć

Problem z Chromium: 1214030

Poprawiliśmy wyświetlanie właściwości w panelu Właściwości.

Na panelu Właściwości wyświetlane są teraz tylko odpowiednie właściwości zamiast wszystkich właściwości instancji. Prototypy i metody DOM zostały usunięte.

Dzięki ulepszeniom w panelu Właściwości w Chrome 95 możesz teraz łatwiej znajdować odpowiednie właściwości.

Wyświetlanie właściwości w panelu Właściwości

Problem z Chromium: 1226262

Aktualizacje konsoli

Opcja ukrywania błędów CORS w konsoli

Błędy CORS możesz ukryć w Konsoli. Błędy CORS są teraz zgłaszane na karcie Problemy, więc ukrycie ich w Konsoli może pomóc zmniejszyć ilość błędów.

W konsoli kliknij ikonę Ustawienia i odznacz pole wyboru Pokaż błędy CORS w konsoli.

opcja ukrywania błędów CORS w konsoli;

Problem z Chromium: 1251176

Właściwe wyświetlanie i ocenianie obiektów Intl w Konsoli

Obiekty Intl mają teraz prawidłowy podgląd i są oceniane w Konsoli. Wcześniej obiekty Intl nie były oceniane.

Obiekty Intl w konsoli

Problem z Chromium: 1073804

spójne asynchroniczne zrzuty stosu,

Konsola raportuje teraz ścieżki sterowania async w funkcjach async, aby były spójne z innymi zadaniami asynchronicznymi i z informacjami wyświetlanymi w ścieżce wywołań.

asynchroniczne zrzuty stosu

Problem z Chromium: 1254259

Zachowanie paska bocznego konsoli

Pasek boczny konsoli jest już na stałe. W Chrome 94 ogłosiliśmy planowane wycofanie paska bocznego w Konsoli i poprosiliśmy deweloperów o opinie i uwagi.

Otrzymaliśmy już wystarczającą liczbę opinii na temat powiadomienia o wycofaniu i zamiast usuwać pasek boczny, będziemy go ulepszać.

Pasek boczny konsoli

Problemy z Chromium: 1232937, 1255586

Wycofany panel Pamięć podręczna aplikacji w panelu Aplikacja

Panel Pamięć podręczna aplikacji w panelu Aplikacja został usunięty, ponieważ obsługa AppCache została wycofana z Chrome i innych przeglądarek opartych na Chromium.

Problem z Chromium: 1084190

[Experimental] Nowy panel interfejsu Reporting API w panelu Aplikacja

Interfejs Reporting API pomaga monitorować naruszenia bezpieczeństwa na stronie, przestarzałe wywołania interfejsu API i inne kwestie.

Dzięki temu eksperymentowi możesz teraz sprawdzać stan raportów w nowej karcie Reporting API w panelu Aplikacja.

Sekcja Punkty końcowe jest obecnie nadal aktywnie rozwijana (nie wyświetla obecnie punktów końcowych raportowania).

Więcej informacji o interfejsie Reporting API znajdziesz w tym artykule.

Panel interfejsu API do raportowania w panelu Aplikacja

Problem z Chromium: 1205856

Pobieranie kanałów podglądu

Rozważ użycie jako domyślnej przeglądarki deweloperskiej wersji Canary, Dev lub Beta przeglądarki Chrome. Te kanały wersji wstępnej zapewniają dostęp do najnowszych funkcji DevTools, umożliwiają testowanie najnowocześniejszych interfejsów API platformy internetowej i pomagają znaleźć problemy w witrynie, zanim zrobią to użytkownicy.

Kontakt z zespołem Narzędzi deweloperskich w Chrome

Aby omówić nowe funkcje, aktualizacje lub inne kwestie związane z Narzędziami deweloperskimi, skorzystaj z tych opcji.

Co nowego w Narzędziach deweloperskich

Lista wszystkich tematów omawianych w cyklu artykułów Co nowego w Narzędziach deweloperskich.