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

Jecelyn Yeen

Edytowanie stylów w ramkach CSS-in-JS

Panel Styli zapewnia teraz lepszą obsługę edytowania stylów utworzonych za pomocą interfejsów API Modelu obiektów CSS (CSSOM). Wiele frameworków i bibliotek CSS-in-JS używa interfejsów API CSSOM do tworzenia stylów.

Teraz możesz też edytować style dodane w JavaScript za pomocą składnikowych arkuszy stylów. Style skompilowane Style skompilowane to nowy sposób tworzenia i rozpowszechniania stylów wielokrotnego użytku przy użyciu Shadow DOM.

Na przykład style h1 dodane za pomocą CSSStyleSheet (interfejsów API CSSOM) nie były wcześniej możliwe do edycji. W panelu Styl możesz teraz edytować:

Problem z Chromium #946975

Lighthouse 6 w panelu Lighthouse

Panel Lighthouse korzysta teraz z wersji Lighthouse 6. Aby poznać najważniejsze zmiany, przeczytaj artykuł Co nowego w Lighthouse 6.0. Pełną listę zmian znajdziesz w informacjach o wersji 6.0.0.

Lighthouse 6.0 wprowadza do raportu 3 nowe wskaźniki: największe wyrenderowanie treści (LCP), skumulowane przesunięcie układu (CLS) i łączny czas blokowania (TBT). LCP i CLS to 2 nowe podstawowe wskaźniki internetowe Google, a TBT to pomiar laboratoryjny innego podstawowego wskaźnika internetowego, czyli opóźnienia przy pierwszym działaniu.

Zmieniliśmy też wagę w formule obliczania wyniku dotyczącego wydajności, aby lepiej odzwierciedlała ona wrażenia użytkowników związane z wczytywaniem.

Problem z Chromium #772558

Wycofanie pierwszego wyrenderowania elementu znaczącego (FMP)

Pierwsze wyrenderowanie elementu znaczącego (FMP) zostało wycofane w Lighthouse 6.0. Został on również usunięty z panelu Skuteczność. Największe wyrenderowanie treści to zalecana alternatywa dla FMP. Aby dowiedzieć się, dlaczego ta metoda została wycofana, przeczytaj artykuł Pierwsze wyrenderowanie elementu znaczącego.

Problem z Chromium #1096008

Obsługa nowych funkcji JavaScript

Narzędzie DevTools obsługuje teraz lepiej niektóre z najnowszych funkcji języka JavaScript:

• Opcjonalne łańcuchowanie – autouzupełnianie składni – autouzupełnianie właściwości w Konsoli obsługuje teraz składnię opcjonalnego łańcuchowania, np. name?. działa teraz oprócz name. i name[.
• Wyróżnianie składni w polach prywatnych – pola prywatne w klasach są teraz odpowiednio wyróżnione składnią i ładnie wydrukowane w panelu Źródła.
• Podświetlenie składni dla operatora nullish coalescing – w Narzędziach deweloperskich operator nullish coalescing jest teraz prawidłowo wyświetlany w panelu źródeł.

Problemy w Chromium: #1083214, #1073903, #1083797

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

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

Na panelu pliku manifestu wyświetlają się teraz ostrzeżenia, jeśli:

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

Problem z Chromium #955497

Zdarzenia związane z usługą respondWith na karcie Czas.

Karta Czas w panelu Sieć zawiera teraz zdarzenia respondWith związane z usługami działającymi w tle. respondWith to czas od momentu bezpośrednio po uruchomieniu modułu obsługi zdarzeń fetch do momentu, w którym obietnica respondWith modułu obsługi fetch zostanie zrealizowana.

Problem z Chromium #1066579

Spójne wyświetlanie panelu obliczeń

Panel Obliczenia w panelu Elementy jest teraz wyświetlany w taki sam sposób we wszystkich rozmiarach widoku. Wcześniej, gdy widoczny obszar DevTools był wąski, panel Obliczenia był scalany z panelem Style.

Problem z Chromium #1073899

Odsunięcia bajtowego kodu w plikach WebAssembly

Narzędzia deweloperskie używają teraz przesunięć bajtowych do wyświetlania numerów wierszy w dezasemblu Wasm. Dzięki temu łatwiej jest stwierdzić, że masz do czynienia z danymi binarnymi, a także bardziej spójnie odwoływać się do lokalizacji w czasie wykonywania kodu Wasm.

Problem z Chromium #1071432

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

Gdy w edytorze panelu Źródła nie wybierzesz żadnego elementu, narzędzia dla deweloperów skopiują lub wytną bieżący wiersz. Na przykład w filmie poniżej kursor znajduje się na końcu wiersza 1. Po naciśnięciu skrótu klawiszowego wycinanie cały wiersz zostanie skopiowany do schowka i usunięty.

Problem w Chromium #800028

Aktualizacje ustawień konsoli

Odłączanie wiadomości z tej samej konsoli

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

Na przykład wcześniej DevTools nie odznaczał wiadomości hello, mimo że opcja Grupuj podobne nie była zaznaczona. Teraz wiadomości hello nie są już zgrupowane:

Problem z Chromium #1082963

Zachowywanie ustawień Tylko wybrany kontekst

Ustawienia Tylko wybrany kontekst w Ustawieniach konsoli są teraz zapisywane. Wcześniej ustawienia były resetowane za każdym razem, gdy zamknąłeś i otworzyłeś Narzędzia deweloperskie. Ta zmiana sprawia, że działanie tego ustawienia jest zgodne z działaniem innych opcji ustawień konsoli.

Problem z Chromium #1055875

Aktualizacje panelu skuteczności

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 w Narzędziach deweloperskich nie wyświetlano niczego związanego z buforowaniem kodu, jeśli nie miało ono miejsca.

Problem z Chromium #912581

Dopasowywanie czasu wyświetlania w panelu Skuteczność

Panel Wydajność wyświetlał czasy na linijkach na podstawie momentu rozpoczęcia nagrywania. W przypadku nagrań, w których użytkownik się przemieszcza, DevTools pokazuje teraz czasy na linijce w stosunku do 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 względem początku nawigacji, co oznacza, że są zgodne z czasami podanymi przez PerformanceObserver.

Problem z Chromium #974550

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

Panel Źródła ma nowe układy punktów granicznych, punktów granicznych warunkowych i punktów logowania. Punkty graniczne mają odświeżony projekt flagi z jaśniejszymi i przyjaźniejszymi kolorami. Ikony są dodawane, aby odróżnić warunkowe punkty przerwania od punktów logowania.

Problem w Chromium #1041830

Pobieranie kanałów podglądu

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

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

• Przesyłaj opinie 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.
• 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 omawianych w cyklu artykułów Co nowego w Narzędziach deweloperskich.