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

Jecelyn Yeen

Nowe narzędzia do debugowania flexboxa w CSS

Narzędzia deweloperskie zawierają teraz specjalne narzędzia do debugowania flexboxa CSS.

Narzędzia do debugowania flexboxa w CSS

Jeśli element HTML na stronie ma zastosowany element display: flex lub display: inline-flex, obok niego w panelu Elementy zobaczysz plakietkę flex. Kliknij plakietkę, aby włączyć lub wyłączyć nakładkę Flex na stronie.

W panelu Style możesz kliknąć nową ikonę obok display: flex lub display: inline-flex, aby otworzyć edytor Flexbox. Edytor flexbox umożliwia szybkie edytowanie właściwości flexbox. Sprawdź to.

Dodatkowo w panelu Układ znajduje się sekcja Flexbox, w której wyświetlane są wszystkie elementy flexboxa na stronie. Możesz włączać i wyłączać nakładanie poszczególnych elementów.

Sekcja Flexbox w panelu Układ

Problemy z Chromium: 1166710, 1175699

Nowa nakładka Podstawowe wskaźniki internetowe

Lepsza wizualizacja i pomiar skuteczności strony dzięki nowej nakładce Core Web Vitals.

Podstawowe wskaźniki internetowe to inicjatywa Google zapewniająca ujednolicone wskazówki dotyczące sygnałów związanych z jakością, które są niezbędne do zapewnienia doskonałych wrażeń użytkownika w internecie.

Otwórz menu poleceń, uruchom polecenie Pokaż renderowanie, a następnie zaznacz pole wyboru Podstawowe wskaźniki internetowe.

Nakładka obecnie wyświetla:

Nakładka Podstawowe wskaźniki internetowe

Problem z Chromium: 1152089

Aktualizacje na karcie Problemy

Przeniesienie liczby problemów na pasek stanu Konsoli

Aby ułatwić Ci zauważanie ostrzeżeń o problemach, dodaliśmy nowy przycisk z liczbą problemów na pasku stanu konsoli. Spowoduje to zastąpienie komunikatu o problemie w Konsoli.

Liczba problemów na pasku stanu konsoli

Problem z Chromium: 1140516

Zgłaszanie problemów z zaufaną aktywnością internetową

Na karcie Problemy są teraz widoczne problemy z zaufaniem aktywności w internecie. Ma to pomóc deweloperom zrozumieć i rozwiązać problemy z zaufaną aktywnością w internecie w ich witrynach, co pozwoli im poprawić jakość aplikacji.

Otwórz zaufaną aktywność internetową. Następnie otwórz karty Problemy, klikając przycisk Liczba problemów na pasku stanu Konsoli. Aby dowiedzieć się więcej o tworzeniu i wdrażaniu zaufanej aktywności w internecie, obejrzyj ten wykład wygłoszony przez Andre.

Problemy z zaufaną aktywnością internetową na karcie Problemy

Problem z Chromium: 1147479

Formatowanie ciągów znaków jako (prawidłowych) literałów ciągu znaków JavaScript w konsoli

Teraz Konsola formatuje ciągi znaków jako prawidłowe ciągi znaków literałów JavaScript w Konsoli. Wcześniej konsola nie uciekała podwójnych cudzysłowów podczas drukowania ciągów znaków.

Formatowanie ciągów jako (prawidłowych) literałów ciągu JavaScript

Problem z Chromium: 1178530

Nowy panel Tokeny zaufania w panelu Aplikacja

Narzędzia programistyczne wyświetlają teraz wszystkie dostępne tokeny zaufania w bieżącym kontekście przeglądania w nowym panelu Tokeny zaufania w panelu Aplikacja.

Trust Token to nowy interfejs API, który pomaga zwalczać oszustwa i odróżniać boty od prawdziwych użytkowników bez pasywnego śledzenia. Dowiedz się, jak zacząć korzystać z tokenów zaufania.

Nowy panel tokenów zaufania

Problem z Chromium: 1126824

Emuluj funkcję multimedialną CSS „color-gamut”

Emuluj funkcję multimedialną CSS „color-gamut”

Zapytanie o multimedia color-gamut umożliwia testowanie przybliżonego zakresu kolorów obsługiwanych przez przeglądarkę i urządzenie wyjściowe. Jeśli np. zapytanie o multimedia color-gamut: p3 pasuje, oznacza to, że urządzenie użytkownika obsługuje przestrzeń barw Display-P3.

Otwórz menu poleceń, uruchom polecenie Pokaż renderowanie, a potem ustaw menu Emuluj funkcję multimedialną CSS „color-gamut”.

Problem z Chromium: 1073887

Ulepszone narzędzia do obsługi progresywnych aplikacji internetowych

Narzędzia deweloperskie wyświetlają teraz w Konsoli bardziej szczegółowy komunikat o możliwości instalacji progresywnych aplikacji internetowych (PWA) z linkiem do dokumentacji.

Ostrzeżenie o możliwości zainstalowania PWA

W panelu Plik manifestu wyświetla się teraz komunikat z ostrzeżeniem, jeśli opis pliku manifestu przekracza 324 znaki.

Ostrzeżenie o obcięciu opisu PWA

Dodatkowo w oknie Plik manifestu wyświetla się teraz komunikat ostrzegawczy, jeśli zrzut ekranu z aplikacji PWA nie spełnia wymagań. Dowiedz się więcej o właściwości zrzuty ekranu w PWA i o wymaganiach z nią związanych.

Ostrzeżenie dotyczące zrzutu ekranu PWA

Problem z Chromium: 1146450, 1169689, 965802

Nowa kolumna Remote Address Space w panelu Sieć

W panelu Sieć w nowej kolumnie Remote Address Space możesz sprawdzić przestrzeń adresów IP sieci każdego zasobu sieci.

Nowa kolumna „Przestrzeń adresów zdalnych”

Problem z Chromium: 1128885

Poprawa skuteczności

Zwiększono wydajność wczytywania stron przy otwartych Narzędziach deweloperskich. W niektórych skrajnych przypadkach zaobserwowaliśmy 10-krotne zwiększenie wydajności.

DevTools zbiera zrzuty stosu i dołącza je do wiadomości w konsoli lub asynchronicznych zadań, aby programista mógł się z nimi zapoznać w razie wystąpienia problemu. Ponieważ zbieranie danych musi odbywać się synchronicznie w silniku przeglądarki, wolne zbieranie danych z wykrywania stosu może znacznie spowolnić stronę z otwartymi Narzędziami deweloperskimi. Udało nam się znacznie zmniejszyć obciążenie związane z zbieraniem informacji o śladzie stosu.

Więcej informacji o wdrożeniu znajdziesz w szczegółowym poście na blogu dla inżynierów.

Problemy z Chromium: 1069425, 1077657

Wyświetlanie funkcji dozwolonych/zabronionych w widoku Szczegóły ramki

Widok szczegółów ramki zawiera teraz listę dozwolonych i zabronionych funkcji przeglądarki kontrolowanych przez zasady dotyczące uprawnień.

Zasady dotyczące uprawnień to interfejs API platformy internetowej, który umożliwia witrynie zezwolenie na korzystanie z funkcji przeglądarki w ramce własnej lub w ramkach iframe, które zawiera.

Dozwolone/niedozwolone funkcje na podstawie zasad dotyczących uprawnień

Problem z Chromium: 1158827

Nowa kolumna SameParty w panelu Ciasteczka

W panelu Pliki cookie w panelu Aplikacja wyświetlany jest teraz atrybut SameParty plików cookie. Atrybut SameParty to nowy atrybut logiczny, który wskazuje, czy plik cookie powinien być uwzględniany w żądaniach do źródeł należących do tych samych zbiorów źródeł własnych.

Kolumna SameParty

Problem z Chromium: 1161427

Wycofana niestandardowa pomoc fn.displayName

Obsługa niestandardowych fn.displayName została wycofana. Zamiast tego użyj pola fn.name.

Przykład użycia wyświetlanej nazwy

Chrome tradycyjnie obsługiwało niestandardową właściwość fn.displayName, która umożliwiała deweloperom kontrolowanie nazw debugowania funkcji wyświetlanych w error.stack i śladach stosu w Narzędziach dewelopera. W przykładzie powyżej zbiór wywołań wcześniej wyświetlał wartość noLongerSupport.

Zastąp fn.displayName standardową wartością fn.name, która została udostępniona do konfiguracji (za pomocą Object.defineProperty) w ECMAScript 2015, aby zastąpić niestandardową właściwość fn.displayName.

Obsługa fn.displayName była niepewna i niejednolita w różnych silnikach przeglądarek. Spowalnia to zbieranie informacji o pliku ścieżki sterowania, a jest to koszt, który deweloperzy zawsze ponoszą niezależnie od tego, czy faktycznie korzystają z funkcji fn.displayName.

Przykład użycia nazwy

Problem z Chromium: 1177685

wycofanie Don't show Chrome Data Saver warning z menu Ustawienia.

Ustawienie Don't show Chrome Data Saver warning zostało usunięte, ponieważ tryb oszczędzania danych w Chrome został wycofany.

Nieużywane ustawienia „Nie pokazuj ostrzeżenia Oszczędzania danych w Chrome”

Problem z Chromium: 1056922

Funkcje eksperymentalne

Automatyczne zgłaszanie problemów związanych z niskim kontrastem na karcie Problemy

W Narzędziach deweloperskich dodano eksperymentalne wsparcie dla automatycznego zgłaszania problemów z kontrastem na karcie Problemy.

Tekst o niskim kontraście to najczęstszy problem z ułatwieniami dostępu w internecie, który można wykryć automatycznie. Wyświetlanie tych problemów na karcie Problemy ułatwia ich odkrywanie przez deweloperów.

Otwórz stronę z problemami związanymi z niskim kontrastem (np. demo). Następnie otwórz karty Problemy, klikając przycisk Liczba problemów na pasku stanu Konsoli.

Automatyczne zgłaszanie problemów związanych z niskim kontrastem

Problem z Chromium: 1155460

Pełny widok drzewa ułatwień dostępu w panelu Elementy

Możesz teraz wyświetlić nowy, ulepszony widok drzewa ułatwień dostępu na całej stronie.

Obecny panel ułatwień dostępu wyświetla ograniczoną liczbę węzłów, pokazując tylko bezpośredni łańcuch przodków od węzła katalogu do węzła, który jest sprawdzany. Nowy widok drzewa ułatwień dostępu ma na celu ułatwić eksplorowanie drzewa, zwiększyć jego przydatność i ułatwić korzystanie z niego deweloperom.

Po włączeniu eksperymentu w panelu Elementy pojawi się nowy przycisk, który pozwoli Ci przełączać się między obecnym drzewem DOM a pełnym drzewem ułatwień dostępności.

Pamiętaj, że jest to eksperyment na wczesnym etapie. Planujemy w przyszłości ulepszać i rozszerzać tę funkcję.

Pełny widok drzewa ułatwień dostępu

Problem z Chromium: 887173

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.