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

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 jest dobra, wymaga poprawy czy słaba.

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”.

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.

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.

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ę.

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

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.

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.

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. Włącz chrome://flags/#enable-experimental-web-platform-features, aby je przetestować.

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).

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.

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.

Problem w Chromium: 1158827

Filtrowanie eksperymentów w ustawieniu Eksperymenty

Dzięki nowemu filtrowi możesz szybciej znajdować eksperymenty. Na przykład otwórz Ustawienia > Eksperymenty w polu tekstowym Filtr wpisz „kontrast”. aby odfiltrować wszystkie eksperymenty ze słowem „kontrast”.

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.

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 (czyli #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.

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.

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.

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.

Stara wersja Chrome po lewej stronie nie pokazuje lokalizacji źródłowej (np. dsquare) w zrzutach stosu błędów, natomiast 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   > 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.