Nowości w Narzędziach deweloperskich w Chrome 125

Sofia Emelianova
Sofia Emelianova
GitHub

Lepsze interpretowanie 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 uzyskać wyjaśnienie błędu lub ostrzeżenia wygenerowane przez AI, kliknij przycisk Iskra żarówki. Zrozumieć ten błąd (ostrzeżenie) obok komunikatu w Konsoli i postępuj zgodnie z instrukcjami.

Wyjaśnienie błędu wygenerowane przez AI.

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. Na karcie są rozwiązywane wartości position-try-options i każda opcja jest powiązana z odpowiednią sekcją @position-try --name.

Przed i po zastosowaniu reguł CSS @position-try.

Więcej informacji znajdziesz w artykule [EN] Wprowadzenie do interfejsu CSS anchor positioning API.

Problem z Chromium: 40279608.

Ulepszenia panelu Źródła

Ta wersja zawiera kilka ulepszeń panelu Źródła.

Konfigurowanie automatycznego drukowania i zamykania nawiasów

W sekcji Źródła możesz teraz włączyć lub wyłączyć automatyczne drukowanie i zamykanie nawiasów w Edytorze. 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 drukuj ładnie skompresowane źródła w sekcji Ustawienia > Ustawienia > Źródła.

Stan przed i po dodaniu nowych ustawień automatycznego drukowania i zamykania nawiasów.

Problemy z Chromium: 40865010, 324314570.

Zarządzanie odrzuconymi obietnicami jest uznawane za wykrycie

Panel Źródła prawidłowo rozpoznaje odrzucone obietnice jako odłowione, jeśli zostały one obsłużone za pomocą funkcji .catch() lub funkcji .then() z 2 argumentami.

Inaczej mówiąc, gdy opcja Źródła > Punkty przerwania > Wstrzymaj przy nieprzechwycionych wyjątkach jest włączona, debugger nie będzie wstrzymywał wykonania kodu w przypadku instrukcji podobnych do tej:

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

Przed i po rozpoznaniu błędów.

Problem z Chromium: 40283993.

Przyczyny błędów w konsoli

Konsola wyświetla teraz w śladzie stosu (jeśli występuje) łańcuchy przyczyn błędów.

Aby ułatwić debugowanie, możesz określić przyczyny błędów podczas przechwytywania i ponownie zgłaszania 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.

Ścieżki stosu przed i po wydrukowaniu z prefiksem „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 wczesnych podpowiedzi mają specjalną 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ą. Umożliwia to serwerowi wysyłanie do przeglądarki wskazówek dotyczących kluczowych podzasobów (np. arkusza stylów lub kluczowego kodu JavaScript) lub źródeł, których prawdopodobnie użyje strona, podczas gdy serwer generuje zasób główny.

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

Więcej informacji znajdziesz w artykule Większa szybkość wczytywania stron dzięki skróceniu czasu przetwarzania na serwerze za pomocą wczesnych podpowiedzi.

Problem z Chromium: 40222701.

Ukrywanie kolumny Kaskada

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

Ta wersja zawiera kilka ulepszeń panelu Wydajność.

Rejestrowanie statystyk selektora arkusza CSS

Panel Skuteczność ma teraz nowe ustawienie, które umożliwia rejestrowanie statystyk selektora CSS w przypadku długotrwałych zdarzeń Ponowna obliczanie stylu.

Aby wyświetlić statystyki, wybierz zdarzenie Ponownanie obliczania stylu i otwórz nową kartę Statystyki selektora. Zawiera ona informacje o upływie czasu, próbach dopasowania i liczbie dopasowań oraz odsetku elementów, które nie pasują do powolnej ścieżki w przypadku każdego selektora.

Statystyki selektora przed dodaniem i po dodaniu.

Problem z Chromium: 324282954.

Zmienianie kolejności i ukrywanie ścieżek

Panel Wydajność ma teraz nowy tryb konfiguracji, który umożliwia zmianę kolejności ścieżek i ich ukrywanie.

Aby przejść do trybu konfiguracji, kliknij przycisk Edytuj po lewej stronie nazwy ścieżki. Następnie kliknij w górę lub w dół, aby przesuwać ścieżkę, albo kliknij , aby ją ukryć. Gdy skończysz, kliknij Sprawdź po prawej stronie nazwy utworu.

W kolejne wersji, Chrome 126, wprowadzimy więcej ulepszeń tego interfejsu.

Problem z Chromium: 311439339.

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

Możesz teraz ignorować elementy zamykające w migawkach stosu, które rejestrujesz 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ć, na pasku działań u góry kliknij Przywróć zignorowane elementy zachowujące.

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 wersji Lighthouse 11.7.1. Zobacz pełną listę zmian.

Jedną z istotnych zmian jest wycofanie obsługi wtyczki Publisher Ads, która w tej wersji stała się nieaktualna.

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

Podstawy korzystania z panelu Lighthouse w Narzędziach deweloperskich znajdziesz w artykule Lighthouse: optymalizacja szybkości witryny.

Problem z Chromium: 772558.

Inne najciekawsze momenty

Oto kilka istotnych poprawek i ulepszeń w tej wersji:

  • Panel Dyktafon nie jest już w wersji beta (329271496).
  • Konsola nie wyświetla już błędu, gdy niestandardowy formater zwraca wartość null dla funkcji body(), co jest prawidłowym działaniem (329400119).
  • W panelu Źródła zmieniliśmy wyróżnianie składni, aby uwzględnić 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

Rozważ użycie jako domyślnej przeglądarki deweloperskiej wersji Canary, Dev lub Beta przeglądarki Chrome. 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

Aby omówić nowe funkcje, aktualizacje lub inne kwestie związane z Narzędziami deweloperskimi, skorzystaj z tych opcji.

Co nowego w Narzędziach deweloperskich

Lista wszystkich tematów omawianych w cyklu artykułów Co nowego w Narzędziach deweloperskich.