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

Nowe narzędzia do debugowania CSS Flexbox

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

Gdy do elementu HTML na stronie zastosowano atrybut display: flex lub display: inline-flex, w panelu Elementy obok tego elementu zobaczysz plakietkę flex. Kliknij plakietkę, aby włączyć lub wyłączyć wyświetlanie nakładki elastycznej na stronie.

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

Dodatkowo w panelu Układ znajduje się sekcja Flexbox, w której wyświetlane są wszystkie elementy flexbox na stronie. Możesz włączać i wyłączać nakładkę każdego elementu.

Problemy z Chromium: 1166710, 1175699

Nowa nakładka Podstawowe wskaźniki internetowe

Dzięki nowej nakładce Core Web Vitals możesz lepiej wizualizować i mierzyć skuteczność strony.

Podstawowe wskaźniki internetowe to inicjatywa Google służąca zapewnieniu ujednoliconych wskazówek dotyczących sygnałów jakości, które są niezbędne do zapewnienia doskonałych wrażeń użytkownika w internecie.

Otwórz menu poleceń, uruchom polecenie Show Rendering, a następnie zaznacz pole wyboru Core Web Vitals.

Nakładka wyświetla obecnie:

• Największe wyrenderowanie treści (LCP): mierzy wydajność wczytywania. Aby wygodnie korzystało się z witryny, LCP powinno pojawiać się w ciągu 2,5 sekundy od wczytania strony.
• Opóźnienie przy pierwszym działaniu (FID): mierzy interaktywność. Aby zadbać o wygodę użytkowników, strony powinny mieć FID krótszy niż 100 milisekund.
• Skumulowane przesunięcie układu (CLS): mierzy stabilność wizualną. Aby zadbać o wygodę użytkowników, strony powinny mieć wynik CLS mniejszy niż 0,1.

Problem w Chromium: 1152089

Aktualizacje karty Problemy

Przeniesienie liczby problemów na pasek stanu konsoli

W pasku stanu konsoli dodaliśmy nowy przycisk z liczbą problemów, aby zwiększyć widoczność ostrzeżeń o problemach. Spowoduje to zastąpienie komunikatu o problemie w Konsoli.

Problem w Chromium: 1140516

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

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

Otwórz zaufaną aktywność internetową. Następnie otwórz karty Problemy, klikając przycisk Liczba problemów na pasku stanu Konsoli, aby wyświetlić problemy. Obejrzyj prezentację Andre, aby dowiedzieć się więcej o tworzeniu i wdrażaniu zaufanej aktywności w internecie.

Problem w Chromium: 1147479

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

Obecnie konsola formatuje ciągi znaków jako prawidłowe literały ciągów znaków JavaScript. Wcześniej Konsola nie usuwała znaków cudzysłowu podczas drukowania ciągów znaków.

Problem w Chromium: 1178530

Nowy panel Tokeny zaufania w panelu Aplikacja

Narzędzia deweloperskie 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.

Problem w Chromium: 1126824

Emulowanie funkcji multimedialnej CSS „color-gamut”

Zapytanie o media color-gamut umożliwia sprawdzenie 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ń kolorów Display-P3.

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

Problem w Chromium: 1073887

Ulepszone narzędzia do progresywnych aplikacji internetowych

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

W panelu Manifest wyświetla się teraz ostrzeżenie, jeśli opis w pliku manifestu przekracza 324 znaki.

Dodatkowo w panelu Plik manifestu wyświetla się teraz komunikat ostrzegawczy, jeśli zrzut ekranu progresywnej aplikacji internetowej nie spełnia wymagań. Dowiedz się więcej o właściwości screenshots w przypadku PWA i jej wymaganiach.

Problem w Chromium: 1146450, 1169689, 965802

Nowa kolumna Remote Address Space w panelu Sieć

Użyj nowej kolumny Remote Address Space w panelu Sieć, aby wyświetlić przestrzeń adresów IP sieci każdego zasobu sieciowego.

Problem w Chromium: 1128885

Poprawa skuteczności

Poprawiliśmy wydajność wczytywania stron przy otwartych Narzędziach deweloperskich. W niektórych skrajnych przypadkach zaobserwowaliśmy 10-krotny wzrost wydajności.

Narzędzia deweloperskie zbierają ślady stosu i dołączają je do komunikatów konsoli lub zadań asynchronicznych, aby w razie problemu deweloper mógł z nich później skorzystać. Ponieważ zbieranie tych danych musi odbywać się synchronicznie w silniku przeglądarki, powolne zbieranie śladów stosu może znacznie spowolnić działanie strony, gdy Narzędzia deweloperskie są otwarte. Udało nam się znacznie zmniejszyć obciążenie związane z gromadzeniem śladów stosu.

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

Problemy z Chromium: 1069425, 1077657

Wyświetlanie dozwolonych i niedozwolonych funkcji w widoku szczegółów ramki

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

Zasady dotyczące uprawnień to interfejs API platformy internetowej, który umożliwia witrynie zezwalanie na używanie funkcji przeglądarki we własnej ramce lub w osadzonych ramkach iframe albo blokowanie takiego użycia.

Problem w Chromium: 1158827

Nowa kolumna SameParty w panelu Pliki cookie

W panelu Pliki cookie w panelu Aplikacja jest teraz wyświetlany atrybut SameParty plików cookie. Atrybut SameParty to nowy atrybut logiczny, który określa, czy plik cookie powinien być uwzględniany w żądaniach do źródeł z tego samego zestawu źródeł własnych.

Problem w Chromium: 1161427

Wycofana obsługa niestandardowego parametru fn.displayName

Obsługa niestandardowego elementu fn.displayName została wycofana. Zamiast niej użyj zasady fn.name.

Chrome od dawna obsługuje niestandardową właściwość fn.displayName, która umożliwia deweloperom kontrolowanie nazw debugowania funkcji wyświetlanych w error.stack i w śladach stosu Narzędzi deweloperskich. W przykładzie powyżej w sekcji Call Stack wcześniej wyświetlał się znak noLongerSupport.

Zastąp fn.displayName standardową wartością fn.name, którą w ECMAScript 2015 można było skonfigurować (za pomocą Object.defineProperty), aby zastąpić niestandardową właściwość fn.displayName.

Obsługa fn.displayName była zawodna i niejednolita w różnych silnikach przeglądarek. Spowalnia to zbieranie śladów stosu, co zawsze wiąże się z kosztami dla deweloperów, niezależnie od tego, czy faktycznie używają oni fn.displayName, czy nie.

Problem w Chromium: 1177685

Wycofanie ikony Don't show Chrome Data Saver warning z menu Ustawienia

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

Problem w Chromium: 1056922

Funkcje eksperymentalne

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

W narzędziach deweloperskich dodaliśmy eksperymentalną obsługę automatycznego zgłaszania problemów z kontrastem na karcie Problemy.

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

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

Problem z Chromium: 1155460

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

Możesz teraz przełączyć się na nowy, ulepszony widok drzewa ułatwień dostępu na stronie.

Obecny panel ułatwień dostępu wyświetla tylko ograniczoną liczbę węzłów, pokazując tylko bezpośredni łańcuch przodków od węzła głównego do sprawdzanego węzła. Nowy widok drzewa ułatwień dostępu ma to zmienić. Dzięki niemu drzewo ułatwień dostępu jest bardziej przejrzyste, przydatne i łatwiejsze w użyciu dla programistów.

Po włączeniu eksperymentu w panelu Elementy pojawi się nowy przycisk. Kliknij go, aby przełączać się między dotychczasowym drzewem DOM a pełnym drzewem dostępności.

Pamiętaj, że jest to eksperyment na wczesnym etapie. Z czasem planujemy ulepszać i rozszerzać tę funkcję.

Problem z Chromium: 887173

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.

Skontaktuj się 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.
• Zostawiaj komentarze pod filmami na YouTube z serii „Co nowego w Narzędziach deweloperskich” lub filmami 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.