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

Uproszczony pasek filtrów w panelu Sieć

Zmieniliśmy wygląd paska filtrowania, aby ułatwić filtrowanie żądań i usprawnić panel Sieć.

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

Nowy pasek filtrowania zawiera dwa menu: jedno do wyboru typu żądań, drugie do ukrywania adresów URL danych i rozszerzeń lub tylko do wyświetlania zablokowanych plików cookie i żądań oraz żądań innych firm. Oba menu obsługują wybór wielokrotny.

Aby natychmiast przywrócić stary pasek filtrowania, wyłącz Ustawienia Ustawienia > Eksperymenty > check_box_outline_blank Nowy wygląd paska filtrowania w panelu Sieć

Podziel się swoją 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łę CSS @font-palette-values. Pozwala dostosować domyślne wartości właściwości font-palette.

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

Problem z Chromium: 1501781.

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

Elementy > Funkcja Style rozpatruje teraz właściwość niestandardową, która jest zastępczą innej właściwości niestandardowej.

Problem z Chromium: 1499265.

Ulepszona obsługa mapy źródeł

Wybierz Ustawienia Ustawienia > Eksperymenty > check_box Poprawianie nazw zmiennych w wyrażeniach przy użyciu map źródłowych jest domyślnie włączone.

Narzędzia deweloperskie korzystają z 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ójną ocenę oryginalnych nazw zmiennych w Narzędziach deweloperskich, w tym:

• Wyrażenia w konsoli i sugestie autouzupełniania

  

• Aktywne wyrażenia

  

• Obejrzyj wyrażenia

  

• warunkowe punkty przerwania i punkty logowania;

  

Więcej informacji znajdziesz w odpowiedniej dokumentacji RFC.

Problem z Chromium: 1444349.

Ulepszenia panelu wydajności

Ścieżka interakcji rozszerzonych

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

Dodatkowo po najechaniu kursorem na interakcję zobaczysz przydatną etykietkę ze szczegółowymi informacjami o czasach.

Problem z Chromium: 1495751.

Zaawansowane filtrowanie na kartach Od dołu w górę, Drzewo połączeń i Dziennik zdarzeń

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

• match_case Uwzględniaj wielkość liter.
• regular_expression Wyrażenie regularne.
• match_word Dopasowanie do całego słowa.

Aby pomóc Ci zachować kontekst, do filtra na karcie Od dołu pasują teraz tylko elementy najwyższego poziomu. Wcześniej filtr pasował do każdego węzła.

Problem z Chromium: 1496355.

Znaczniki wcięć w panelu Źródła

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

Problem z Chromium: 1479986.

Przydatne etykietki dotyczące zastąpionych nagłówków i zawartości w panelu Sieć

Gdy najedziesz kursorem na fioletową kropkę obok kart Nagłówki i Odpowiedź żądania, panel Sieć wyświetla teraz etykietki. Etykietki informują, co zostało zastąpione przez Narzędzia deweloperskie.

Problem z Chromium: 1469776.

Nowe opcje w menu poleceń umożliwiające dodawanie i usuwanie wzorców blokowania żądań

W menu poleceń możesz teraz wpisywać polecenia służące do dodawania i usuwania wzorców blokowania żądań sieciowych.

Polecenie Dodaj otwiera okno umożliwiające określenie wzorca, a polecenie Usuń usuwa wszystkie wzorce bez otwierania panelu Blokowanie żądań sieciowych.

Eksperyment dotyczący naruszeń zasad CSP został usunięty

Eksperymentalna karta Naruszenia zasad CSP wprowadzona w wersji 89 została usunięta jako zbędna.

Aby szybko wyświetlić szczegóły CSP, otwórz Aplikacja > Ramki > Content Security Policy (CSP) –

Dodatkowo w panelu Problemy znajdują się informacje o naruszeniach zasad CSP.

Lighthouse 11.3.0

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

Podstawowe informacje na temat korzystania z panelu Lighthouse w Narzędziach deweloperskich znajdziesz w artykule Lighthouse: optymalizacja szybkości witryny.

Problem z Chromium: 772558.

Ułatwienia dostępu

W tej wersji ulepszyliśmy ułatwienia dostępu:

• W sekcji Sieć > Ładunek. Teraz możesz naciskać klawisz Tab, aby przechodzić do przycisków Wyświetl źródło i Wyświetlać zakodowane w adresie URL przyciski, a następnie naciśnij Enter lub spację, aby wywołać odpowiednie działanie.
• Aby uniknąć nieporozumień, linki prowadzące do skryptów, które nie są już dostępne dla Debugera w Konsoli, są wyszarzone i nie można ich kliknąć.
• w drzewach nawigacyjnych, takich jak drzewo w sekcji Źródła > Strona, klawisz Enter teraz rozwija i zwija węzły z elementami podrzędnymi.

Problemy z Chromium: 1338391, 1500662, 1420362.

Różne wyróżnienia

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

• Działanie. Jeśli nie uda się zarejestrować, możesz teraz pobrać nieprzetworzone zdarzenia logu czasu 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 jest też zamykana po dwukrotnym naciśnięciu.
• Zasoby dla deweloperów. Naprawiliśmy błąd, który uniemożliwiał zgłaszanie zasobów CSS i związanych z nimi problemów (1420362).
• Elementy:
  • Naprawiliśmy błąd sprawdzania elementów w elementach iframe (1453375).
  • Wynikowy. Naprawiliśmy błąd, który uniemożliwiał renderowanie wartości domyślnych (1499882).
  • Wyszukiwarka. Naprawiliśmy błąd, który uniemożliwiał obliczanie liczby dopasowań w przypadku krótkich zapytań zawierających 1 lub 2 znaki (1416457).
• Konsola. Teraz poprawnie analizuje wyrażenia regularne, które w polu Filtr (1346936) kończą się znakiem zmiany znaczenia.
• Ustawienia > Obszar roboczy. Naprawiliśmy błąd, który uniemożliwiał dodawanie wykluczonego folderu (1503580).
• Sieć > Podgląd. Teraz renderuje obrazy za pomocą identyfikatorów URI data: (1381791).
• Pamięć. Do paska działań (1275407) dodaliśmy prawidłowe przyciski przesyłania i pobierania zapisanych plików.

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   > Pomoc > Zgłoś problemy z Narzędziami deweloperskimi w Narzędziach deweloperskich.
• Opublikuj tweeta na stronie @ChromeDevTools.
• Napisz komentarz w filmach w YouTube o nowościach w Narzędziach deweloperskich lub o 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.