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 CSS Flexbox.

Jeśli do elementu HTML na stronie jest stosowany atrybut display: flex lub display: inline-flex, obok niego w panelu Elementy zobaczy plakietkę flex. Kliknij plakietkę, aby przełączyć wyświetlanie elastyczną nakładkę na stronie.

W panelu Style możesz kliknąć nową ikonę obok ikony display: flex lub display: inline-flex, aby otworzyć edytor Flexbox. Edytor Flexbox umożliwia szybką edycję właściwości Flexbox. Wypróbuj tę funkcję.

Dodatkowo panel Układ zawiera sekcję Flexbox, w której możesz wyświetlić wszystkie elementy Flexbox stronę. Możesz przełączać nakładkę każdego elementu.

Problemy z Chromium: 1166710, 1175699

Nowa nakładka Podstawowe wskaźniki internetowe

Dzięki nowej nakładki Podstawowe wskaźniki internetowe możesz lepiej wizualizować i mierzyć wydajność strony.

Podstawowe wskaźniki internetowe to inicjatywa Google, której celem jest dostarczanie ujednoliconych wskazówek dotyczących sygnałów dotyczących jakości, są kluczowe dla zapewnienia wygody użytkownikom internetu.

Otwórz menu poleceń, uruchom polecenie Show Rendering i włącz opcję Core Web Vitals.

Obecnie wyświetlana jest nakładka:

• Największe wyrenderowanie treści (LCP): mierzy wydajność wczytywania. Dbanie o zadowolenie wartość LCP powinna wystąpić w ciągu 2, 5 sekundy od pierwszego wczytania strony.
• Opóźnienie przy pierwszym działaniu (FID): mierzy interaktywność. W trosce o wygodę użytkowników strony powinien mieć FID krótszy niż 100 milisekund.
• Skumulowane przesunięcie układu (CLS): mierzy stabilność wizualną. Dbanie o zadowolenie strony powinny mieć CLS niższy niż 0, 1.

Problem w Chromium: 1152089

Aktualizacje karty Problemy

Przeniesiono liczbę problemów na pasek stanu konsoli

Na pasku stanu konsoli dodaliśmy nowy przycisk z liczbą problemów, który poprawia widoczność ostrzeżenia o problemach. Spowoduje to zastąpienie komunikatu o problemie w konsoli.

Problem z Chromium: 1140516

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

Na karcie Problemy pojawiają się teraz problemy z zaufaną aktywnością internetową. Ma to pomóc deweloperom rozumie i rozwiązuje problemy związane z Zaufaną aktywnością w internecie, poprawiając jakość aplikacji.

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

Problem w Chromium: 1147479

Formatuj ciągi znaków jako (prawidłowe) literały ciągów JavaScript w konsoli

Teraz Konsola formatuje ciągi tekstowe w konsoli jako prawidłowe literały ciągu znaków JavaScript. Wcześniej, w przypadku Konsoli nie trzeba będzie unikać podwójnych cudzysłowów podczas drukowania ciągów znaków.

Problem z Chromium: 1178530

Nowy panel tokenów zaufania w panelu aplikacji

Narzędzia deweloperskie wyświetlają teraz wszystkie dostępne tokeny zaufania w bieżącym kontekście przeglądania w nowej wersji Trust Okienko Tokens (Tokeny) w panelu Application (Aplikacja).

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

Problem z Chromium: 1126824

Emuluj funkcję multimedialną CSS „color-gamut”

Zapytanie o media color-gamut pozwala przetestować przybliżony zakres obsługiwanych kolorów przeglądarki i urządzenia wyjściowego. Jeśli na przykład zapytanie o media color-gamut: p3 pasuje do zapytania, oznacza, że urządzenie użytkownika obsługuje przestrzeń kolorów Display-P3.

Otwórz menu poleceń, uruchom polecenie Pokaż renderowanie, a następnie ustaw w nim polecenie Emulation CSS Menu funkcji medialnych color-gamut.

Problem w Chromium: 1073887

Ulepszone narzędzia progresywnych aplikacji internetowych

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

Jeśli opis pliku manifestu przekracza 324, w panelu Plik manifestu wyświetla się ostrzeżenie znaków.

Dodatkowo w panelu Plik manifestu pojawia się ostrzeżenie, jeśli zrzut ekranu PWA nie zawiera spełniają wymagania. Dowiedz się więcej o właściwości zrzuty ekranu PWA i jej wymaganiach tutaj.

Problem z 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

Poprawiono wydajność wczytywania stron po otwarciu Narzędzi deweloperskich. W niektórych skrajnych przypadkach zanotowaliśmy 10-krotnie poprawy wydajności.

Narzędzia deweloperskie zbierają zrzuty stosu i dołączają je do wiadomości w konsoli lub zadań asynchronicznych na później. przez programistę. Ponieważ ta kolekcja musi następować synchronicznie powolne zbieranie zrzutów stosu może znacznie spowalniać stronę przez Otwórz Narzędzia deweloperskie. Udało nam się znacznie ograniczyć nakład pracy związanej ze zbieraniem zrzutów stosu.

W poście na blogu dla inżynierów znajdziesz szczegółowe informacje na temat implementacji.

Problemy z Chromium: 1069425, 1077657

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

Widok szczegółów ramki pokazuje teraz listę dozwolonych i niedozwolonych funkcji przeglądarki kontrolowanych przez Zasady dotyczące uprawnień.

Zasady dotyczące uprawnień to interfejs API platformy internetowej, który umożliwia witrynie akceptowanie i blokowanie używanie funkcji przeglądarki w osobnej ramce lub w umieszczonych elementach iframe.

Problem w Chromium: 1158827

Nowa kolumna SameParty w panelu Pliki cookie

W panelu Pliki cookie w panelu aplikacji wyświetlany jest teraz atrybut SameParty plików cookie. Atrybut SameParty to nowy atrybut logiczny, który wskazuje, czy plik cookie powinien zostać uwzględniony w kierowanych do źródeł tych samych zestawów źródeł własnych.

Problem z Chromium: 1161427

Wycofana niestandardowa obsługa standardu fn.displayName

Obsługa niestandardowych atrybutów fn.displayName została wycofana. Użyj w zamian zasady fn.name.

Chrome zwykle obsługiwało niestandardową właściwość fn.displayName jako sposób obsługi programistów do kontrolowania nazw debugowania funkcji, które pojawiają się w error.stack i stosie Narzędzi deweloperskich ślady czasu. W powyższym przykładzie stos wywołań wskazywałby wcześniej wartość noLongerSupport.

Zastąp fn.displayName standardowym polem fn.name, który można skonfigurować (za pomocą Object.defineProperty) w ECMAScript 2015, aby zastąpić niestandardową właściwość fn.displayName.

Obsługa funkcji fn.displayName jest zawodna i niespójna w różnych przeglądarkach. Wolniej pobierania zrzutów stosu, czyli kosztu, który ponoszą zawsze programiści, niezależnie od tego, fn.displayName.

Problem w Chromium: 1177685

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

Ustawienie Don't show Chrome Data Saver warning zostało usunięte, ponieważ zostało włączone Oszczędzanie danych w Chrome wycofane.

Problem z 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 automatycznie wykrywalny problem z ułatwieniami dostępu w internecie. Wyświetlanie tych problemów na karcie Problemy ułatwia deweloperom ich wykrycie.

Otwórz stronę z problemami o niskim kontraście (np. tę demo). Następnie otwórz karty Problemy przez kliknij przycisk Liczba problemów na pasku stanu Konsoli, aby wyświetlić problemy.

Problem z Chromium: 1155460

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

Możesz teraz przełączyć się na wyświetlanie nowego, ulepszonego widoku drzewa strony z pełną dostępnością.

W bieżącym panelu ułatwień dostępu dostępne są tylko ograniczone informacje o węzłach bezpośredni łańcuch elementów nadrzędnych z węzła głównego do sprawdzanego węzła. Nowy widok drzewa ułatwień dostępu aby to poprawić i ułatwić deweloperom korzystanie z drzewa ułatwień dostępu, których użyć.

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

Pamiętaj, że jest to eksperyment na wczesnym etapie. Planujemy ulepszyć i rozszerzyć tę funkcję w czasie.

Problem z Chromium: 887173

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.