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

Edytowanie stylów platform CSS-in-JS

Okienko Style ma teraz lepszą obsługę edycji stylów utworzonych za pomocą obiektu CSS API modelu (CSSOM). Wiele bibliotek i platform CSS-in-JS korzysta z interfejsów CSSOM API, aby konstruować style.

Style dodane w JavaScripcie możesz też teraz edytować za pomocą Arkuszy stylów z możliwością konstruowania. Konstrukcja Arkusze stylów to nowy sposób tworzenia i rozpowszechniania stylów wielokrotnego użytku w modelu Shadow DOM.

Na przykład nie można wcześniej edytować stylów h1 dodanych za pomocą CSSStyleSheet (CSSOM API). W panelu Style można teraz edytować:

Problem z Chromium #946975

Latarnia morska 6 w panelu Lighthouse

Panel Lighthouse korzysta teraz z Lighthouse 6. Na stronie Co nowego w Lighthouse 6.0 dowiesz się, podsumowanie wszystkich głównych zmian lub informacje o wersji 6.0.0, gdzie znajduje się pełna lista zmian.

Lighthouse w wersji 6.0 wprowadza do raportu 3 nowe dane: 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 i TBT to laboratoryjny serwer proxy pomiarów innych podstawowych wskaźników internetowych. Opóźnienie.

Przeliczono też formułę wyniku wydajności, aby lepiej wczytuję z myślą o użytkownikach.

Problem w Chromium: #772558

Wycofanie pierwszego wyrenderowania elementu znaczącego (FMP)

Pierwsze wyrenderowanie elementu znaczącego (FMP) zostało wycofane w Lighthouse 6.0. Została również usunięta z Panel wydajności. Największe wyrenderowanie treści to zalecany zamiennik FMP. Zobacz pierwsze Znaczące wyrenderowanie treści, które wyjaśnia, dlaczego ta funkcja została wycofana.

Problem z Chromium: #1096008

Obsługa nowych funkcji JavaScriptu

Narzędzia deweloperskie obsługują teraz niektóre najnowsze funkcje języka JavaScript:

• Opcjonalne łańcuchy autouzupełniania składni – autouzupełnianie usługi w Konsoli obsługuje opcjonalną składnię łańcucha, np. name?. działa teraz oprócz name. i name[.
• Wyróżnianie składni w polach prywatnych – pola klas prywatnych działają teraz prawidłowo. z wyróżnionymi elementami składniowymi i drukowanymi literami w panelu Źródła.
• Wyróżnianie składni w przypadku operatora scalania Nullish – w Narzędziach deweloperskich działa teraz poprawnie ładunek druku. operator łączenia wartości null w panelu Źródła.

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

Ostrzeżenia o nowych skrótach aplikacji w panelu pliku manifestu

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

W panelu manifestu 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 do aplikacji i ikony manifestu nie są kwadratowe (ponieważ zostaną zignorowane)

Problem z Chromium #955497

Zdarzenia respondWith instancji service worker na karcie Czas

Karta Czas w panelu Sieć zawiera teraz zdarzenia respondWith skryptu service worker. respondWith to czas bezpośrednio przed uruchomieniem mechanizmu obsługi zdarzeń fetch przez moduł obsługi zdarzeń Obietnica respondWith modułu obsługi fetch została zrealizowana.

Problem w Chromium #1066579

Spójne wyświetlanie panelu Computed

Obliczone okienko w panelu Elementy jest teraz wyświetlane spójnie jako panel we wszystkich widocznym obszarze rozmiarów reklam Google Ads. Wcześniej panel Obliczony scalał się w panelu Style, gdy szerokość Narzędzia deweloperskie widoczny obszar był wąski.

Problem w Chromium: #1073899

Przesunięcia kodu bajtowego dla plików WebAssembly

Narzędzia deweloperskie wykorzystują teraz przesunięcia kodów bajtowych do wyświetlania numerów wierszy demontażu Wasm. Dzięki temu wyraźniej analizujemy dane binarne i są bardziej spójne ze sposobem działania Wasm w środowisku wykonawczym, odwołuje się do lokalizacji.

Problem z Chromium: #1071432

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

Podczas kopiowania lub wycinania bez zaznaczenia w edytorze panelu Źródła lub wytnij bieżącą treść wiersza. Na przykład w poniższym filmie kursor znajduje się na końcu wiersz 1. Po naciśnięciu skrótu klawiszowego wytnij cały wiersz jest kopiowany do schowka, Usunięto.

Problem z Chromium #800028

Aktualizacje ustawień konsoli

Rozgrupuj te same komunikaty w konsoli

Przełącznik Grupuj podobne w ustawieniach konsoli dotyczy teraz zduplikowanych wiadomości. Wcześniej zostało zastosowane do podobnych wiadomości.

Na przykład wcześniej Narzędzia deweloperskie nie rozgrupowywały wiadomości hello, mimo że grupuj podobne. jest odznaczone. Wiadomości hello są teraz rozgrupowane:

Problem z Chromium #1082963

Zachowywanie ustawień Tylko wybrany kontekst

Ustawienia Tylko wybrany kontekst z ustawień konsoli zostaną zachowane. Wcześniej ustawienia były resetowane po każdym zamknięciu i ponownym uruchomieniu Narzędzi deweloperskich. Ta zmiana sprawia, że ustawienie działa zgodne z innymi opcjami ustawień konsoli.

Problem w Chromium #1055875

Aktualizacje panelu wydajnoś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 Panel wydajności. Wcześniej w Narzędziach deweloperskich nie wyświetlały się informacje związane z buforowaniem kodu, jeśli kod buforowanie nie miało miejsca.

Problem z Chromium #912581

Wyrównanie czasu nawigacji w panelu Skuteczność

Panel Wydajność, który był wyświetlany na linijkach na podstawie daty rozpoczęcia nagrywania. Zawiera zmieniono w przypadku nagrań, po których porusza się użytkownik. Narzędzia deweloperskie pokazują teraz względne czasy linijki. do menu nawigacyjnego.

Zaktualizowaliśmy też czasy: DOMContentLoaded, Pierwsze wyrenderowanie, Pierwsze wyrenderowanie treści oraz Największe wyrenderowanie treści Zdarzenia wyrenderowania treści muszą być względne wobec początku nawigacji, co oznacza, że pasują do wartości czasy zgłoszone przez PerformanceObserver.

Problem z Chromium #974550

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

Panel Źródła ma nowy wygląd punktów przerwania, warunkowych punktów przerwania i punktów logowania. Punkty przerwania mają odświeżony projekt flagi – jaśniejsze i bardziej przyjazne kolory. Ikony są dodawane do pozwalają rozróżniać warunkowe punkty przerwania i punkty logowania.

Problem z Chromium #1041830

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.