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

Jecelyn Yeen

Nowe narzędzia do debugowania Flexbox CSS

DevTools oferuje teraz specjalne narzędzia do debugowania CSS Flexbox.

Narzędzia do debugowania CSS Flexbox

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

W panelu Style możesz kliknąć nową ikonę obok display: flex lub display: inline-flex, by otworzyć edytor Flexbox. Edytor Flexbox pozwala na szybką edycję właściwości Flexbox. Sprawdź, jak to działa.

Poza tym panel Układ zawiera sekcję Flexbox, w której wyświetlają się wszystkie elementy Flexbox na stronie. Możesz przełączać nakładkę dla każdego elementu.

Sekcja Flexbox w panelu Układ

Problemy z Chromium: 1166710, 1175699

Nowa nakładka dotycząca podstawowych wskaźników internetowych

Dokładniej wizualizuj i mierz wydajność swoich stron dzięki nowej nakładce Podstawowe wskaźniki internetowe.

Podstawowe wskaźniki internetowe to inicjatywa Google mająca na celu dostarczanie ujednoliconych wskazówek dotyczących sygnałów dotyczących jakości, które są niezbędne do zapewnienia użytkownikom pozytywnych wrażeń podczas korzystania z internetu.

Otwórz menu poleceń, uruchom polecenie Show Rendering (Pokaż renderowanie) i zaznacz pole wyboru Core Web Vitals.

Nakładka zawiera obecnie:

Nakładka dotycząca podstawowych wskaźników internetowych

Problem z Chromium: 1152089

Aktualizacje na karcie Problemy

Liczba problemów została przeniesiona na pasek stanu konsoli

Na pasku stanu konsoli dodaliśmy nowy przycisk liczby problemów, który zwiększa widoczność ostrzeżeń o problemach. Zastąpi to komunikat o problemie w konsoli.

Liczba problemów na pasku stanu konsoli

Problem z Chromium: 1140516

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

Na karcie Problemy pojawiają się teraz informacje o problemach związanych z zaufaną aktywnością w internecie. Ma to ułatwić programistom analizowanie problemów z zaufaną aktywnością internetową w ich witrynach i rozwiązywanie związanych z nimi problemów oraz polepszanie jakości aplikacji.

Otwórz zaufaną aktywność internetową. Następnie otwórz karty Problemy, klikając przycisk Liczba problemów na pasku stanu konsoli, aby zobaczyć problemy. Obejrzyj tę wykład z Andre, aby dowiedzieć się, jak tworzyć i wdrażać zaufaną aktywność w internecie.

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

Problem z Chromium: 1147479

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

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

Sformatuj ciągi znaków jako (prawidłowe) literały ciągu znaków JavaScript

Problem z Chromium: 1178530

Nowy panel Tokeny zaufania w panelu aplikacji

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.

Token zaufania to nowy interfejs API, który pomaga w walce z oszustwami i odróżnia boty od prawdziwych ludzi bez konieczności pasywnego śledzenia. Dowiedz się, jak zacząć korzystać z tokenów zaufania.

Nowy panel Tokeny zaufania

Problem z Chromium: 1126824

Emuluj funkcję CSS „color-gamut”

Emuluj funkcję CSS „color-gamut”

Zapytanie o media color-gamut pozwala przetestować przybliżony zakres kolorów obsługiwanych przez przeglądarkę i urządzenie wyjściowe. Jeśli na przykład zapytanie o multimedia color-gamut: p3 zostanie dopasowane, 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 w menu Emuluj funkcję mediów CSS „color-gamut” wybierz opcję.

Problem z Chromium: 1073887

Ulepszone narzędzia progresywnych aplikacji internetowych

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

Ostrzeżenie o możliwości zainstalowania PWA

Jeśli pole description w pliku manifestu przekracza 324 znaki, panel manifestu wyświetla teraz komunikat ostrzegawczy.

Ostrzeżenie o obcięciu opisu PWA

Dodatkowo jeśli zrzut ekranu PWA nie spełnia wymagań, w panelu Plik manifestu wyświetla się teraz ostrzeżenie. Tutaj znajdziesz więcej informacji o właściwości Zrzuty ekranu PWA i jej wymaganiach.

Ostrzeżenie dotyczące zrzutu ekranu aplikacji PWA

Problem z Chromium: 1146450, 1169689, 965802

Nowa kolumna Remote Address Space w panelu Sieć

Dzięki nowej kolumnie Remote Address Space w panelu Sieć możesz wyświetlać przestrzeń adresów IP sieci każdego zasobu sieciowego.

Nowa kolumna „Zdalna przestrzeń adresowa”

Problem z Chromium: 1128885

Poprawa skuteczności

Ulepszono wydajność wczytywania stron przy otwartych Narzędziach deweloperskich. W skrajnych przypadkach zaobserwowaliśmy dziesięciokrotny wzrost skuteczności.

Narzędzia deweloperskie gromadzą zrzuty stosu i łączą je do komunikatów konsoli lub zadań asynchronicznych, aby deweloper mógł je później wykorzystać w razie problemów. Ze względu na to, że ta kolekcja musi następować synchronicznie w przeglądarce, powolne zbieranie zrzutów stosu może znacznie spowolnić działanie strony przy otwarciu Narzędzi deweloperskich. Udało nam się znacznie zmniejszyć koszty związane z gromadzeniem zrzutów stosu.

Wkrótce na blogu dla inżynierów pojawi się bardziej szczegółowy post z wyjaśnieniem wdrożenia.

Problemy z Chromium: 1069425, 1077657

Wyświetlaj dozwolone i niedozwolone funkcje w widoku szczegółów klatki

W widoku szczegółów ramki wyświetla się teraz lista dozwolonych i niedozwolonych funkcji przeglądarki kontrolowanych przez zasadę uprawnień.

Zasady dotyczące uprawnień to interfejs API platformy internetowej, który umożliwia witrynie zezwalanie na korzystanie z funkcji przeglądarki lub blokowanie ich w umieszczonej ramce lub elementach iframe.

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

Problem z Chromium: 1158827

Nowa kolumna SameParty w panelu Pliki cookie

W panelu Pliki cookie w panelu aplikacji pojawi się teraz atrybut SameParty plików cookie. Atrybut SameParty to nowy atrybut logiczny wskazujący, czy plik cookie powinien być uwzględniany w żądaniach wysyłanych do tych samych zestawów źródeł własnych.

Kolumna SameParty

Problem z Chromium: 1161427

Wycofano obsługę niestandardowej jednostki fn.displayName

Niestandardowe zasoby fn.displayName zostały wycofane. Użyj w zamian zasady fn.name.

Przykład użycia parametru displayName

Chrome do tej pory obsługiwał niestandardową właściwość fn.displayName, umożliwiając programistom kontrolowanie nazw debugowania funkcji, które pojawiają się w interfejsie error.stack i w zrzutach stosu w Narzędziach deweloperskich. W powyższym przykładzie Stos wywołań prezentowany wcześniej jako noLongerSupport.

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

Obsługa fn.displayName jest zawodna i niespójna w różnych wyszukiwarkach. Spowalnia zbieranie zrzutów stosu, a deweloperzy niezależnie od tego, czy rzeczywiście korzystają z fn.displayName, czy nie.

Przykład użycia nazwy

Problem z Chromium: 1177685

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

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

Wycofane ustawienia „Nie pokazuj ostrzeżenia o Oszczędzaniu danych w Chrome”

Problem z Chromium: 1056922

Funkcje eksperymentalne

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

W Narzędziach deweloperskich automatycznie dodano eksperymentalną obsługę 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 wykrywanie.

Otwórz stronę, na której występują problemy z niskim kontrastem (np. tę prezentację). Następnie otwórz karty Problemy, klikając przycisk Liczba problemów na pasku stanu konsoli, aby wyświetlić problemy.

Automatyczne zgłaszanie problemów z niskim kontrastem

Problem z Chromium: 1155460

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

Możesz teraz przełączyć widok, aby wyświetlić nowy, ulepszony widok drzewa w pełnym zakresie ułatwień dostępu.

Bieżący panel ułatwień dostępu zawiera ograniczone wyświetlanie węzłów, pokazując tylko łańcuch bezpośredniego elementu nadrzędnego od węzła głównego do sprawdzanego węzła. Nowy widok drzewa ułatwień dostępu ma to ułatwiać i ułatwia deweloperom korzystanie z drzewa ułatwień dostępu.

Po włączeniu eksperymentu w panelu Elementy pojawi się nowy przycisk. Kliknij go, aby przełączać się między istniejącym drzewem DOM i pełnym drzewem ułatwień dostępu.

Pamiętaj, że jest to eksperyment na wczesnym etapie. Planujemy z czasem udoskonalać i rozszerzać tę funkcję.

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

Problem z Chromium: 887173

Pobieranie kanałów podglądu

Jako domyślnej przeglądarki dla programistów możesz używać Chrome Canary, Dev lub Beta. Te kanały podglądu dają dostęp do najnowszych funkcji Narzędzi deweloperskich, umożliwiają testowanie najnowocześniejszych interfejsów API platform internetowych oraz wykrywanie problemów w witrynie, zanim zdołają zrobić użytkownicy.

Kontakt z zespołem Narzędzi deweloperskich w Chrome

Użyj poniższych opcji, aby omówić nowe funkcje i zmiany w poście lub wszelkie inne kwestie związane z Narzędziami dla deweloperów.

  • Prześlij nam sugestię lub opinię na stronie crbug.com.
  • Aby zgłosić problem z Narzędziami deweloperskimi, kliknij Więcej opcji   Więcej   > Pomoc > Zgłoś problemy z Narzędziami deweloperskimi.
  • zatweetuj na @ChromeDevTools.
  • Napisz komentarz o nowościach w filmach w YouTube dostępnych w Narzędziach deweloperskich lub z poradami dotyczącymi narzędzi dla deweloperów w filmach w YouTube.

Co nowego w Narzędziach deweloperskich

Lista wszystkich omówionych funkcji w serii Co nowego w Narzędziach deweloperskich.

Chrome 123

Chrome 122

Chrome 121

Chrome 120

Chrome 119

Chrome 118

Chrome 117

Chrome 116

Chrome 115

Chrome 114

Chrome 113

Chrome 112

Chrome 111

Chrome 110

Chrome 109

Chrome 108

Chrome 107

Chrome 106

Chrome 105

Chrome 104

Chrome 103

Chrome 102

101 Chrome

Chrome 100

Chrome 99

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Chrome 93

Chrome 92

Chrome 91

Chrome 90

Chrome 89

Chrome 88

Chrome 87

Chrome 86

Chrome 85

Chrome 84

Chrome 83

Chrome 82

Subskrypcja Chrome 82 została anulowana.

Chrome 81

Chrome 80

Chrome 79

Chrome 78

Chrome 77

Chrome 76

Chrome 75

Chrome 74

Chrome 73

Chrome 72

Chrome 71

Chrome 70

Chrome 68

Chrome 67

Chrome 66

Chrome 65

Chrome 64

Chrome 63

Chrome 62

Chrome 61

Chrome 60

Chrome 59