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

Jecelyn Yeen

Zapytania dotyczące kontenera CSS, które można edytować w panelu Style

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

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

W panelu Elementy kliknij element DOM z regułą @container. W Narzędziach deweloperskich w panelu Style pojawi się informacja @container. Kliknij ją, aby edytować rozmiar. W panelu Style pojawią się również informacje o odpowiednich kontenerach. Najedź na niego kursorem, aby zaznaczyć element kontenera na stronie i sprawdzić rozmiar kontenera. Kliknij ją, aby wybrać element kontenera.

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

Zapytania dotyczące kontenera CSS, które można edytować w panelu Style

Problem z Chromium: 1146422

Podgląd pakietu internetowego w panelu Sieć

Pakiet sieciowy to format pliku służący do umieszczania w jednym pliku danych o zasobach HTTP (lub wielu). Podgląd treści pakietu internetowego możesz teraz wyświetlić w panelu Sieć.

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

podgląd pakietu internetowego

Problem z 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 różnych 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 pozwala skopiować dowolny ciąg znaków jako treść, literał JavaScript lub literał JSON.

Nowe menu kontekstowe w konsoli

W Chrome 90 narzędzie deweloperskie zaktualizowało konsolę, aby zawsze formatować dane wyjściowe ciągu znaków jako prawidłowe literały JSON. Z opinii deweloperów otrzymaliśmy informację, że ta zmiana może być niezrozumiała. Niektórzy uważają, że zbyt duża liczba zmian wprowadzonych w wynikach sprawia, że wynik jest nieczytelny.

Konsola formatuje teraz dane wyjściowe ciągu znaków jako prawidłowe literały JavaScript i udostępnia 3 opcje kopiowania ciągu znaków. Opcja Kopiuj jako literał JavaScript powoduje zmianę znaczenia odpowiednich znaków specjalnych i zawijanie ciągu znaków w pojedyncze, podwójne cudzysłowy lub grawisy (w zależności od treści ciągu znaków). Opcja Kopiuj zawartość ciągu znaków powoduje skopiowanie do schowka nieprzetworzonej zawartości ciągu znaków (wraz ze znakami nowego wiersza i innych znaków specjalnych). Na koniec Kopiuj jako literał JSON formatuje ciąg znaków jako prawidłowy literał JSON i kopiuje go do schowka.

Problem z Chromium: 1208389

Ulepszone debugowanie CORS

Błędy typu 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 dotyczącego CORS, aby wyświetlić żądanie sieciowe, lub zapoznaj się z treścią komunikatu o błędzie i poznaj możliwe rozwiązania na karcie Problemy.

Ikony obok komunikatu o błędzie dotyczącego CORS

Problem z Chromium: 1213393

Lighthouse 8.1

Panel Lighthouse korzysta teraz z Lighthouse 8.1.

Latarnia morska

Jeśli Twoja witryna udostępnia mapy źródeł w Lighthouse, kliknij przycisk Wyświetl diagram, aby zobaczyć zestawienie dostarczonego kodu JavaScript, które można filtrować według rozmiaru i zasięgu po wczytaniu.

Raport zawiera też nowy filtr danych (zapoznaj się z filtrem Pokaż odpowiednie kontrole na zrzucie ekranu). Wybierz dane, aby skoncentrować się na możliwościach i diagnostyce, które są najbardziej przydatne w ulepszaniu tylko tego wskaźnika.

Wprowadziliśmy w kategorii skuteczności szereg zmian w wynikach, aby dostosować je do innych narzędzi do zarządzania wydajnością i lepiej odzwierciedlić stan internetu.

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

Problem z Chromium: 772558

Wyświetl adres URL nowej notatki w panelu pliku manifestu

W okienku pliku manifestu pojawi się nowy adres URL notatki.

Obecnie w systemie ChromeOS (CrOS), aplikacje Chrome i aplikacje na Androida, które deklarują „nową notatkę”, można wybrać w ustawieniach rysika jako aplikację do sporządzania notatek (to ustawienie pojawia się, jeśli urządzenie CrOS było używane z rysikiem). Gdy wybierzesz aplikację do sporządzania notatek, można ją uruchomić, klikając przycisk „Utwórz notatkę” na palecie rysika. Dodanie pola new-note-url do pliku manifestu aplikacji jest częścią starań o dodanie równoważnych funkcji do aplikacji internetowych.

Adres URL nowej notatki w panelu pliku manifestu

Problem z Chromium: 1185678

Poprawiono selektory dopasowania CSS

Naprawiono selektory dopasowania CSS w Narzędziach deweloperskich. W ostatniej wersji narzędzie to nie działało.

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

  • Niedopasowany fragment jest wyświetlany w jasnoszarym kolorze.
  • Pasujący fragment selektora jest wyświetlany na czarno.

Selektory dopasowania CSS

Problem z Chromium: 1219153

Wysokiej jakości odpowiedzi JSON w panelu Sieć

Możesz teraz odpowiednio wydrukować odpowiedzi JSON w panelu Sieć.

Otwórz odpowiedź JSON w panelu Network (Sieć) i kliknij ikonę {}, aby odpowiednio ją wydrukować.

Wysokiej jakości odpowiedzi JSON w panelu Sieć

Błąd Chromium: 998674

Pobieranie kanałów podglądu

Jako domyślnej przeglądarki dla programistów możesz używać Chrome Canary, Dev lub Beta. Te kanały podglądu dają dostęp do najnowszych funkcji Narzędzi deweloperskich, umożliwiają testowanie najnowocześniejszych interfejsów API platform internetowych oraz wykrywanie problemów w witrynie, zanim zdołają zrobić użytkownicy.

Kontakt z zespołem Narzędzi deweloperskich w Chrome

Użyj poniższych opcji, aby omówić nowe funkcje i zmiany w poście lub wszelkie inne kwestie związane z Narzędziami dla deweloperów.

  • Prześlij nam sugestię lub opinię na stronie crbug.com.
  • Aby zgłosić problem z Narzędziami deweloperskimi, kliknij Więcej opcji   Więcej   > Pomoc > Zgłoś problemy z Narzędziami deweloperskimi.
  • zatweetuj na @ChromeDevTools.
  • Napisz komentarz o nowościach w filmach w YouTube dostępnych w Narzędziach deweloperskich lub z poradami dotyczącymi narzędzi dla deweloperów w filmach w YouTube.

Co nowego w Narzędziach deweloperskich

Lista wszystkich omówionych funkcji w serii Co nowego w Narzędziach deweloperskich.

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

101 Chrome

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

Subskrypcja Chrome 82 została anulowana.

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