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 Utwórz 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 nad nią pracuje. Czekamy na Twoje opinie, które pomogą nam ją ulepszyć.

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

Panel Przegląd CSS

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 multimedialnej CSS prefers-contrast

Emulowanie funkcji multimedialnej 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 z 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.

Emulowanie funkcji automatycznego ciemnego motywu w Chrome

Problem w Chromium: 1243309

Kopiowanie deklaracji jako JavaScriptu w panelu 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 programistó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'.

Kopiuj deklarację jako JavaScript

Problem w Chromium: 1253635

Nowa karta Payload w panelu Sieć

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

Karta Payload w panelu Sieć

Problem w 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.

Wyświetlanie właściwości w panelu 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.

Możliwość ukrywania błędów 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.

Obiekty Intl w konsoli

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

asynchroniczne zrzuty stosu,

Problem w Chromium: 1254259

Zachowaj pasek boczny konsoli

Pasek boczny konsoli pozostanie z nami 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.

Pasek boczny konsoli

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 ani w innych przeglądarkach opartych na Chromium.

Problem w Chromium: 1084190

[Eksperymentalnie] Nowy panel Reporting API w panelu Application

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

Gdy to eksperyment jest włączony, 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 fazie rozwoju (na razie nie wyświetla punktów końcowych raportowania).

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

Panel interfejsu Reporting API w panelu aplikacji

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.

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.

Co nowego w Narzędziach deweloperskich

Lista wszystkich tematów omówionych w serii Nowości w Narzędziach deweloperskich.