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

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 przejść do bardziej szczegółowego widoku tych 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 usług porównywania cen, przeczytaj ten artykuł.

Problem w Chromium: 1254557

Przywrócony i ulepszony interfejs edycji i kopiowania długości 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ść jednostki, a w menu zaktualizować typ jednostki. Ta funkcja tworzenia treści o długości dodatku nie powinna wpływać na główną funkcję edycji 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”

Funkcja multimediów prefers-contrast służy do wykrywania, czy użytkownik zażądał większego lub mniejszego kontrastu na stronie.

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.

W Chrome 96 wprowadzamy wersję próbną origin Automatyczny ciemny motyw na Androida. 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.

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.

Problem z Chromium: 1253635

Nowa karta Payload w panelu Sieć

Podczas sprawdzania żądania sieci z ładunkiem użytecznym użyj nowej karty Ładunek użyteczny w panelu Sieć. Wcześniej informacje dotyczące ładunku były dostępne na karcie Nagłówki.

Problem z Chromium: 1214030

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

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.

Problem z Chromium: 1251176

Podgląd i ocena odpowiednich 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.

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

Problem z Chromium: 1254259

Zachowaj pasek boczny 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ąco dużo opinii związanych z powiadomieniem o wycofaniu funkcji. Będziemy pracować nad ulepszeniem paska bocznego, zamiast go usuwać.

Problemy z Chromium: 1232937, 1255586

Wycofana karta Pamięć podręczna aplikacji w panelu Aplikacja

Panel Pamięć podręczna aplikacji w panelu aplikacji zostanie usunięty, ponieważ w Chrome i innych przeglądarkach opartych na Chromium usunięto obsługę AppCache.

Problem z Chromium: 1084190

[Experimental] Nowy panel interfejsu Reporting API w panelu Aplikacja

Interfejs Reporting API pomaga monitorować naruszenia bezpieczeństwa na stronie, wycofane 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.

Problem z Chromium: 1205856

Pobieranie kanałów podglądu

Rozważ użycie przeglądarki Chrome Canary, Dev lub Beta jako domyślnej przeglądarki deweloperskiej. 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 ds. Narzędzi deweloperskich w Chrome

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

• Prześlij nam swoje opinie i prośby o dodanie funkcji na stronie crbug.com.
• Aby zgłosić problem z Narzędziami deweloperskimi, kliknij more_vert Więcej opcji > Pomoc > Zgłoś problem z Narzędziami deweloperskimi w Narzędziach deweloperskich.
• Wyślij tweeta do @ChromeDevTools.
• Dodaj komentarze do filmów w YouTube z serii „Co nowego w Narzędziach deweloperskich” lub Wskazówki dotyczące 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.