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

Sofia Emelianova
Sofia Emelianova
GitHub

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ć.

Przed i po skróceniu 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.

Sekcja @font-palette-values w Stylach.

Problem z Chromium: 1501781.

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

W sekcji Elementy > Style rozstrzyga się teraz właściwość niestandardowa, która jest zastępczą innej usługi niestandardowej.

Przed i po rozwiązanie problemu z właściwością niestandardową jako kreacji zastępczej z innej właściwości niestandardowej.

Problem z Chromium: 1499265.

Ulepszona obsługa mapy źródeł

Opcja Ustawienia Ustawienia > Eksperymenty > pole wyboru Popraw nazwy zmiennych w wyrażeniach, korzystając z map źródłowych.

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:

Więcej informacji znajdziesz w odpowiedniej dokumentacji RFC.

Problem z Chromium: 1444349.

Ulepszenia panelu wydajności

Ścieżka interakcji rozszerzonych

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

Informacje o dodaniu wąsów do ścieżki interakcji (przed i po).

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.

Trzy nowe przyciski zaawansowanego filtrowania.

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.

Elementy kodu „przed” i „po nim” oznaczające z wcięciem bloki kodu liniami pionowymi.

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.

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

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.

Polecenia przed i po dodaniu nowych poleceń dodawania i usuwania wzorców blokowania sieci.

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 sprawdzić szczegóły CSP, wybierz Aplikacja > Ramki > Content Security Policy (CSP).

Content Security Policy (Polityka bezpieczeństwa treści) w panelu aplikacji.

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

Content Security Policy (Polityka bezpieczeństwa treści) w panelu aplikacji.

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 możesz teraz naciskać klawisz Tab, aby przechodzić do przycisków Wyświetl źródło i Wyświetl zakodowany adres URL, 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, np. w drzewie w sekcji Źródła > Strona, klawisz Enter 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   Więcej   > Pomoc > Zgłoś problemy z Narzędziami deweloperskimi.
  • Opublikuj tweeta na stronie @ChromeDevTools.
  • Napisz komentarz pod filmem dotyczącym nowości w Narzędziach deweloperskich w Narzędziach deweloperskich w YouTube lub 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.

Chrome 127

Chrome 126

Chrome 125

Chrome 124

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

Chrome 101

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

Chrome 82 został anulowany.

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