Nowości w Narzędziach deweloperskich w Chrome 125

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 Wyjaśnij ten błąd (ostrzeżenie) obok komunikatu w konsoli i postępuj zgodnie z instrukcjami.

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

Obsługa reguł @position-try w elementach > Style

Aby ułatwić debugowanie pozycjonowania zakotwiczonych CSS, w sekcji Elementy > Karta 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.

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 zachowanie, zaznacz lub odznacz nowe check_box Automatyczne zamykanie nawiasów i check_box Automatycznie stosuj formatowanie stylistyczne do zminifikowanych źródeł w check_box Ustawienia > Ustawienia > Źródła.

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().

Innymi słowy, gdy Źródła > Punkty przerwania > check_box opcja Wstrzymaj w przypadku niewykrytych wyjątków jest włączona; debuger nie będzie wstrzymywać działania po instrukcjach podobnych do tych:

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

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.

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.

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.

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.

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.

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.

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).
• Zaktualizowaliśmy wyróżnianie składni w panelu Źródła, a konkretnie na to, że obsługuje teraz znaczniki v i d flag w wyrażeniu regularnym.
• Sieć > Karta Pliki cookie naprawiła błąd mapowania wykluczonych plików cookie na pliki cookie odpowiedzi (41491846).
• Elementy > Na karcie 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   > 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.