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

Jecelyn Yeen

Edytowalne zapytania dotyczące kontenera CSS w panelu Style

Zapytania dotyczące kontenerów 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.

Edytowalne zapytania dotyczące kontenera CSS w panelu Style

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.

podgląd pakietu internetowego

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.

Błędy interfejsu Attribution Reporting API na karcie Problemy

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.

Nowe menu kontekstowe w konsoli

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.

Ikony obok komunikatu o błędzie związanego z CORS

Problem z Chromium: 1213393

Lighthouse 8.1

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

Latarnia morska

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) aplikacje Chrome i aplikacje na Androida, w przypadku których zadeklarowano funkcję „nowych notatek”, można wybrać w ustawieniach rysika jako aplikację do robienia notatek (wyświetla się, jeśli urządzenie z CrOS było używane z rysikiem). Po wybraniu aplikacji do robienia notatek aplikację można uruchomić, klikając przycisk „Utwórz notatkę” na palecie rysika. Dodanie pola new-note-url do pliku manifestu aplikacji jest częścią starań mających na celu dodanie do aplikacji internetowych odpowiednich funkcji.

Nowy adres URL notatki w panelu pliku manifestu

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.

Selektory dopasowania CSS

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

Ładne drukowanie odpowiedzi JSON w panelu Sieć

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