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

Sofia Emelianova
Sofia Emelianova
GitHub

Uproszczony pasek filtrowania w panelu Sieć

Pasek filtrowania został zaprojektowany od nowa, aby ułatwić filtrowanie żądań i ułatwić Ci pracę w panelu Sieć.

Odpowiedni eksperyment został 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 2 menu: menu typu żądania, 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 wielokrotnego.

Aby natychmiast przywrócić stary pasek filtrowania, wyłącz ustawienia Ustawienia > Eksperymenty > check_box_outline_blank Zmiana wyglądu paska filtrowania w panelu Sieć.

Przed i po uproszczeniu paska filtrowania w panelu Sieć.

Możesz podzielić się z nami 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ć wartości domyślne właściwości font-palette (paleta czcionek).

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

Sekcja @font-palette-values w sekcji Style.

Problem z Chromium: 1501781.

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

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

Stan przed i po rozpoznaniu właściwości niestandardowej jako kreacji zastępczej z innej niestandardowej.

Problem z Chromium: 1499265.

Ulepszona obsługa mapy źródeł

Opcja Ustawienia Ustawienia > Eksperymenty > check_box Określ nazwy zmiennych w wyrażeniach przy użyciu map źródeł jest domyślnie włączona.

Narzędzia deweloperskie korzystają z map źródłowych, aby umożliwić debugowanie oryginalnego kodu w sekcji Źródła i Zakres nawet po połączeniu, zminimalizowaniu lub skompilowaniu go. Ten eksperyment pozwoli Ci w spójny sposób ocenić oryginalne nazwy 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 ulepszonych interakcji

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

Dodanie wąsów do ścieżki interakcji przed i po.

Poza tym po najechaniu kursorem na interakcję możesz zobaczyć pomocną etykietkę z informacjami o czasie.

Problem z Chromium: 1495751.

Zaawansowane filtrowanie na kartach Dół-Up, Drzewo połączeń i Dziennik zdarzeń

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

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

Trzy nowe przyciski do zaawansowanego filtrowania.

Aby ułatwić Ci zachowanie kontekstu, do filtra na karcie Od dołu pasują teraz tylko elementy najwyższego poziomu. Wcześniej filtr pasował do wszystkich węzłów.

Problem z Chromium: 1496355.

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

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

Przed i po oznaczeniu wciętych bloków kodu pionowymi liniami.

Problem z Chromium: 1479986.

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

Gdy najedziesz kursorem na fioletową ikonę obok kart Nagłówki i Odpowiedź żądania, w panelu Sieć pojawią się teraz etykietki. Etykietki wskazują, co zostało zastąpione przez Narzędzia deweloperskie.

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

Problem z Chromium: 1469776.

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

W menu poleceń możesz teraz wpisywać polecenia, aby dodać lub usunąć wzorce blokowania żądań sieciowych.

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

Polecenie Dodaj otwiera okno dialogowe, w którym można określić wzorzec, a polecenie Usuń powoduje usunięcie wszystkich wzorców bez otwierania panelu Blokowanie żądań sieciowych.

Eksperyment dotyczący naruszenia zasad CSP został usunięty

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

Aby szybko zobaczyć szczegółowe informacje na temat CSP, kliknij Aplikacja > Ramki > Content Security Policy (CSP).

Content Security Policy w panelu Application.

Przypadki naruszenia CSP są też zgłaszane w panelu Problemy.

Content Security Policy w panelu Application.

Lighthouse 11.3.0

Panel Lighthouse korzysta teraz z Lighthouse 11.3.0. Zobacz pełną listę zmian. Jedną z istotnych zmian jest możliwość generowania raportów na stronach 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

W tej wersji wprowadziliśmy te ulepszenia ułatwień dostępu:

  • Po wybraniu kolejno opcji Sieć > Ładunek możesz przechodzić między przyciskami Wyświetl źródło i Wyświetl zakodowany URL oraz nacisnąć Enter lub spację, aby wywołać odpowiednie działanie.
  • Aby uniknąć nieporozumień, linki prowadzące do skryptów, których debuger nie ma już w konsoli, są wyszarzone i nie można ich klikać.
  • 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.

Inne ważne informacje

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

  • Działanie. Jeśli rejestrowanie się nie powiedzie, możesz pobrać nieprzetworzone zdarzenia logu czasu i spróbować ustalić, co poszło nie tak (zatwierdź).
  • Skrót Pokaż konsolę (Ctrl + ` na Macu, Ctrl + + w systemie Windows i Linux) teraz nie tylko otwiera konsolę, ale także zamyka się po drugim naciśnięciu.
  • Zasoby dla programistów. Naprawiliśmy błąd, który uniemożliwiał zgłaszanie problemów z zasobami usługi porównywania cen (1420362).
  • Elementy:
    • Naprawiliśmy błąd z sprawdzaniem elementów w elementach iframe (1453375).
    • Obliczono. 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ń składających się z jednego lub dwóch znaków (1416457).
  • Konsola. Teraz w polu Filtr (1346936) są prawidłowo analizowane wyrażenia regularne kończące się znakiem zmiany znaczenia.
  • Ustawienia > Obszar roboczy. Naprawiono błąd, który uniemożliwiał dodanie wykluczonego folderu (1503580).
  • Sieć > Podgląd. Teraz renderuje obrazy z identyfikatorami URI data: (1381791).
  • Pamięć. Na pasku działań dodano odpowiednie przyciski przesyłania i pobierania (1275407).

Pobieranie kanałów podglądu

Jako domyślnej przeglądarki dla programistów możesz używać Chrome Canary, Dev lub Beta. Te kanały podglądu dają dostęp do najnowszych funkcji Narzędzi deweloperskich, umożliwiają testowanie najnowocześniejszych interfejsów API platform internetowych oraz wykrywanie problemów w witrynie, zanim zdołają zrobić użytkownicy.

Kontakt z zespołem Narzędzi deweloperskich w Chrome

Użyj poniższych opcji, aby omówić nowe funkcje i zmiany w poście lub wszelkie inne kwestie związane z Narzędziami dla deweloperów.

  • Prześlij nam sugestię lub opinię na stronie crbug.com.
  • Aby zgłosić problem z Narzędziami deweloperskimi, kliknij Więcej opcji   Więcej   > Pomoc > Zgłoś problemy z Narzędziami deweloperskimi.
  • zatweetuj na @ChromeDevTools.
  • Napisz komentarz o nowościach w filmach w YouTube dostępnych w Narzędziach deweloperskich lub z poradami dotyczącymi narzędzi dla deweloperów w filmach w YouTube.

Co nowego w Narzędziach deweloperskich

Lista wszystkich omówionych funkcji w serii Co nowego w Narzędziach deweloperskich.

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

101 Chrome

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

Subskrypcja Chrome 82 została anulowana.

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