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

Sofia Emelianova
Sofia Emelianova
GitHub

Uproszczony pasek filtrów w panelu Sieć

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

Odpowiedni eksperyment był domyślnie włączony w tej wersji, ale zostanie cofnięty. Postępy możesz śledzić na stronie crbug.com/1523150.

Nowy pasek filtrów ma 2 menu: jedno do wybierania 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ń pochodzących od 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ć.

Przed i po uproszczeniu paska filtra w panelu Sieć.

Swoją opinię o tej funkcji możesz przesłać na stronie crbug.com/1500573.

Problem w Chromium: 1486431.

Ulepszenia elementów

@font-palette-values – pomoc

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

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

Sekcja @font-palette-values w stylach.

Problem w Chromium: 1501781.

Obsługiwany przypadek: właściwość niestandardowa jako rezerwowa dla innej właściwości niestandardowej

W sekcji Elementy > Style jest teraz rozwiązywana właściwość niestandardowa, która jest wartością domyślną innej właściwości niestandardowej.

Wartości przed i po rozwiązaniu właściwości niestandardowej jako rezerwowej dla innej właściwości niestandardowej.

Problem z Chromium: 1499265.

Ulepszona obsługa mapy źródłowej

Ustawienia > Eksperymenty > Rozwiązywanie nazw zmiennych w wyrażeniach za pomocą map źródłowych jest domyślnie włączone.

Narzędzia deweloperskie używają map źródeł, aby umożliwić Ci debugowanie oryginalnego kodu w panelach Źródła i Zakres nawet po jego połączeniu, zminifikowaniu lub skompilowaniu. Ten eksperyment umożliwia spójną ocenę oryginalnych nazw zmiennych w Narzędziach deweloperskich, m.in.:

Więcej informacji znajdziesz w odpowiednim dokumencie RFC.

Problem w Chromium: 1444349.

Ulepszenia panelu wydajności

Ścieżka Ulepszone interakcje

Ścieżka Skuteczność > Interakcje zawiera wąsy, które wskazują opóźnienia w danych wejściowych i prezentacji na granicach czasu przetwarzania.

Przed i po dodaniu wąsów do ścieżki Interakcje.

Gdy najedziesz wskaźnikiem myszy na interakcję, zobaczysz przydatną etykietkę z informacjami o czasie.

Problem w Chromium: 1495751.

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

Karty Od dołu, Drzewo wywołań i Dziennik zdarzeń w panelu Wydajność mają 3 nowe przyciski do zaawansowanego filtrowania:

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

3 nowe przyciski do filtrowania zaawansowanego.

Aby ułatwić zachowanie kontekstu, na karcie Od dołu do góry do filtra pasują teraz 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

Edytor w panelu Źródła oznacza teraz wcięte bloki kodu pionowymi liniami dla Twojej wygody.

Przed i po wciętych blokach kodu znajdują się pionowe linie.

Problem w Chromium: 1479986.

Przydatne etykietki z informacjami o zastąpionych nagłówkach i treściach w panelu Sieć

W panelu Sieć wyświetlają się teraz etykietki, gdy najedziesz kursorem na fioletową ikonę kropki obok kart Nagłówki i Odpowiedź w przypadku żądania. Etykietki informują o tym, co zostało zastąpione przez Narzędzia deweloperskie.

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

Problem w Chromium: 1469776.

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

Możesz teraz wpisywać polecenia, aby dodawać lub usuwać wzorce blokowania żądań sieciowych w menu poleceń.

Przed i po dodaniu nowych poleceń do dodawania lub usuwania wzorców blokowania sieci.

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

Eksperyment dotyczący naruszeń zasad CSP zostanie usunięty.

Karta eksperymentalna Naruszenia CSP wprowadzona w wersji 89 została usunięta jako zbędna.

Aby szybko sprawdzić szczegóły CSP, otwórz Aplikacja > Ramki > Content Security Policy (CSP).

Standard Content Security Policy w panelu Aplikacja.

Dodatkowo panel Problemy zgłasza naruszenia CSP.

Standard Content Security Policy w panelu Aplikacja.

Lighthouse 11.3.0

Panel Lighthouse działa teraz w wersji 11.3.0. Zobacz pełną listę zmian. Wśród istotnych zmian jest możliwość generowania raportów o stronach 404.

Podstawowe informacje o korzystaniu z panelu Lighthouse w Narzędziach deweloperskich znajdziesz w artykule Lighthouse: optymalizacja szybkości witryny.

Problem w Chromium: 772558.

Ułatwienia dostępu

Ta wersja zawiera następujące ulepszenia ułatwień dostępu:

  • W sekcji Sieć > Ładunek możesz teraz za pomocą klawisza Tab przejść do przycisków Wyświetl źródło i Wyświetl zakodowany adres URL, a następnie nacisnąć Enter lub spację, aby wywołać odpowiednie działanie.
  • Aby uniknąć nieporozumień, w konsoli linki do skryptów, które nie są już dostępne dla debugera, są teraz wyszarzone i nie można ich kliknąć.
  • W drzewach nawigacyjnych, np. w drzewie w sekcji Źródła > Strona, klawisz Enter rozwija i zwija teraz węzły z elementami podrzędnymi.

Problemy z Chromium: 1338391, 1500662, 1420362.

Różne wyróżnione informacje

Oto kilka ważnych poprawek i ulepszeń w tej wersji:

  • Działanie. Jeśli nagrywanie się nie powiedzie, możesz pobrać nieprzetworzone zdarzenia śledzenia i spróbować ustalić, co poszło nie tak (commit).
  • Skrót Pokaż konsolę (Ctrl+` na Macu, Ctrl++ w systemach Windows i Linux) nie tylko otwiera Konsolę, ale też zamyka ją po ponownym naciśnięciu.
  • Materiały dla deweloperów Naprawiono błąd, który uniemożliwiał raportowanie zasobów CSS i ich problemów (1420362).
  • Elementy:
    • Naprawiliśmy błąd związany ze sprawdzaniem elementów w elementach iframe (1453375).
    • Obliczone Naprawiliśmy błąd, który uniemożliwiał renderowanie wartości domyślnych (1499882).
    • Wyszukiwarka Naprawiono błąd, który uniemożliwiał obliczanie liczby dopasowań w przypadku krótkich zapytań składających się z 1 lub 2 znaków (1416457).
  • Konsola Teraz prawidłowo analizuje wyrażenia regularne kończące się znakiem ucieczki w polu Filtr (1346936).
  • Ustawienia > Workspace. Naprawiliśmy błąd, który uniemożliwiał dodanie wykluczonego folderu (1503580).
  • Sieć > Podgląd. Obrazy są teraz renderowane za pomocą identyfikatorów URI data: (1381791).
  • Pamięć Dodano odpowiednie przyciski wczytywania i zapisywania na pasku działań (1275407).

Pobieranie kanałów podglądu

Rozważ używanie Chrome w wersji Canary, deweloperskiej lub beta jako domyślnej przeglądarki do programowania. Te kanały wersji testowych zapewniają dostęp do najnowszych funkcji Narzędzi deweloperskich, umożliwiają testowanie najnowocześniejszych interfejsów API platformy internetowej i pomagają znajdować problemy w witrynie, zanim zrobią to użytkownicy.

Kontakt z zespołem Narzędzi deweloperskich w Chrome

Skorzystaj z tych opcji, aby porozmawiać o nowych funkcjach, aktualizacjach lub innych kwestiach związanych z Narzędziami deweloperskimi.

Co nowego w Narzędziach deweloperskich

Lista wszystkich tematów omówionych w serii Nowości w Narzędziach deweloperskich.