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

Jecelyn Yeen

Edytowalne zapytania dotyczące kontenera CSS w panelu Style

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

Zapytania dotyczące kontenerów dają znacznie bardziej dynamiczne podejście do projektowania responsywnego. Reguła @container działa w podobny sposób jak zapytanie o multimedia z użyciem @media. Jednak zamiast wysyłać zapytania o widoczny obszar i klienta użytkownika, @container wysyła zapytanie do kontenera elementu nadrzędnego, który spełnia określone kryteria.

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

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

Problem z Chromium: 1146422

Podgląd pakietu internetowego w panelu Sieć

Pakiet internetowy to format pliku służący do hermetyzacji co najmniej jednego zasobu HTTP w pojedynczym pliku. Podgląd treści pakietu internetowego możesz teraz zobaczyć w panelu Sieć.

Funkcja pakietów internetowych jest obecnie w fazie eksperymentalnej. Aby przetestować działanie, włącz flagę #enable-experimental-web-platform-features w elemencie chrome://flags.

Problem z Chromium: 1182537

Debugowanie interfejsu Attribution Reporting API

Błędy Attribution Reporting API są teraz raportowane na karcie Problemy.

Attribution Reporting to nowy interfejs API, który pomoże Ci mierzyć, kiedy działanie użytkownika (takie jak kliknięcie lub wyświetlenie reklamy) prowadzi do konwersji, bez stosowania identyfikatorów w wielu 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ę tak, aby zawsze formatowała dane wyjściowe w postaci ciągów znaków jako prawidłowe literały JSON. Otrzymaliśmy opinie od deweloperów, że ta zmiana może być dezorientująca. Niektórzy uważają, że zbyt wiele sposobów zmiany znaczenia powoduje, że wyniki są nieczytelne.

Konsola formatuje teraz dane wyjściowe w postaci ciągów znaków jako prawidłowe literały JavaScript, a dodatkowo udostępnia 3 opcje kopiowania ciągu znaków. Opcja Kopiuj jako literał JavaScript umożliwia wyodrębnienie odpowiednich znaków specjalnych i umieszczanie ciągu znaków w cudzysłowach pojedynczych, podwójnych lub grawisowych, w zależności od zawartości ciągu znaków. Opcja Kopiuj zawartość ciągu znaków zamiast tego kopiuje do schowka nieprzetworzoną zawartość ciągu znaków (w tym nowe wiersze i inne znaki specjalne). Na koniec Kopiuj 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 typu związane z CORS w konsoli są teraz połączone z panelami Sieć i kartą Problemy.

Kliknij 2 nowe ikony obok komunikatu o błędzie dotyczącym CORS, aby wyświetlić żądanie sieciowe lub dowiedzieć się więcej o tym komunikacie i uzyskać informacje o potencjalnych rozwiązaniach na karcie Problemy.

Problem z Chromium: 1213393

Lighthouse 8.1

W panelu Lighthouse działa teraz Lighthouse w wersji 8.1.

Jeśli Twoja witryna udostępnia mapy źródeł w narzędziu Lighthouse, użyj przycisku Wyświetl diagram, aby zobaczyć podział przesłanego kodu JavaScript, który można filtrować według rozmiaru i pokrycia po wczytaniu.

Raport zawiera też nowy filtr danych (zapoznaj się z filtrem Pokaż istotne kontrole na zrzucie ekranu). Wybierz rodzaj danych, by skupić się na możliwościach i diagnostyce, które są najważniejsze z punktu widzenia poprawy tylko tego wskaźnika.

W kategorii Skuteczność wprowadziliśmy szereg zmian punktowych, aby lepiej dopasować ją do innych narzędzi do sprawdzania skuteczności oraz lepiej odzwierciedlić stan w internecie.

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

Problem w Chromium: 772558

Wyświetlaj adres URL nowej notatki w panelu pliku manifestu

W panelu pliku manifestu wyświetla się adres URL nowej notatki.

Obecnie w ChromeOS (CrOS), aplikacjach Chrome i aplikacjach na Androida, które zadeklarują „nową notatkę” funkcja może zostać wybrana jako aplikacja do robienia notatek w ustawieniach rysika (pojawi się, jeśli urządzenie CrOS było używane z rysikiem). Po wybraniu aplikacji do robienia notatek aplikację można uruchomić z poziomu palety rysika Przycisk Dodanie pola new-note-url do pliku manifestu aplikacji jest częścią starań mających na celu dodanie do aplikacji internetowych odpowiednich funkcji.

Problem w Chromium: 1185678

Poprawiono selektory dopasowania CSS

W Narzędziach deweloperskich naprawiono selektory dopasowania CSS. W ostatniej wersji funkcja nie działała.

Rozdzielone przecinkami selektory w panelu Style mają różne kolory w zależności od tego, czy pasują do wybranego węzła DOM:

• Część niedopasowana jest wyświetlana w kolorze jasnoszarym.
• Pasujący selektor jest wyświetlany na czarnym tle.

Problem z Chromium: 1219153

Ładne drukowanie odpowiedzi JSON w panelu Sieć

Możesz teraz stylizować odpowiedzi JSON w panelu Sieć.

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

Błąd Chromium: 998674

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.