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

Jecelyn Yeen

Edytowanie stylów w przypadku frameworków CSS-in-JS

Panel Style lepiej obsługuje teraz edytowanie stylów utworzonych za pomocą interfejsów API CSS Object Model (CSSOM). Wiele platform i bibliotek CSS-in-JS używa pod spodem interfejsów CSSOM API do tworzenia stylów.

Możesz teraz też edytować style dodane w JavaScript za pomocą arkuszy stylów z możliwością tworzenia. Konstruowalne arkusze stylów to nowy sposób tworzenia i dystrybuowania stylów wielokrotnego użytku podczas korzystania z Shadow DOM.

Na przykład style h1 dodane za pomocą CSSStyleSheet (interfejsy API CSSOM) nie były wcześniej edytowalne. W panelu Style można teraz edytować:

Problem z Chromium #946975

Lighthouse 6 w panelu Lighthouse

Panel Lighthouse korzysta teraz z Lighthouse 6. Więcej informacji o najważniejszych zmianach znajdziesz w artykule Nowości w Lighthouse 6.0, a pełną listę zmian w informacjach o wersji 6.0.0.

W Lighthouse 6.0 wprowadziliśmy 3 nowe wskaźniki: największe wyrenderowanie treści (LCP), skumulowane przesunięcie układu (CLS) i całkowity czas blokowania (TBT). LCP i CLS to 2 nowe podstawowe wskaźniki internetowe Google, a TBT to pomiar laboratoryjny, który jest przybliżeniem innego podstawowego wskaźnika internetowego, czyli opóźnienia przy pierwszym działaniu.

Zmieniliśmy też wagę poszczególnych elementów wzoru na wynik wydajności, aby lepiej odzwierciedlał wrażenia użytkowników związane z wczytywaniem strony.

Problem z Chromium #772558

Wycofanie wskaźnika Pierwsze wyrenderowanie elementu znaczącego (FMP)

W Lighthouse w wersji 6.0 wycofaliśmy pierwsze wyrenderowanie elementu znaczącego (FMP). Został on też usunięty z panelu Skuteczność. Największe wyrenderowanie treści to zalecany zamiennik FMP. Wyjaśnienie, dlaczego ta metryka została wycofana, znajdziesz w artykule Pierwsze wyrenderowanie elementu znaczącego.

Problem z Chromium #1096008

Obsługa nowych funkcji JavaScriptu

Narzędzia deweloperskie lepiej obsługują teraz niektóre z najnowszych funkcji języka JavaScript:

• Autouzupełnianie składni opcjonalnego łańcucha – autouzupełnianie właściwości w konsoli obsługuje teraz składnię opcjonalnego łańcucha, np. name?. działa teraz oprócz name. i name[.
• Wyróżnianie składni pól prywatnych – pola klasy prywatnej są teraz prawidłowo wyróżniane składniowo i formatowane w panelu Źródła.
• Podświetlanie składni operatora łączenia w przypadku wartości null – Narzędzia deweloperskie prawidłowo formatują teraz operatora łączenia w przypadku wartości null w panelu Źródła.

Problemy z Chromium #1083214, #1073903, #1083797

Nowe ostrzeżenia dotyczące skrótów do aplikacji w panelu pliku manifestu

Skróty do aplikacji pomagają użytkownikom szybko rozpoczynać typowe lub zalecane zadania w aplikacji internetowej.

W panelu Manifest wyświetlają się teraz ostrzeżenia, jeśli:

• ikony skrótów do aplikacji są mniejsze niż 96 x 96 pikseli;
• ikony skrótów aplikacji i ikony manifestu nie są kwadratowe (zostaną zignorowane);

Problem z Chromium #955497

Zdarzenia respondWith service worker na karcie Czas

Karta Czas w panelu Sieć zawiera teraz zdarzenia respondWith service worker. respondWith to czas od momentu bezpośrednio przed uruchomieniem procedury obsługi zdarzenia fetch w usłudze Service Worker do momentu, w którym obietnica respondWith procedury obsługi fetch zostanie rozstrzygnięta.

Problem z Chromium 1066579

Spójne wyświetlanie panelu Obliczone

Panel Obliczone w panelu Elementy jest teraz wyświetlany w spójny sposób jako panel we wszystkich rozmiarach obszaru wyświetlania. Wcześniej panel Obliczone był scalany z panelem Style, gdy szerokość widocznego obszaru Narzędzi deweloperskich była niewielka.

Problem z Chromium #1073899

Przesunięcia kodu bajtowego w plikach WebAssembly

Narzędzia deweloperskie używają teraz przesunięć kodu bajtowego do wyświetlania numerów wierszy w dezasemblacji Wasm. Dzięki temu wyraźniej widać, że przeglądasz dane binarne, a także jest to bardziej spójne z tym, jak środowisko wykonawcze Wasm odwołuje się do lokalizacji.

Problem z Chromium #1071432

Kopiowanie i wycinanie wierszy w panelu Źródła

Jeśli w edytorze panelu Źródła wykonasz operację kopiowania lub wycinania bez zaznaczenia, narzędzia dla deweloperów skopiują lub wytną zawartość bieżącego wiersza. Na przykład w filmie poniżej kursor znajduje się na końcu wiersza 1. Po naciśnięciu skrótu klawiszowego wycinania cały wiersz zostanie skopiowany do schowka i usunięty.

Problem z Chromium #800028

Aktualizacje ustawień konsoli

Rozgrupowywanie tych samych komunikatów konsoli

Przełącznik Grupuj podobne w Ustawieniach konsoli dotyczy teraz zduplikowanych komunikatów. Wcześniej dotyczyło to tylko podobnych wiadomości.

Na przykład wcześniej Narzędzia deweloperskie nie rozgrupowywały wiadomościhello, nawet jeśli opcja Grupuj podobne była odznaczona. Teraz wiadomości hello są rozgrupowane:

Problem z Chromium #1082963

Utrzymywanie ustawień Tylko wybrany kontekst

Ustawienie Tylko wybrany kontekst w Ustawieniach konsoli jest teraz zachowywane. Wcześniej ustawienia były resetowane za każdym razem, gdy zamykałeś i ponownie otwierałeś Narzędzia deweloperskie. Ta zmiana sprawia, że działanie tego ustawienia jest spójne z innymi opcjami w Ustawieniach konsoli.

Problem w Chromium #1055875

Zmiany w panelu wyników

Informacje o pamięci podręcznej kompilacji JavaScriptu w panelu Wydajność

Informacje o pamięci podręcznej kompilacji JavaScriptu są teraz zawsze wyświetlane na karcie Podsumowanie w panelu Wydajność. Wcześniej Narzędzia deweloperskie nie wyświetlały niczego związanego z pamięcią podręczną kodu, jeśli nie była ona używana.

Problem z Chromium #912581

Wyrównanie czasu nawigacji w panelu Wydajność

Panel Wydajność wyświetlał czasy na linijkach na podstawie momentu rozpoczęcia nagrywania. W przypadku nagrań, w których użytkownik nawiguje, uległo to zmianie. Narzędzia deweloperskie wyświetlają teraz czasy linijki względem nawigacji.

Zaktualizowaliśmy też czasy zdarzeń DOMContentLoaded, Pierwsze wyrenderowanie, Pierwsze wyrenderowanie treści i Największe wyrenderowanie treści, aby były one względne w stosunku do początku nawigacji. Oznacza to, że są one zgodne z czasami raportowanymi przez PerformanceObserver.

Problem z Chromium #974550

Nowe ikony punktów przerwania, warunkowych punktów przerwania i punktów logowania

Panel Źródła ma nowe projekty punktów przerwania, warunkowych punktów przerwania i punktów logowania. Punkty przerwania mają odświeżony wygląd flagi z jaśniejszymi i przyjemniejszymi kolorami. Dodano ikony, aby odróżnić warunkowe punkty przerwania od punktów rejestrowania.

Problem z Chromium #1041830

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.