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

Sofia Emelianova
Sofia Emelianova
GitHub

Uproszczony pasek filtrów w panelu Sieć

Pasek filtrów został przeprojektowany, aby ułatwić filtrowanie żądań i uporządkować panel Sieć.

Odpowiadający mu eksperyment został domyślnie włączony w tej wersji, ale zostanie przywrócony. Postęp możesz śledzić na stronie crbug.com/1523150.

Nowy pasek filtrów ma 2 menu: jedno do wyboru typów żądań, a drugie do ukrywania danych i adresów URL rozszerzeń lub wyświetlania tylko zablokowanych plików cookie i żądań oraz żądań innych firm. Oba menu obsługują wybieranie wielu elementów.

Aby natychmiast przywrócić stary pasek filtrów, wyłącz Ustawienia > Eksperymenty > Przeprojektowanie paska filtrów w panelu Sieć.

Stan przed i po uproszczeniu paska filtrów w panelu Sieć.

Zachęcamy do podzielenia się opinią na temat tej funkcji na stronie crbug.com/1500573.

Problem z Chromium: 1486431.

Ulepszenia elementów

@font-palette-values – pomoc

Panel Elementy obsługuje teraz regułę at-rule CSS @font-palette-values. Umożliwia dostosowywanie domyślnych wartości właściwości font-palette.

W sekcji Style kliknij wartość właściwości font-palette, a DevTools przeniesie Cię do sekcji @font-palette-values, w której możesz edytować wartości niestandardowe.

Sekcja @font-palette-values w sekcji Styl.

Problem z Chromium: 1501781.

Obsługiwany przypadek: niestandardowa właściwość jako wartość zastępcza innej niestandardowej właściwości

Właściwość niestandardowa w sekcji Elementy > Style jest teraz rozwiązywana jako wartość zastępcza innej właściwości niestandardowej.

Stan przed i po rozwiązaniu właściwości niestandardowej jako wartości domyślnej innej właściwości niestandardowej.

Problem z Chromium: 1499265.

Ulepszona obsługa mapy źródłowej

Ustawienia > Eksperymenty > Rozwiązuj nazwy zmiennych w wyrażeniach za pomocą map źródeł jest domyślnie włączone.

DevTools używa map źródeł, aby umożliwić debugowanie oryginalnego kodu w sekcji Źródła i Zakres, nawet po jego połączeniu, zminifikowaniu lub skompilowaniu. Ten eksperyment umożliwia spójne ocenianie nazw oryginalnych zmiennych w Narzędziach deweloperskich, m.in.:

Więcej informacji znajdziesz w odpowiednim dokumencie RFC.

Problem z Chromium: 1444349.

Ulepszenia panelu wydajności

Ścieżka Ulepszone interakcje

Na osi Skuteczność > Interakcje pojawiają się wąsy, które wskazują opóźnienia danych wejściowych i prezentacji w miejscach granic czasowych przetwarzania.

Dane przed i po dodaniu anten do ścieżki Interakcje.

Dodatkowo, gdy najedziesz kursorem na interakcję, zobaczysz pomocną etykietkę z szczegółami dotyczącymi czasu.

Problem z Chromium: 1495751.

Zaawansowane filtrowanie na kartach Od dołu, Drzewo wywołań i Dziennik zdarzeń

Na kartach Od dołu, Drzewo wywołań i Dziennik zdarzeń w panelu Wydajność pojawiły się 3 nowe przyciski do zaawansowanego filtrowania:

  • Uwzględnia wielkość liter.
  • Wyrażenie regularne.
  • Dopasuj do całego słowa.

3 nowe przyciski do filtrowania zaawansowanego

Aby ułatwić Ci zachowanie kontekstu, na karcie Od dołu dopasowujemy do filtra tylko elementy najwyższego poziomu. Wcześniej filtr pasował do każdego węzła.

Problem w Chromium: 1496355.

znaczniki wcięcia w panelu Źródła,

Dla Twojej wygody Edytor w panelu Źródła oznacza teraz wcięte bloki kodu za pomocą linii pionowych.

Stan przed i po zaznaczeniu wciętego bloku kodu za pomocą linii pionowych.

Problem z Chromium: 1479986.

przydatne teksty podpowiedzi dotyczące zastąpionych nagłówków i treści w panelu Sieć,

Panel Sieć wyświetla teraz etykietki, gdy najedziesz kursorem na fioletową kropkę obok kart Nagłówki i Odpowiedź w prośbie. Etykiety informują, co zostało zastąpione przez Narzędzia deweloperskie.

Nowe etykiety obok ikony fioletowej kropki na kartach Nagłówki i Odpowiedź.

Problem z Chromium: 1469776.

Nowe opcje menu poleceń dodawania i usuwania wzorów blokowania żądań

Teraz możesz wpisywać w Menu poleceń polecenia, aby dodawać lub usuwać wzorce blokowania żądań sieciowych.

Stan przed i po dodaniu nowych poleceń służących do dodawania lub usuwania wzorów blokowania sieci.

Polecenie Dodaj otwiera okno, w którym możesz określić wzór, a polecenie Usuń usuwa wszystkie wzorce bez otwierania panelu Blokowanie żądań sieciowych.

Usunięcie eksperymentu dotyczącego naruszeń zasad CSP

Eksperymentalna karta Znaki ostrzegawcze CSP, wprowadzona w wersji 89, została usunięta, ponieważ była zbędna.

Aby szybko wyświetlić szczegóły CSP, otwórz Aplikacja > Ramki > Zasady bezpieczeństwa treści (CSP).

Zasady Content Security Policy w panelu Aplikacja.

Dodatkowo w panelu Problemy są zgłaszane naruszenia zasad CSP.

Zasady Content Security Policy w panelu Aplikacja.

Lighthouse 11.3.0

Panel Lighthouse korzysta teraz z wersji Lighthouse 11.3.0. Zobacz pełną listę zmian. Jedną z najważniejszych zmian jest możliwość generowania raportów na stronach z błędem 404.

Podstawy korzystania z panelu Lighthouse w Narzędziach deweloperskich znajdziesz w artykule Lighthouse: optymalizacja szybkości witryny.

Problem z Chromium: 772558.

Ułatwienia dostępu

Ta wersja zawiera następujące ułatwienia dostępu:

  • W sekcji Sieć > Ładunek możesz teraz kliknąć przyciski pokaż źródło i pokaż kodowaną URL-em stronę, a potem nacisnąć Enter lub spację, aby wykonać odpowiednią czynność.
  • Aby uniknąć nieporozumień, w konsoli linki prowadzące do skryptów, które nie są już dostępne w Debuggerze, są wyszarzone i nie można ich kliknąć.
  • W drzewach nawigacyjnych, np. w Źródła > Strona, klawisz Enter umożliwia teraz rozwijanie i zwężanie węzłów z elementami podrzędnymi.

Problemy z Chromium: 1338391, 1500662, 1420362.

Inne najciekawsze momenty

Oto kilka istotnych poprawek i ulepszeń w tej wersji:

  • Działanie. Jeśli nagrywanie zakończy się niepowodzeniem, możesz teraz pobrać nieprzetworzone dane z pomiarów i spróbować dowiedzieć się, co poszło nie tak (commit).
  • Skrót Pokaż konsolę (Ctrl + ` na Macu, Ctrl + + w Windows i Linux) nie tylko otwiera konsolę, ale też ją zamyka, gdy zostanie naciśnięty po raz drugi.
  • Zasoby dla deweloperów. Usunięto błąd uniemożliwiający zgłaszanie zasobów CSS i problemów z nimi (1420362).
  • Elementy:
    • Naprawiono błąd związany z przeglądaniem elementów w elementach iframe (1453375).
    • Obliczone. Naprawiono błąd, który uniemożliwiał renderowanie wartości domyślnych (1499882).
    • Wyszukiwarka. Usunięto błąd uniemożliwiający obliczanie liczby dopasowań w przypadku krótkich zapytań zawierających 1 lub 2 znaki (1416457).
  • Konsola. Prawidłowo parsuje wyrażenia regularne, które kończą się ucieczką znaku w polu Filtr (1346936).
  • Ustawienia > Workspace. Naprawiono błąd uniemożliwiający dodanie wykluczonego folderu (1503580).
  • Sieć > Podgląd. Teraz renderuje obrazy za pomocą identyfikatorów URI data: (1381791).
  • Pamięć. Dodano do paska akcji odpowiednie przyciski i  (1275407).

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.

Co nowego w Narzędziach deweloperskich

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