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

Jecelyn Yeen

Edytowanie zapytań kontenera CSS w panelu Styl

Zapytania kontenera CSS możesz teraz wyświetlać i edytować w panelu Style.

Zapytania dotyczące kontenera zapewniają znacznie bardziej dynamiczne podejście do układu elastycznego. Reguła at-rule @container działa podobnie jak zapytanie o multimedia z wartością @media. Jednak zamiast wysyłać zapytanie o informacje dotyczące widoku i agenta użytkownika, @container wysyła zapytanie do kontenera nadrzędnego, który spełnia określone kryteria.

W panelu Elementy kliknij element DOM z at-rule @container. W Narzędziach deweloperskich informacje o @container będą teraz wyświetlane w panelu Style. Kliknij go, aby edytować rozmiar. Na panelu Style wyświetlane są też informacje o odpowiednich kontenerach. Najechanie na niego spowoduje podświetlenie elementu kontenera na stronie i sprawdzenie jego rozmiaru. Kliknij go, aby wybrać element kontenera.

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

Problem z Chromium: 1146422

Podgląd pakietu internetowego w panelu Sieć

Web Bundle to format pliku umożliwiający umieszczenie co najmniej 1 zasobu HTTP w jednym pliku. Teraz możesz wyświetlić podgląd treści pakietu internetowego w panelu Sieć.

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

Problem z Chromium: 1182537

Debugowanie interfejsu Attribution Reporting API

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

Raporty atrybucji to nowy interfejs API, który pomaga mierzyć, czy działanie użytkownika (np. kliknięcie lub wyświetlenie reklamy) prowadzi do konwersji, bez używania identyfikatorów między witrynami.

Problem z Chromium: 1190735

Lepsze obsługiwanie ciągów znaków w Konsoli

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

W Chrome 90 w narzędziach dla programistów zaktualizowano konsolę, aby zawsze formatowała dane wyjściowe ciągu jako poprawne literały JSON. Otrzymaliśmy od deweloperów opinię, że ta zmiana może być myląca, ponieważ niektórzy uważają, że ilość znaków ucieczki jest zbyt duża i utrudnia odczytywanie danych.

Konsola formatuje teraz dane wyjściowe ciągu jako poprawne literały JavaScriptu, a dodatkowo udostępnia 3 opcje kopiowania ciągu. Opcja Kopiuj jako literał JavaScript spowoduje uciekanie odpowiednich znaków specjalnych i opakowanie ciągu znaków w cudzysłowie proste, cudzysłowie podwójne lub cudzysłowie łamańce w zależności od zawartości ciągu znaków. Zamiast tego Kopiuj zawartość ciągu znaków kopiuje do schowka surową zawartość ciągu znaków (w tym nowe wiersze i inne znaki specjalne) bez zmian. Na koniec Kopiuj jako literał JSON sformatuje ciąg znaków jako prawidłowy literał JSON i skopiuje go do schowka.

Problem z Chromium: 1208389

Ulepszone debugowanie CORS

Błędy typu TypeError związane z CORS w Konsoli są teraz powiązane z kartą Problemy i panelem Sieć.

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

Problem z Chromium: 1213393

Lighthouse 8.1

Panel Lighthouse korzysta teraz z Lighthouse 8.1.

Jeśli Twoja witryna udostępnia mapy źródeł w Lighthouse, poszukaj przycisku Wyświetl mapę drzewa, aby zobaczyć podział przesłanego kodu JavaScript, który można filtrować według rozmiaru i zasięgu podczas wczytywania.

Raport zawiera też nowy filtr danych (na zrzucie ekranu widać filtr Pokaż audyty, które dotyczą). Wybierz dane, aby skupić się na możliwościach i diagnozach, które są najbardziej przydatne do poprawy tylko tych danych.

W kategorii skuteczności wprowadzono kilka zmian w punktacji, aby dostosować ją do innych narzędzi do pomiaru skuteczności i lepiej odzwierciedlać stan sieci.

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

Problem z Chromium: 772558

Wyświetlanie adresu URL nowej notatki w panelu Manifest

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

Obecnie w ChromeOS (CrOS) aplikacje Chrome i aplikacje na Androida, które deklarują obsługę funkcji „nowy-notatnik”, mogą być wybrane jako aplikacja do robienia notatek w ustawieniach rysika (wyświetla się, jeśli urządzenie z ChromeOS było używane z rysikiem). Po wybraniu aplikacji do tworzenia notatek można ją uruchomić za pomocą przycisku „Utwórz notatkę” na palecie rysika. Dodawanie pola new-note-url w pliku manifestu aplikacji jest częścią naszych działań na rzecz dodania tej samej funkcjonalności do aplikacji internetowych.

Problem z Chromium: 1185678

Poprawiono selektory pasujące do arkusza CSS

W DevTools naprawiono selektory pasujące do arkusza CSS, które nie działały w poprzedniej wersji.

Selektory rozdzielone przecinkami w panelu Styl są różnie pokolorowane w zależności od tego, czy pasują do wybranego węzła DOM:

• Niedopasowana część jest wyświetlana na szaro.
• Pasujący element selektora jest wyświetlany na czarno.

Problem z Chromium: 1219153

Formatowanie odpowiedzi JSON w panelu Sieć

Odpowiedzi JSON możesz teraz wygodnie wyświetlać w panelu Sieć.

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

Chromium bug: 998674

Pobieranie kanałów podglądu

Rozważ użycie jako domyślnej przeglądarki deweloperskiej przeglądarki Chrome w wersji Canary, Dev lub Beta. Te kanały wersji wstępnej zapewniają dostęp do najnowszych funkcji DevTools, umożliwiają testowanie najnowocześniejszych interfejsów API platformy internetowej i pomagają znaleźć problemy w witrynie, zanim zrobią to użytkownicy.

Kontakt z zespołem Narzędzi deweloperskich w Chrome

Aby omówić nowe funkcje, aktualizacje lub inne kwestie związane z Narzędziami deweloperskimi, skorzystaj z tych opcji.

• Przesyłaj opinie 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.
• Wyślij tweeta do @ChromeDevTools.
• Dodaj komentarze do filmów w YouTube z serii „Co nowego w Narzędziach deweloperskich” lub Wskazówki dotyczące Narzędzi deweloperskich.

Co nowego w Narzędziach deweloperskich

Lista wszystkich tematów omawianych w cyklu artykułów Co nowego w Narzędziech deweloperskich.