Nowości w Narzędziach deweloperskich w Chrome 125

Sofia Emelianova
Sofia Emelianova
GitHub

Lepsze zrozumienie błędów i ostrzeżeń w konsoli dzięki Gemini

Ta wersja Chrome wprowadza do konsoli konsoli Narzędzi deweloperskich funkcje generatywnej AI, które mają umożliwić Ci lepsze zrozumienie napotkanych błędów i ostrzeżeń.

Aby wyświetlić wygenerowane przez AI wyjaśnienie błędu lub ostrzeżenia, kliknij przycisk Iskrząca żarówka. Wyjaśnij ten błąd (ostrzeżenie) obok komunikatu w konsoli i postępuj zgodnie z instrukcjami.

Wygenerowane przez AI wyjaśnienie błędu.

Więcej informacji znajdziesz w artykule Lepsze zrozumienie błędów i ostrzeżeń dzięki AI.

Obsługa reguł @position-try w sekcji Elementy > Style

Aby ułatwić debugowanie pozycjonowania zakotwiczonych CSS, karta Elementy > Style obsługuje teraz reguły CSS (@position-try). Karta akceptuje wartości position-try-options i łączy każdą opcję z osobną sekcją @position-try --name.

Elementy przed i po obsługujące reguły CSS @position-try.

Więcej dowiesz się z artykułu Przedstawiamy interfejs CSS Anchor positioning API.

Problem z Chromium: 40279608.

Ulepszenia panelu Źródła

W tej wersji wprowadziliśmy kilka ulepszeń w panelu Źródła.

Skonfiguruj automatyczne formatowanie stylistyczne i zamykanie nawiasów

W sekcji Źródła w Edytorze możesz teraz włączyć lub wyłączyć automatyczne stosowanie mechanizmu ładunkowego i zamykanie nawiasów. Tryb ładny umożliwia odczytywanie zminifikowanych plików. Zamykający nawias zamykający automatycznie dodaje nawias zamykający () lub }) albo tag (>), gdy wpisujesz nawias otwierający.

Aby skonfigurować odpowiednie działanie, zaznacz lub odznacz nowe check_box Automatyczne zamykanie nawiasów i check_box Automatycznie stosuj zminimalizowane źródła wydruku w check_box Ustawienia > Preferencje > Źródła.

Przed i po dodaniu nowych ustawień automatycznego drukowania łańcuchowego i zamykania nawiasów.

Problemy z Chromium: 40865010, 324314570.

Obsłużone odrzucone obietnice są uznawane za zrealizowane

Panel Źródła prawidłowo rozpoznaje odrzucone obietnice jako zidentyfikowane, jeśli zastosujesz je za pomocą .catch() lub 2 argumentów .then().

Inaczej mówiąc, jeśli włączysz opcję Źródła > Punkty przerwania > check_box Wstrzymaj przy niewykrytych wyjątkach, debuger nie będzie wstrzymywać działania po instrukcjach podobnych do tych:

Promise.reject(new Error('fail')).catch((e)=>console.log('caught'));

Uwzględnienie odnotowanych odrzuceń w okresie przed i po.

Problem z Chromium: 40283993.

Przyczyny błędów w konsoli

Konsola pokazuje teraz w zrzucie stosu łańcuchy przyczyn błędów (jeśli występują).

Aby ułatwić debugowanie, możesz określić przyczyny błędów wychwytywania i zwracania błędów. W miarę postępów w łańcuchu przyczyn konsola drukuje każdy stos błędów z prefiksem Caused by:, więc nadal możesz zobaczyć pierwotny błąd.

Zrzuty stosu przed wydrukowaniem i po nim z prefiksami „Powodowane przez”.

Problem z Chromium: 40182832.

Ulepszenia panelu Sieć

W tej wersji wprowadziliśmy kilka ulepszeń w panelu Sieć.

Sprawdzanie nagłówków wczesnych wskazówek

Nagłówki Wczesne wskazówki otrzymują dedykowaną sekcję na karcie Nagłówki żądania w panelu Sieć. Wcześniej odpowiednie nagłówki można było znaleźć w sekcji Nagłówki odpowiedzi.

Wczesne wskazówki to kod stanu HTTP (103 Early Hints) używany do wysyłania wstępnej odpowiedzi HTTP przed ostateczną odpowiedzią. Dzięki temu serwer może wysyłać do przeglądarki wskazówki dotyczące krytycznych zasobów podrzędnych (np. arkusza stylów lub krytycznych skryptów JavaScript) bądź źródeł, które prawdopodobnie będą używane przez stronę, gdy serwer jest zajęty generowaniem zasobu głównego.

Dodanie sekcji „przed” i „po” w osobnej sekcji na temat wczesnych wskazówek.

Więcej informacji znajdziesz w artykule Szybkie ładowanie stron dzięki wskazówkom z wyprzedzeniem.

Problem z Chromium: 40222701.

Ukrywanie kolumny kaskady

Kolumna Wodospad w panelu Sieć można teraz ukrywać w podobny sposób jak inne kolumny. Kliknij prawym przyciskiem myszy dowolną nazwę kolumny i usuń zaznaczenie pola wyboru check_box_outline_blank Waterfall w menu.

Informacje o dodaniu opcji ukrywania kolumny kaskady przed i po.

Problem z Chromium: 40574989.

Ulepszenia panelu wydajności

W tej wersji wprowadziliśmy kilka ulepszeń w panelu Skuteczność.

Przechwytywanie statystyk selektora arkusza CSS

W panelu Skuteczność dodaliśmy nowe ustawienie, które umożliwia przechwytywanie statystyk selektora arkusza CSS dla długotrwałych zdarzeń Ponownie oblicz styl.

Aby wyświetlić statystyki, wybierz zdarzenie Ponownie oblicz styl i otwórz nową kartę Selector Stats (Statystyki selektora). Karta zawiera informacje o czasie trwania, liczbie prób dopasowania i liczbie, a także o odsetku elementów niedopasowanych do ścieżki powolnej ścieżki dla każdego selektora.

Przed dodaniem statystyk selektora i po nim.

Problem z Chromium: 324282954.

Zmień kolejność i ukryj ścieżki

W panelu Wydajność pojawi się nowy tryb konfiguracji, który umożliwia zmianę kolejności ścieżek i ich ukrywanie.

Aby włączyć tryb konfiguracji, po lewej stronie nazwy ścieżki kliknij przycisk edytuj Edytuj. Następnie kliknij arrow_upward w górę lub arrow_downward w dół, aby przenieść ścieżkę, lub kliknij visibility_off, aby ukryć. Gdy skończysz, po prawej stronie nazwy ścieżki kliknij przycisk gotowe Sprawdź.

W następnej wersji, Chrome 126, znajdziemy w nim więcej ulepszeń.

Problem z Chromium: 311439339.

Ignoruj elementy zachowujące w panelu Pamięć

Teraz możesz ignorować elementy zachowujące w zrzutach stosu przechwyconych za pomocą panelu Pamięć.

Aby zignorować element zachowujący, wybierz obiekt, a następnie w sekcji Kontroler kliknij prawym przyciskiem myszy element zachowujący i wybierz z menu Ignoruj ten element przechowujący. Zignorowane osoby zachowujące są oznaczone wartością ignored w kolumnie Odległość. Aby przestać ignorować, kliknij Przywróć zignorowane elementy zachowujące na pasku działań u góry.

Dodano opcję ignorowania elementów zachowujących i przed.

Dodatkowo zrzuty stosu obsługują teraz większą liczbę (setki milionów) krawędzi i węzłów osłony (332350576).

Problem z Chromium: 327337527.

Lighthouse 11.7.1

Panel Lighthouse korzysta teraz z Lighthouse w wersji 11.7.1. Zobacz pełną listę zmian.

Jedną z ważnych zmian jest wycofana obsługa wtyczki Reklamy wydawcy, która w tej wersji jest nieaktualna.

Informacje o usunięciu wtyczki Reklamy wydawcy i przed jej dodaniem.

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

Problem z Chromium: 772558.

Różne wyróżnienia

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

  • W panelu Dyktafon oficjalnie nie ma już stanu podglądu (329271496).
  • Konsola nie wyświetla teraz błędu, gdy niestandardowy moduł formatowania zwraca wartość null dla funkcji body(), co jest prawidłowym zachowaniem (329400119).
  • W panelu Źródła zaktualizowaliśmy wyróżnianie składni, a zwłaszcza obsługuje teraz flagi v i d w wyrażeniach regularnych.
  • Na karcie Sieć > Pliki cookie usunięto błąd mapowania wykluczonych plików cookie na pliki cookie odpowiedzi (41491846).
  • Na karcie Elementy > Style są teraz dostępne te funkcje:
    • Pokazuje w pełni przeciążone reguły dziedziczone z właściwościami niestandardowymi (41489874).
    • Podświetla zastosowaną wartość w trybie light-dark() w zależności od motywu koloru (331123816).

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