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

Jecelyn Yeen

Funkcja podglądu: nowy panel Przegląd CSS

Użyj nowego panelu Przegląd CSS, aby określić, co można potencjalnie ulepszyć w przypadku CSS na stronie. Otwórz panel Przegląd CSS, a potem kliknij Poznaj przegląd, aby wygenerować raport dotyczący CSS strony.

Możesz też uzyskać bardziej szczegółowe informacje. Na przykład kliknij kolor w sekcji Kolory, aby wyświetlić listę elementów, które mają ten sam kolor. Kliknij element, aby otworzyć go w panelu Elementy.

Panel Przegląd CSS to funkcja w wersji testowej. Nasz zespół nadal aktywnie nad nią pracuje. Czekamy na Wasze opinie, które pomogą nam ją ulepszyć.

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

Problem w Chromium: 1254557

Przywróciliśmy i ulepszyliśmy funkcję edytowania i kopiowania długości CSS

Przywracamy funkcje kopiowania kodu CSS i edytowania jako tekstu w przypadku właściwości CSS o określonej długości. W ostatniej wersji te funkcje nie działają prawidłowo.

Możesz też przeciągnąć, aby dostosować wartość jednostki, i zaktualizować typ jednostki w menu. Ta funkcja tworzenia długości dodatku nie powinna mieć wpływu na podstawową funkcję edycji tekstu.

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

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

Problemy z Chromium: 1259088, 1172993

Aktualizacje karty renderowania

Emulowanie funkcji mediów CSS prefers-contrast

Funkcja multimedialna 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 potem otwórz menu Emuluj funkcję multimedialną CSS prefers-contrast.

Problem w Chromium: 1139777

Emulowanie funkcji automatycznego ciemnego motywu w Chrome

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

W Chrome 96 wprowadzamy wersję próbną origin automatycznego ciemnego motywu na Androidzie. Dzięki tej funkcji przeglądarka stosuje automatycznie generowany ciemny motyw do witryn z jasnym motywem, gdy użytkownik włączył ciemne motywy w systemie operacyjnym.

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

Problem w Chromium: 1243309

Kopiowanie deklaracji jako JavaScriptu w okienku Style

Do menu kontekstowego dodaliśmy 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 pracują z bibliotekami 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 poniższy kod skopiuje do schowka wartość paddingLeft: '1.5rem'.

Problem w Chromium: 1253635

Nowa karta Payload w panelu Sieć

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

Problem z Chromium: 1214030

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

W panelu Właściwości są teraz wyświetlane tylko odpowiednie właściwości, a nie wszystkie 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.

Problem w Chromium: 1226262

Aktualizacje konsoli

Możliwość 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 w zmniejszeniu bałaganu.

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

Problem w Chromium: 1251176

Prawidłowy podgląd i ocena obiektów Intl w konsoli

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

Problem z Chromium: 1073804

Spójne asynchroniczne zrzuty stosu

Konsola raportuje teraz async ślady stosu dla async funkcji, aby zachować spójność z innymi zadaniami asynchronicznymi i z tym, co jest wyświetlane w oknie Stos wywołań.

Problem w Chromium: 1254259

Zachowaj pasek boczny konsoli

Pasek boczny konsoli pozostanie w niej na stałe. W Chrome 94 ogłosiliśmy nadchodzące wycofanie paska bocznego Konsoli i poprosiliśmy deweloperów o przesłanie opinii i uwag.

Otrzymaliśmy wystarczającą liczbę opinii na temat powiadomienia o wycofaniu i zamiast usuwać pasek boczny, będziemy pracować nad jego ulepszeniem.

Problemy z Chromium: 1232937, 1255586

Wycofany panel pamięci podręcznej aplikacji w panelu Aplikacja

Panel Pamięć podręczna aplikacji w panelu Aplikacja został usunięty, ponieważ AppCache nie jest już obsługiwany w Chrome i innych przeglądarkach opartych na Chromium.

Problem z Chromium: 1084190

[Eksperymentalnie] 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.

Po włączeniu tego eksperymentu możesz wyświetlać stan raportów w nowym panelu Reporting API w panelu Aplikacja.

Pamiętaj, że sekcja Punkty końcowe jest obecnie w trakcie opracowywania (na razie nie wyświetla żadnych punktów końcowych raportowania).

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

Problem w Chromium: 1205856

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.

Kontakt 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 more_vert Więcej opcji > Pomoc > Zgłoś problem z Narzędziami deweloperskimi w Narzędziach deweloperskich.
• Wyślij tweeta do @ChromeDevTools.
• Dodawaj komentarze do filmów na YouTube z serii „Co nowego w Narzędziach deweloperskich” lub filmów na YouTube 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.