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

Funkcja podglądu: nowy panel Przegląd CSS

Użyj nowego panelu Przegląd CSS, aby zidentyfikować potencjalne ulepszenia CSS na swojej stronie. Otwórz panel Przegląd CSS, a potem kliknij Przechwytuj przegląd, aby wygenerować raport o CSS strony.

Możesz przejść do bardziej szczegółowego widoku tych informacji. 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 podglądu. Nasz zespół nadal nad nim pracuje i czekamy na Twoją opinię na temat dalszych ulepszeń.

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 o długości przywracane są opcje Kopiuj CSS i Edytuj jako tekst. Te funkcje nie działają w ostatniej wersji.

Możesz też przeciągać jednostki, aby zmieniać ich wartość i zmieniać ich typ w menu. Funkcja tworzenia dodatków nie powinna wpływać na główną funkcję edycji jako tekstu.

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

Aby ją wyłączyć, kliknij 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ę multimediów CSS „prefers-kontrast”

Funkcja multimediów preferuje kontrast służy do wykrywania, czy użytkownik chce zwiększyć czy zmniejszyć kontrast na stronie.

Otwórz menu poleceń, uruchom polecenie Pokaż renderowanie i skonfiguruj menu Emuluj funkcję multimediów CSS prefers-kontrast.

Problem z Chromium: 1139777

Emuluj funkcję automatycznego ciemnego motywu Chrome

Za pomocą Narzędzi deweloperskich możesz emulować automatyczny ciemny motyw, aby łatwo sprawdzać, jak wygląda Twoja strona po włączeniu automatycznego ciemnego motywu w Chrome.

W Chrome 96 wprowadzamy wersję próbną origin Automatyczny ciemny motyw na Androida. Dzięki tej funkcji przeglądarka stosuje automatycznie generowany ciemny motyw do witryn o jasnej tematyce, jeśli użytkownik ma włączone ciemne motywy w systemie operacyjnym.

Otwórz menu poleceń, uruchom polecenie Pokaż renderowanie i otwórz menu Emuluj automatyczny tryb ciemny.

Problem z Chromium: 1243309

Skopiuj deklaracje jako JavaScript w panelu Style

W menu kontekstowym dodaliśmy dwie nowe opcje, które ułatwiają kopiowanie reguł CSS jako właściwości JavaScript. Te skróty są przydatne zwłaszcza dla programistów pracujących z bibliotekami CSS-in-JS.

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

Na przykład z poniższego przykładu skopiujesz tekst paddingLeft: '1.5rem' do schowka.

Problem w Chromium: 1253635

Nowa karta Ładunek w panelu Sieć

Użyj nowej karty Ładunek w panelu Sieć podczas sprawdzania żądania sieciowego z ładunkiem. Wcześniej informacje dotyczące ł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 wyświetlają się teraz 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 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 błędów CORS w konsoli może pomóc w usunięciu tego bałaganu.

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 odpowiedni podgląd i są szybko oceniane w konsoli. Wcześniej obiekty Intl nie były oceniane od razu.

Problem w Chromium: 1073804

Spójne asynchroniczne zrzuty stosu

Konsola zgłasza teraz zrzuty stosu funkcji async dla funkcji async, aby były spójne z innymi zadaniami asynchronicznymi i widoczne w stosunku wywołań.

Problem w Chromium: 1254259

Zachowaj pasek boczny konsoli

Pasek boczny konsoli pozostanie niezmieniony. W Chrome 94 ogłosiliśmy nadchodzące wycofanie paska bocznego konsoli, aby poprosić deweloperów o opinie i wątpliwości.

Otrzymaliśmy już wystarczająco dużo opinii związanych z powiadomieniem o wycofaniu funkcji. Pracujemy nad ulepszeniem paska bocznego, zamiast go usuwać.

Problemy z Chromium: 1232937, 1255586

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

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

[Funkcja eksperymentalna] Panel Nowy interfejs API do raportowania w panelu aplikacji

Interfejs Reporting API ma pomagać w monitorowaniu naruszeń zabezpieczeń strony, wycofanych wywołań interfejsu API i innych kwestii.

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

Sekcja Punkty końcowe jest nadal w fazie rozwoju (nie ma na razie żadnych punktów końcowych raportowania).

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

Problem w Chromium: 1205856

Pobierz kanały podglądu

Zastanów się, czy nie ustawić Chrome w wersji Canary, Dev lub beta jako domyślnej przeglądarki do programowania. Te kanały wersji testowej dają dostęp do najnowszych funkcji Narzędzi deweloperskich, umożliwiają testowanie najnowocześniejszych interfejsów API platformy internetowej i wykrywanie problemów w witrynie, zanim użytkownicy ją zobaczą.

Kontakt z zespołem ds. Narzędzi deweloperskich w Chrome

Skorzystaj z poniższych opcji, aby porozmawiać o nowych funkcjach i zmianach w poście lub o innych kwestiach związanych z Narzędziami deweloperskimi.

• Prześlij nam sugestię lub opinię na crbug.com.
• Aby zgłosić problem z Narzędziami deweloperskimi, kliknij Więcej opcji   > Pomoc > Zgłoś problemy z Narzędziami deweloperskimi w Narzędziach deweloperskich.
• Opublikuj tweeta na stronie @ChromeDevTools.
• Napisz komentarz w filmach w YouTube o nowościach w Narzędziach deweloperskich lub o filmach w YouTube ze wskazówkami dotyczącymi 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.