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 udostępnia w konsoli Narzędzi deweloperskich funkcje generatywnej AI, aby ułatwić Ci analizowanie 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 Więcej informacji o błędach i ostrzeżeniach dzięki AI.

@position-tryobsługa reguł w sekcji Elementy > Style,

Aby ułatwić debugowanie pozycji kotwicy CSS, na karcie Elementy > Style udostępniono @position-try reguły CSS. 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. Formatowanie stylistyczne ułatwia odczyt zminifikowanych plików. Po wpisaniu otwierającego nawiasu () lub }) automatycznie dodawany jest nawias zamykający ()) lub tag (>).

Aby skonfigurować odpowiednie zachowanie, zaznacz lub odznacz nowe opcje Auto closing brackets i Automatycznie drukowanie ładnie skompresowanych źródeł w Settings > Preferences > Sources.

Przed i po dodaniu nowych ustawień automatycznego drukowania ładowanego i zamykającego nawiasy kwadratowe.

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 > 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. Gdy Konsola przechodzi w górę łańcucha przyczyn, wyświetla każdy stos błędów z przekazem Caused by:, dzięki czemu 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ć

Ta wersja zawiera kilka ulepszeń 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.

Stan przed i po dodaniu specjalnej sekcji z wczesnymi wskazówkami.

Więcej informacji znajdziesz w artykule Większa szybkość wczytywania stron dzięki krótszemu procesowaniu zapytań do serwera za pomocą wczesnych podpowiedzi.

Problem z Chromium: 40222701.

Ukrywanie kolumny kaskady

Możesz teraz ukryć kolumnę Kaskada w panelu Sieć w taki sam sposób jak inne kolumny. Kliknij prawym przyciskiem myszy dowolną nazwę kolumny i w menu kliknij pole wyboru Wodospad.

Widok przed i po dodaniu opcji ukrywania kolumny Kaskada.

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). Zawiera ona informacje o upłyniętym czasie, próbach dopasowania i liczbie dopasowań oraz odsetku elementów, które nie pasują do powolnej ścieżki w przypadku każdego selektora.

Przed dodaniem statystyk selektora i po nim.

Problem z Chromium: 324282954.

Zmiana kolejności i ukrywanie ścieżek

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. Następnie kliknij w górę lub w dół, aby przesunąć ścieżkę, albo kliknij , aby ją ukryć. Gdy skończysz, kliknij Sprawdź po prawej stronie nazwy utworu.

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

Problem z Chromium: 311439339.

Ignorowanie elementów zachowujących w panelu Pamięć

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

Aby zignorować uchwyt, wybierz obiekt, a w sekcji Uchwyt kliknij prawym przyciskiem myszy uchwyt i w menu kliknij Zignoruj ten uchwyt. Ignorowane uchwyty 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.

Stan przed i po dodaniu opcji ignorowania retainerów.

Dodatkowo migawki stosu obsługują teraz większą liczbę (setki milionów) krawędzi i węzłów (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.

Stan przed i po dodaniu lub usunięciu obsługi wtyczki Publisher Ads.

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 naprawiliśmy błąd związany z mapowaniem wykluczonych plików cookie na pliki cookie odpowiedzi (41491846).
  • Karta Elementy > Style:
    • Pokazuje w pełni przeciążone reguły dziedziczone z właściwościami niestandardowymi (41489874).
    • Podświetla zastosowaną wartość w funkcji light-dark() w zależności od motywu kolorów (331123816).

Pobieranie kanałów 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 wstępnej zapewniają dostęp do najnowszych funkcji DevTools, umożliwiają testowanie najnowocześniejszych interfejsów API platformy internetowej i pomagają znaleźć problemy w witrynie, zanim zrobią to użytkownicy.

Kontakt z zespołem Narzędzi deweloperskich w Chrome

Użyj poniższych opcji, aby omówić nowe funkcje, aktualizacje lub inne informacje związane z Narzędziami deweloperskimi.

Co nowego w Narzędziach deweloperskich

Lista wszystkich tematów, które zostały omówione w serii Co nowego w Narzędziach deweloperskich.