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

Jecelyn Yeen

Edytowalne zapytania o kontenery CSS w panelu Style

W panelu Style możesz teraz wyświetlać i edytować zapytania o kontenery CSS.

Zapytania o kontener zapewniają znacznie bardziej dynamiczne podejście do projektowania elastycznego. Reguła @container działa podobnie do zapytania o media z użyciem @media. Zamiast jednak wysyłać zapytania do obszaru widocznego i ciągu znaków klienta o informacje, @container wysyła zapytania do kontenera nadrzędnego, który spełnia określone kryteria.

W panelu Elementy kliknij element DOM z regułą @container. Narzędzia deweloperskie wyświetlą teraz informacje o regule @container w panelu Style. Kliknij go, aby edytować rozmiar. W panelu Style wyświetlają się też odpowiednie informacje o kontenerze. Najedź na niego kursorem, aby wyróżnić element kontenera na stronie i sprawdzić jego rozmiar. Kliknij go, aby wybrać element kontenera.

Funkcja zapytań o kontener jest obecnie w wersji eksperymentalnej. Aby ją przetestować, włącz flagę #enable-container-queries w sekcji chrome://flags.

Problem w Chromium: 1146422

Podgląd pakietu internetowego w panelu Sieć

Pakiet internetowy to format pliku służący do enkapsulacji co najmniej 1 zasobu HTTP w jednym pliku. Zawartość pakietu internetowego możesz teraz wyświetlić w panelu Sieć.

Funkcja pakietu internetowego jest obecnie eksperymentalna. Aby przetestować tę funkcję, włącz flagę #enable-experimental-web-platform-features w sekcji chrome://flags.

Problem w Chromium: 1182537

Debugowanie interfejsu Attribution Reporting API

Błędy interfejsu Attribution Reporting API są teraz zgłaszane na karcie Problemy.

Attribution Reporting to nowy interfejs API, który pomaga mierzyć, kiedy działanie użytkownika (np. kliknięcie lub wyświetlenie reklamy) prowadzi do konwersji, bez używania identyfikatorów w witrynach.

Problem z Chromium: 1190735

Lepsza obsługa ciągów znaków w konsoli

Nowe menu kontekstowe w konsoli umożliwia skopiowanie dowolnego ciągu znaków jako treści, literału JavaScript lub literału JSON.

W Chrome 90 narzędzia deweloperskie zaktualizowały konsolę, aby zawsze formatować ciągi wyjściowe jako prawidłowe literały JSON. Deweloperzy zgłosili nam, że ta zmiana może być myląca. Niektórzy uważają, że liczba znaków ucieczki jest zbyt duża i sprawia, że dane wyjściowe są nieczytelne.

Konsola formatuje teraz ciągi wyjściowe jako prawidłowe literały JavaScriptu i udostępnia 3 opcje kopiowania ciągów. Opcja Kopiuj jako literał JavaScript spowoduje zmianę znaczenia odpowiednich znaków specjalnych i umieszczenie ciągu znaków w apostrofach, cudzysłowach lub odwrotnych apostrofach w zależności od zawartości ciągu znaków. Kopiuj zawartość ciągu znaków kopiuje do schowka zawartość ciągu znaków w formie surowej (w tym nowe wiersze i inne znaki specjalne). Na koniec opcja Kopiuj ciąg znaków jako literał JSON formatuje ciąg znaków jako prawidłowy literał JSON i kopiuje go do schowka.

Problem w Chromium: 1208389

Ulepszone debugowanie CORS

Błędy TypeError związane z CORS w konsoli są teraz połączone z panelem Sieć i kartą Problemy.

Kliknij 2 nowe ikony obok komunikatu o błędzie związanym z CORS, aby wyświetlić żądanie sieciowe, lub dowiedz się więcej o komunikacie o błędzie i uzyskaj potencjalne rozwiązania na karcie Problemy.

Problem w Chromium: 1213393

Lighthouse 8.1

Panel Lighthouse działa teraz w wersji 8.1.

Jeśli Twoja witryna udostępnia mapy źródeł Lighthouse, poszukaj przycisku Wyświetl mapę drzewa, aby zobaczyć podział wysłanego kodu JavaScript z możliwością filtrowania według rozmiaru i pokrycia podczas wczytywania.

Raport zawiera też nowy filtr danych (patrz filtr Pokaż audyty dotyczące na zrzucie ekranu). Wybierz rodzaj danych, na których chcesz się skupić, aby wyświetlić możliwości i diagnostykę najbardziej przydatne do poprawy tylko tych danych.

W kategorii Skuteczność wprowadziliśmy kilka zmian w ocenianiu, aby dostosować ją do innych narzędzi do pomiaru skuteczności i lepiej odzwierciedlać stan internetu.

Pełną listę zmian znajdziesz w informacjach o wersji.

Problem w Chromium: 772558

Wyświetlanie adresu URL nowej notatki w panelu Manifest

W panelu Manifest wyświetli się nowy adres URL notatki.

Obecnie w ChromeOS (CrOS) aplikacje Chrome i aplikacje na Androida, które deklarują możliwość „nowej notatki”, mogą być wybrane jako aplikacja do robienia notatek w ustawieniach rysika (wyświetlanych, jeśli urządzenie z ChromeOS było używane z rysikiem). Gdy aplikacja jest wybrana jako aplikacja do robienia notatek, można ją uruchomić za pomocą przycisku „Utwórz notatkę” na palecie rysika. Dodanie pola new-note-url w pliku manifestu aplikacji jest częścią prac nad dodaniem równoważnej funkcji do aplikacji internetowych.

Problem w Chromium: 1185678

Poprawione selektory dopasowywania CSS

W narzędziach deweloperskich naprawiono selektory pasujące do CSS, które nie działały w ostatniej wersji.

Selektory rozdzielone przecinkami w panelu Style są kolorowane w zależności od tego, czy pasują do wybranego węzła DOM:

• Niepasująca część jest wyświetlana w kolorze jasnoszarym.
• Pasująca część selektora jest wyświetlana na czarno.

Problem w Chromium: 1219153

Formatowanie odpowiedzi JSON w panelu Sieć

W panelu Sieć możesz teraz formatować odpowiedzi JSON.

Otwórz odpowiedź JSON w panelu Sieć i kliknij ikonę {}, aby ją sformatować.

Błąd w Chromium: 998674

Pobieranie kanałów podglądu

Rozważ używanie Chrome w wersji Canary, deweloperskiej lub beta jako domyślnej przeglądarki do programowania. Te kanały wersji testowych zapewniają dostęp do najnowszych funkcji Narzędzi deweloperskich, umożliwiają testowanie najnowocześniejszych interfejsów API platformy internetowej i pomagają znajdować problemy w witrynie, zanim zrobią to użytkownicy.

Skontaktuj się z zespołem Narzędzi deweloperskich w Chrome

Skorzystaj z tych opcji, aby porozmawiać o nowych funkcjach, aktualizacjach lub innych kwestiach związanych z Narzędziami deweloperskimi.

• Prześlij nam opinię i prośby o dodanie funkcji na stronie crbug.com.
• Zgłoś problem z Narzędziami deweloperskimi, klikając more_vert Więcej opcji > Pomoc > Zgłoś problem z Narzędziami deweloperskimi w Narzędziach deweloperskich.
• Wyślij tweeta do @ChromeDevTools.
• Zostawiaj komentarze pod filmami na YouTube z serii „Co nowego w Narzędziach deweloperskich” lub filmami z serii „Wskazówki dotyczące Narzędzi deweloperskich”.

Co nowego w Narzędziach deweloperskich

Lista wszystkich tematów omówionych w serii Nowości w Narzędziach deweloperskich.