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

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.

Nowe dane o wydajności w Lighthouse 6.0

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.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);

Ostrzeżenia dotyczące skrótów do aplikacji

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.

skrypt service worker „respondWith”

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.

Przesunięcia kodu bajtowego

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.

Tylko wybrany kontekst

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.

Informacje o pamięci podręcznej kompilacji JavaScript

Problem z Chromium #912581

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.

Dopasowywanie czasu nawigacji w panelu Wydajność

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.

Punkty przerwania

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.

Co nowego w Narzędziach deweloperskich

Lista wszystkich tematów omawianych w cyklu artykułów Co nowego w Narzędziach deweloperskich.