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, która jest zastępnikiem innej właściwości niestandardowej, jest teraz rozwiązywana w sekcji Elementy > Style.

Stan przed i po rozwiązaniu właściwości niestandardowej jako wartości zastępczej innej właściwości niestandardowej.

Problem z Chromium: 1499265.

Ulepszona obsługa mapy źródłowej

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

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 sprawdzanie 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 ścieżce 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 tooltipy dotyczące zastąpionych nagłówków i treści w panelu Sieć,

Gdy najedziesz kursorem na fioletową kropkę obok kart Nagłówki i Odpowiedź w panelu Sieć, pojawią się informacje. 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ń umożliwiające dodawanie i usuwanie 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 naruszenia CSP, wprowadzona w wersji 89, została usunięta, ponieważ jest 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. W razie niepowodzenia nagrywania możesz teraz pobrać nieprzetworzone zdarzenia z wykrywania 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 raportowanie 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 obliczenie 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 czynności odpowiednie przyciski i  (1275407).

Pobieranie kanałów podglądu

Rozważ użycie jako domyślnej przeglądarki deweloperskiej wersji Canary, Dev lub Beta przeglądarki Chrome. 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ędziach deweloperskich.