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

Jecelyn Yeen

Nowe narzędzia do debugowania CSS Flexbox

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

Narzędzia do debugowania CSS Flexbox

Jeśli do elementu HTML na stronie zastosowano parametr display: flex lub display: inline-flex, w panelu Elementy będzie obok niego widoczna plakietka flex. Kliknij plakietkę, aby włączyć lub wyłączyć widoczną nakładkę na stronie.

W panelu Style kliknij nową ikonę obok przycisku 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 w panelu Układ znajduje się sekcja Flexbox, w której możesz wyświetlić wszystkie elementy Flexbox na stronie. Możesz przełączać nakładkę każdego elementu.

Sekcja Flexbox na panelu Układ

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 jakości sygnałów, które są niezbędne do zapewnienia użytkownikom doskonałych wrażeń w internecie.

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

Obecnie wyświetlana jest nakładka:

Nakładka Podstawowe wskaźniki internetowe

Problem w Chromium: 1152089

Aktualizacje karty Problemy

Przeniesiono liczbę problemów na pasek stanu konsoli

Dodaliśmy nowy przycisk liczby problemów na pasku stanu konsoli, który poprawia widoczność ostrzeżeń o problemach. 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ą w internecie

Na karcie Problemy pojawiają się teraz problemy z zaufaną aktywnością internetową. Ma to pomóc programistom w zrozumieniu i rozwiązywaniu problemów z zaufaną aktywnością w internecie w witrynach oraz poprawie jakości 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ę Andrea, by dowiedzieć się więcej o tworzeniu i wdrażaniu zaufanej aktywności internetowej.

Problemy dotyczące zaufanej aktywności internetowej na karcie Problemy

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 podczas drukowania ciągów konsola nie zmieniała znaczenia podwójnych cudzysłowów.

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

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 nowym panelu Tokeny zaufania w panelu Aplikacja.

Trust Token to nowy interfejs API pomagający w walce z oszustwami i w odróżnianiu botów od prawdziwych ludzi bez pasywnego śledzenia. Dowiedz się, jak zacząć korzystać z tokenów zaufania.

Okienko Nowe tokeny zaufania

Problem z Chromium: 1126824

Emuluj funkcję multimedialną CSS „color-gamut”

Emuluj funkcję multimedialną CSS „color-gamut”

Zapytanie o multimedia color-gamut pozwala przetestować przybliżony zakres kolorów obsługiwany przez przeglądarkę i urządzenie wyjściowe. Jeśli na przykład zapytanie o multimedia color-gamut: p3 pasuje do zapytania, oznacza to, że urządzenie użytkownika obsługuje przestrzeń kolorów Display-P3.

Otwórz menu poleceń, uruchom polecenie Pokaż renderowanie i wybierz menu Emuluj funkcję mediów CSS color-gamut.

Problem w Chromium: 1073887

Ulepszone narzędzia progresywnych aplikacji internetowych

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

Ostrzeżenie o możliwości instalacji aplikacji PWA

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

Ostrzeżenie o obcięciu opisu PWA

Dodatkowo w panelu Plik manifestu pojawia się ostrzeżenie, jeśli zrzut ekranu progresywnej aplikacji internetowej nie spełnia wymagań. Więcej informacji o właściwości zrzutów ekranu PWA i jej wymaganiach znajdziesz tutaj.

Ostrzeżenie dotyczące zrzutu ekranu aplikacji PWA

Problem z Chromium: 1146450, 1169689, 965802

Nowa kolumna Remote Address Space w panelu Sieć

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

Nowa kolumna „Zdalna przestrzeń adresowa”

Problem w Chromium: 1128885

Poprawa skuteczności

Poprawiono wydajność wczytywania stron po otwarciu Narzędzi deweloperskich. W niektórych skrajnych przypadkach zaobserwowaliśmy 10-krotną poprawę wydajności.

Narzędzia deweloperskie zbierają zrzuty stosu i dołączają je do wiadomości w konsoli lub zadań asynchronicznych, aby później je wykorzystywać przez programistę w przypadku wystąpienia problemu. Gromadzenie danych musi odbywać się synchronicznie w mechanizmie przeglądarki, więc powolne zbieranie zrzutów stosu może znacznie spowolnić działanie strony przy otwartych narzędziach deweloperskich. 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 zawiera teraz listę 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 w osobnej ramce lub w umieszczonych elementach iframe lub blokowanie takich funkcji.

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

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 być uwzględniany w żądaniach wysyłanych do źródeł tych samych zbiorów własnych.

Kolumna SameParty

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.

Przykład użycia parametru displayName

Chrome tradycyjnie obsługiwało niestandardową właściwość fn.displayName, aby deweloperzy mogli kontrolować nazwy debugowania funkcji wyświetlanych w error.stack i ścieżkach stosu Narzędzi deweloperskich. W powyższym przykładzie stos wywołań wskazywałby wcześniej wartość noLongerSupport.

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

Obsługa funkcji fn.displayName jest zawodna i niespójna w różnych przeglądarkach. Spowalnia gromadzenie zrzutów stosu, które są koszty, które deweloperzy zawsze ponoszą niezależnie od tego, czy faktycznie korzystają z fn.displayName.

Przykład użycia nazwy

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 z powodu wycofania Oszczędzania danych w Chrome.

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

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ę 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ć się na wyświetlanie nowego, ulepszonego widoku drzewa strony z pełną dostępnością.

Bieżący okienko ułatwień dostępu udostępnia ograniczone wyświetlanie jego węzłów i pokazuje 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 na celu ułatwienie analizy i ułatwienie deweloperom korzystania z drzewa ułatwień dostępu.

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

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

Widok drzewa z pełnymi ułatwieniami dostępu

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   Więcej   > Pomoc > Zgłoś problemy z Narzędziami deweloperskimi.
  • Opublikuj tweeta na stronie @ChromeDevTools.
  • Napisz komentarz pod filmem dotyczącym nowości w Narzędziach deweloperskich w Narzędziach deweloperskich w YouTube lub 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.

Chrome 127

Chrome 126

Chrome 125

Chrome 124

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

Chrome 101

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

Chrome 82 został anulowany.

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