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 funkcje generatywnej AI w konsoli Narzędzi deweloperskich, które mają pomóc w lepszym zrozumieniu napotkanych błędów i ostrzeżeń.

Aby uzyskać wygenerowane przez AI wyjaśnienie błędu lub ostrzeżenia, kliknij przycisk Iskra żarówki. Wyjaśnij 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 Lepsze zrozumienie błędów i ostrzeżeń dzięki AI.

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

Aby ułatwić debugowanie pozycjonowania elementów zakotwiczonych w CSS, karta Elementy > Style obsługuje teraz @position-try reguły CSS. Na karcie są rozwiązywane wartości position-try-options, a każda opcja jest połączona z odpowiednią sekcją @position-try --name.

Przed i po obsługuje reguły CSS @position-try.

Więcej informacji znajdziesz w artykule Introducing the CSS anchor positioning API (Wprowadzenie do interfejsu CSS API do pozycjonowania elementów zakotwiczonych).

Problem w Chromium: 40279608.

Ulepszenia panelu Źródła

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

Konfigurowanie automatycznego formatowania i zamykania nawiasów

Możesz teraz włączyć lub wyłączyć automatyczne formatowanie i zamykanie nawiasów w Edytorze w sekcji Źródła. Formatowanie stylistyczne sprawia, że zminifikowane pliki są czytelne. Automatyczne zamykanie nawiasów dodaje nawias zamykający () lub }) lub tag (>) po wpisaniu otwierającego.

Aby skonfigurować odpowiednie działanie, zaznacz lub odznacz nowe opcje Automatyczne zamykanie nawiasów i  Automatyczne formatowanie skompresowanych źródeł w  Ustawienia > Preferencje > Źródła.

Przed i po dodaniu nowych ustawień automatycznego formatowania i zamykania nawiasów.

Problemy z Chromium: 40865010, 324314570.

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

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

Innymi słowy, gdy opcja Źródła > Punkty przerwania > Wstrzymaj w przypadku nieobsłużonych wyjątków jest włączona, debuger nie wstrzymuje działania w przypadku instrukcji podobnych do tych:

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

Przed i po rozpoznaniu odrzuconych zgłoszeń.

Problem z Chromium: 40283993.

Przyczyny błędów w konsoli

W konsoli są teraz wyświetlane łańcuchy przyczyn błędów w śladzie stosu (jeśli występują).

Aby ułatwić debugowanie, możesz określić przyczyny błędów podczas przechwytywania i ponownego zgłaszania błędów. Gdy konsola przechodzi przez łańcuch przyczyn, drukuje każdy stos błędów z prefiksem Caused by:, dzięki czemu nadal możesz zobaczyć oryginalny błąd.

Ślady stosu przed i po drukowaniu z prefiksami „Caused by”.

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 Early Hints mają osobną 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 odpowiedzią końcową. Umożliwia to serwerowi wysyłanie do przeglądarki wskazówek dotyczących kluczowych zasobów podrzędnych (np. arkusza stylów lub kluczowego kodu JavaScript) lub źródeł, które prawdopodobnie będą używane przez stronę, gdy serwer jest zajęty generowaniem głównego zasobu.

Przed i po dodaniu dedykowanej sekcji dotyczącej Early Hints.

Więcej informacji znajdziesz w artykule Szybsze wczytywanie stron dzięki wykorzystaniu czasu przetwarzania serwera za pomocą wczesnych wskazówek.

Problem w Chromium: 40222701.

Ukrywanie kolumny Waterfall

W panelu Sieć możesz teraz ukryć kolumnę Kaskada podobnie jak inne kolumny. Kliknij prawym przyciskiem myszy dowolną nazwę kolumny i w menu kliknij pole wyboru  Wykres kaskadowy.

Przed i po dodaniu opcji ukrywania kolumny Waterfall.

Problem z Chromium: 40574989.

Ulepszenia panelu wydajności

Ta wersja wprowadza kilka ulepszeń w panelu Wydajność.

Przechwytywanie statystyk selektora arkusza CSS

W panelu Wydajność pojawi się nowe ustawienie, które umożliwi Ci rejestrowanie statystyk selektora CSS w przypadku długotrwałych zdarzeń Ponowne obliczanie stylu.

Aby wyświetlić statystyki, wybierz zdarzenie Recalculate Style i otwórz nową kartę Selector Stats. Na karcie znajdziesz informacje o czasie, liczbie prób dopasowania i dopasowań oraz odsetku niepasujących selektorów na ścieżce wolniejszej.

Statystyki przed dodaniem selektora i po jego dodaniu.

Problem w Chromium: 324282954.

Zmiana kolejności i ukrywanie ścieżek

Panel Skuteczność ma 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 przenieść ścieżkę, lub kliknij , aby ją ukryć. Gdy skończysz, kliknij przycisk Sprawdź po prawej stronie nazwy utworu.

Kolejna wersja, Chrome 126, wprowadzi więcej ulepszeń tego interfejsu.

Problem w Chromium: 311439339.

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

Możesz teraz ignorować elementy zachowujące w zrzutach sterty pamięci, które rejestrujesz w panelu Pamięć.

Aby zignorować okres przechowywania, wybierz obiekt, a w sekcji Okres przechowywania kliknij prawym przyciskiem myszy okres przechowywania i z menu wybierz Zignoruj ten okres przechowywania. Zignorowane urządzenia przytrzymujące są oznaczone wartościąignored w kolumnie Odległość. Aby przestać ignorować elementy zachowujące, na pasku działań u góry kliknij Przywróć zignorowane elementy zachowujące.

Przed i po dodaniu opcji ignorowania elementów ustalających.

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

Problem w Chromium: 327337527.

Lighthouse 11.7.1

Panel Lighthouse działa teraz w wersji 11.7.1. Zobacz pełną listę zmian.

Wśród ważnych zmian jest wycofanie obsługi wtyczki Publisher Ads, która w tej wersji stała się nieaktualna.

Przed i po dodaniu wtyczki Publisher Ads.

Podstawowe informacje o korzystaniu z panelu Lighthouse w Narzędziach deweloperskich znajdziesz w artykule Lighthouse: optymalizacja szybkości witryny.

Problem z Chromium: 772558.

Różne wyróżnione informacje

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

  • Panel Dyktafon nie jest już w wersji podglądowej (329271496).
  • Konsola nie wyświetla już błędu, gdy niestandardowy formatujący zwraca wartość null dla funkcji body(), co jest prawidłowym działaniem (329400119).
  • W panelu Źródła zaktualizowano wyróżnianie składni. Obsługuje on 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 wykonuje teraz te czynności:
    • Wyświetla w pełni przeciążone reguły dziedziczone z właściwościami niestandardowymi (41489874).
    • Wyróżnia zastosowaną wartość w funkcji light-dark() w zależności od motywu kolorystycznego (331123816).

Pobieranie kanałów podglądu

Rozważ używanie Chrome w wersji Canary, deweloperskiej lub beta jako domyślnej przeglądarki do programowania. Te kanały wersji testowych zapewniają dostęp do najnowszych funkcji Narzędzi deweloperskich, umożliwiają testowanie najnowocześniejszych interfejsów API platformy internetowej i pomagają znajdować problemy w witrynie, zanim zrobią to użytkownicy.

Skontaktuj się z zespołem Narzędzi deweloperskich w Chrome

Skorzystaj z tych opcji, aby porozmawiać o nowych funkcjach, aktualizacjach lub innych kwestiach związanych z Narzędziami deweloperskimi.

Co nowego w Narzędziach deweloperskich

Lista wszystkich tematów omówionych w serii Nowości w Narzędziach deweloperskich.