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 edycji i kopiowania długości w pliku CSS,

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

Możesz też przeciągać wartości jednostek i zmieniać typ jednostki za pomocą menu. Ta funkcja tworzenia dodatku nie powinna wpływać na główne edytowanie jako tekst.

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 multimedió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 automatyczny tryb ciemny w Chrome jest włączony.

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

Otwórz Menu poleceń, uruchom polecenie Pokaż renderowanie, a potem ustaw menu Symuluj 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 danych użyj nowej karty Ładunek danych 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

Ulepszono wyświetlanie właściwości w panelu Właściwości.

W 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 usługi.

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 zaprzestanie używania 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 na razie żadnych 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 przeglądarki Chrome w wersji Canary, Dev lub Beta. 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ędziech deweloperskich.