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

Jecelyn Yeen

Wyskakujące okienko z informacjami o wskaźnikach internetowych w panelu Wydajność

Najedź kursorem na znacznik wskaźników internetowych w panelu Wydajność, by dowiedzieć się, co oznacza ten wskaźnik – czy wydajność jest dobra, wymaga poprawy czy słaba.

Wyskakujące okienko z informacjami o wskaźnikach internetowych

Problem w Chromium: 1147872

Wizualizacja elementu CSS „Przewijanie”

Teraz możesz przełączyć plakietkę scroll-snap w panelu Elementy, aby sprawdzić wyrównanie elementu CSS „Przewijanie”.

Przyciąganie i przewijanie CSS

Jeśli do elementu HTML na Twojej stronie (np. na tej stronie demonstracyjnej) zastosowano tag scroll-snap-type, obok niego w panelu Elementy zobaczysz plakietkę scroll-snap. Kliknij plakietkę, aby włączyć lub wyłączyć na stronie nakładkę z możliwością przewijania.

W przykładzie powyżej widać kropki na krawędziach przyciągania. Port przewijania ma obrysowany konturem, a elementy przyciągania – przerywane. Dopełnienie przewijania jest wypełniane zielonym kolorem, a margines przewijania – pomarańczowym.

Problem z Chromium: 862450

Nowy narzędzie do inspekcji pamięci

Użyj nowego inspektora pamięci, aby zbadać element ArrayBuffer w JavaScript oraz pamięć Wasm.

Otwórz tę stronę demonstracyjną. W panelu Źródła otwórz plik demo-js.js i ustaw punkt przerwania w wierszu 18.

Odśwież stronę. Rozwiń sekcję Zakres w panelu debugera po prawej stronie. Zwróć uwagę na nową ikonę obok wartości buffer. Kliknij ją, aby wyświetlić Inspektora pamięci.

Zapoznaj się z dokumentacją, aby dowiedzieć się więcej o sprawdzaniu kodu JavaScript ArrayBuffer i WebAssembly.Memory za pomocą nowego inspektora pamięci.

Narzędzie do inspekcji pamięci

Problem w Chromium: 1166577

Nowy panel ustawień plakietki w panelu Elementy

Teraz możesz wybiórczo włączać i wyłączać plakietki w Ustawieniach plakietek w panelu Elementy. Za pomocą tej funkcji możesz dostosowywać ważne plakietki i koncentrować się na nich podczas przeglądania stron internetowych.

panel ustawień plakietki w panelu Elementy

W panelu Elementy kliknij dowolny element prawym przyciskiem myszy. Z menu kontekstowego wybierz Ustawienia plakietki. U góry pojawi się panel ustawień plakietki. Włącz lub wyłącz dowolne pole wyboru, aby wyświetlić/ukryć plakietki.

Problem w Chromium: 1066772

Ulepszony podgląd obrazu z informacjami o współczynniku proporcji

Podglądy obrazów w panelu Elementy zawierają teraz więcej informacji o obrazie – rozmiar renderowany, wyrenderowany współczynnik proporcji, rozmiar wewnętrzny, wewnętrzny współczynnik proporcji i rozmiar pliku.

Te informacje pomogą Ci lepiej zrozumieć obrazy i w razie potrzeby zastosować optymalizację.

Podgląd obrazu z informacjami o współczynniku proporcji

Informacje o współczynniku proporcji obrazu są dostępne w panelu Sieć także po kliknięciu podglądu obrazu.

Informacje o współczynniku proporcji obrazu w panelu Sieć

Problemy z Chromium: 1149832, 1170656

Przycisk nowych warunków sieci z opcjami konfigurowania Content-Encoding

W panelu Sieć dodano przycisk nowych warunków sieci. Kliknij ją, aby otworzyć kartę Warunki sieci.

Do karty Warunki sieci dodaliśmy nową opcję Accepted Content-Encodings (Akceptowane kodowanie treści). Skonfiguruj je, aby sprawdzić, czy odpowiedzi serwera są prawidłowo zakodowane w przeglądarkach, które nie obsługują plików gzip, brotli ani innych przyszłych komponentów Content-Encoding.

Przycisk nowych warunków sieci z opcjami konfiguracji kodowania treści

Problem z Chromium: 1162042

Ulepszenia panelu Style

Nowy skrót do wyświetlania obliczonej wartości w panelu Style

Możesz teraz kliknąć prawym przyciskiem myszy usługę CSS w panelu Style i wybrać Wyświetl obliczoną wartość, aby wyświetlić obliczoną wartość CSS.

Nowy skrót do wyświetlania obliczonej wartości

Problem w Chromium: 1076198

Obsługa słowa kluczowego accent-color

Interfejs autouzupełniania w panelu Style wykrywa teraz słowo kluczowe CSS accent-color, które umożliwia programistom stron internetowych określenie koloru uzupełniającego dla elementów sterujących interfejsu (np. pola wyboru czy opcji) generowanych przez element.

Właściwość CSS accent-color jest obecnie w fazie eksperymentalnej. Aby przetestować to działanie, włącz: chrome://flags/#enable-experimental-web-platform-features.

kolor uzupełniający

Problem z Chromium: 1092093

Kategoryzacja typów problemów za pomocą kolorów i ikon

Na karcie Problemy problemy są teraz klasyfikowane według błędów strony, nadchodzących zmian powodujących niezgodność i ewentualnych ulepszeń, które pozwalają lepiej wskazywać ich wagę. Aby otworzyć kartę Problemy, w Konsoli kliknij przycisk Liczba problemów.

  • Błędy na stronie (czerwony). Problemy, które mają bezpośredni wpływ na działanie strony, takie jak nieustawienie prawidłowych nagłówków CORS.
  • Nadchodzące zmiany powodujące niezgodność (żółte). problemy informujące o nadchodzącej, niezgodnej ze sobą zmianie na platformie internetowej, która może skutkować utratą funkcjonalności strony (np. ostrzeżeniem o nadchodzących zmianach standardu RFC 1918 CORS).
  • Możliwe ulepszenia (kolor niebieski). potencjalne ulepszenia na stronie, ale obecnie nie pogarszają jej podstawowych funkcji (np.problemy z ułatwieniami dostępu).

Kategoryzacja typów problemów za pomocą kolorów i ikon

Problem z Chromium: 1183241

Usuń tokeny zaufania

Tokeny zaufania możesz teraz usuwać za pomocą nowego przycisku usuwania w panelu Tokeny zaufania w panelu Aplikacja.

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

Usuń tokeny zaufania

Problem z Chromium: 1126824

Szczegóły zablokowanych funkcji możesz przeglądać w widoku szczegółów ramki

Szczegółowe informacje o zablokowanych funkcjach znajdziesz teraz w sekcji Zasady dotyczące uprawnień w widoku szczegółów ramki.

Otwórz tę stronę prezentacji. Otwórz panel Aplikacja i wybierz ramkę. W sekcji Zasady dotyczące uprawnień przewiń do właściwości Wyłączone funkcje. Kliknij Pokaż szczegóły, aby wyświetlić szczegółowe informacje o przyczynach zablokowania funkcji. Kliknij ikonę obok każdej zasady, aby przejść do elementu iframe lub żądania sieciowego, które zablokowały tę funkcję.

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.

Zablokowane funkcje w widoku szczegółów ramki

Problem w Chromium: 1158827

Filtrowanie eksperymentów w ustawieniu Eksperymenty

Dzięki nowemu filtrowi możesz szybciej znajdować eksperymenty. Możesz np. kliknąć Ustawienia > Eksperymenty i w polu tekstowym Filtr wpisać „kontrast”, aby odfiltrować wszystkie eksperymenty ze słowem „kontrast”.

Filtrowanie eksperymentów w ustawieniu Eksperymenty

Nowa kolumna Vary Header w panelu Pamięć podręczna

Użyj nowej kolumny Vary Header w panelu Pamięć podręczna, aby wyświetlić nagłówek odpowiedzi HTTP Vary.

Zróżnicuj nagłówek kolumny

Problem w Chromium: 1186049

Ulepszenia panelu Źródła

Obsługa nowych funkcji JavaScriptu

Narzędzia deweloperskie obsługują teraz nową funkcję języka JavaScript prywatnego sprawdzenia marki (tzw. #foo in obj).

Ta funkcja sprawdzania prywatnej marki rozszerza operator in, umożliwiając obsługę pól klas prywatnych w dowolnym obiekcie.

Wypróbuj tę funkcję w panelach Konsola i Źródła. Pola prywatne możesz też sprawdzać w sekcji Zakres w panelu debugera.

Kontrola marki prywatnej JavaScript

Problem z Chromium: 11374

Ulepszona obsługa debugowania punktów przerwania

Narzędzia deweloperskie prawidłowo ustawiają teraz punkty przerwania w wielu skryptach. Nowoczesne pakiety pakietów JavaScript (np. Webpack, Rollup) obsługują funkcję podziału kodu – w niektórych sytuacjach jeden wspólny komponent może być uwzględniony w wielu trasach (podziałach kodu).

Wcześniej narzędzia deweloperskie mogły ustawiać punkty przerwania tylko w jednej nieprzetworzonej lokalizacji. Dzięki temu ostatniemu ulepszeniu Narzędzia deweloperskie mogą prawidłowo ustawiać punkty przerwania we wszystkich odpowiednich lokalizacjach.

Problemy z Chromium: 1142705, 979000, 1180794

Obsługa podglądu po najechaniu kursorem myszy z użyciem notacji []

Narzędzia deweloperskie obsługują teraz podgląd po najechaniu kursorem myszy w wyrażeniach członkowskich JavaScriptu, które korzystają z notacji [] w panelu Źródła.

Obsługa podglądu po najechaniu kursorem myszy z użyciem notacji „[]”

Problem z Chromium: 1178305

Ulepszony konspekt plików HTML

Narzędzia deweloperskie zapewniają teraz lepszą obsługę konspektów plików HTML. W panelu Źródła otwórz plik HTML. Konspekt kodu możesz też przełączać, naciskając klawisze Cmd + Shift + O na Macu lub Ctrl + Shift + O na komputerze z systemem Windows.

W poniższym przykładzie Narzędzia deweloperskie poprawnie wyświetlają wszystkie funkcje w konspektie. Wcześniej w Narzędziach deweloperskich wyświetlały się tylko niektóre funkcje.

Ulepszony konspekt plików HTML

Problem z Chromium: 761019, 1191465

Prawidłowe zrzuty stosu błędów na potrzeby debugowania Wasm

Narzędzia deweloperskie rozwiązują teraz wywołania funkcji wbudowanych i wyświetlają prawidłowe zrzuty stosu błędów przy debugowaniu Wasm.

Wcześniej w zrzutach stosu błędów wyświetlały się tylko ogólne odwołania do Wasm.

Prawidłowe zrzuty stosu błędów na potrzeby debugowania Wasm

Stara wersja Chrome po lewej stronie nie pokazuje lokalizacji źródłowej (np. dsquare) w zrzutach stosu błędów, podczas gdy nowa wersja po prawej stronie już to pokazuje.

Problem z Chromium: 1189161

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