Ta strona została przetłumaczona przez Cloud Translation API.

Nowości w Narzędziach deweloperskich w Chrome 125

Sofia Emelianova

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

Ta wersja Chrome udostępnia funkcje generatywnej AI w konsoli Narzędzi deweloperskich, aby ułatwić Ci zrozumienie napotkanych błędów i ostrzeżeń.

Aby uzyskać wygenerowane przez AI wyjaśnienie błędu lub ostrzeżenia, kliknij przycisk Opisz 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 Bardziej szczegółowe informacje o błędach i ostrzeżeniach dzięki AI.

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

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

Elementy przed i po obsłudze reguł CSS @position-try.

Więcej informacji znajdziesz w artykule Powiązanie elementów ze sobą za pomocą pozycjonowania zakotwiczenia CSS.

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

Teraz w sekcji Źródła możesz włączyć lub wyłączyć automatyczne dodawanie do paska zdjęć i zamykanie nawiasów dla Edytora. Funkcja drukowania w prostym stylu umożliwia czytelność zminifikowanych plików. Zamykanie nawiasów kwadratowych powoduje automatyczne dodanie nawiasu zamykającego () lub }) lub tagu (>) podczas wpisywania nawiasu otwierającego.

Aby skonfigurować odpowiednie działanie, zaznacz lub odznacz nowe opcje check_box: Automatyczne nawiasy zamykające i check_box Automatycznie dodawaj zminimalizowane źródła wydruku w ustawieniach Ustawienia > Ustawienia > Źródła.

Problemy z Chromium: 40865010, 324314570.

Zrealizowane odrzucone obietnice są rozpoznawane jako wykryte

Panel Źródła prawidłowo rozpoznaje teraz odrzucone obietnice jako wykryte, jeśli zostały przez Ciebie wykorzystane za pomocą .catch() lub 2 argumentów .then().

Inaczej mówiąc, gdy włączona jest opcja Źródła > Punkty przerwania > check_box Wstrzymaj przy niewykrytych wyjątkach, debuger nie będzie zatrzymywał się na instrukcjach podobnych do tych:

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

„przed” i „po” rozpoznania rozpoznanych odrzuceń.

Problem z Chromium: 40283993.

Przyczyny błędów w konsoli

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

Aby ułatwić debugowanie, możesz określić przyczyny błędów podczas wychwytywania i ponownego zgłaszania błędów. W miarę jak konsola przechodzi do łańcucha przyczyn, wyświetla każdy stos błędów z prefiksem Caused by:, dzięki czemu nadal widać pierwotny błąd.

Zapis zrzutu stosu przed wydrukowaniem i po nim z prefiksami „Przyczyna”.

Problem z Chromium: 40182832.

Ulepszenia panelu sieci

Ta wersja zawiera kilka ulepszeń w panelu Sieć.

Sprawdź nagłówki wczesnych podpowiedzi

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

Wcześniejsze 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.

Dodano sekcję „przed i po” dotyczącą wczesnych wskazówek.

Więcej informacji znajdziesz w artykule Szybsze wczytywanie stron dzięki funkcji wczesnego etapu myślenia serwera i wczesnych wskazówek.

Problem z Chromium: 40222701.

Ukrywanie kolumny Kaskada

Możesz teraz ukrywać kolumnę Kaskada w panelu Sieć, podobnie jak pozostałe kolumny. Kliknij prawym przyciskiem myszy nazwę dowolnej kolumny i wyczyść pole wyboru check_box_outline_blank Waterfall w menu.

Dodanie opcji ukrywania kolumny „Kaskada” przed i po.

Problem z Chromium: 40574989.

Ulepszenia panelu wydajności

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

Przechwytywanie statystyk selektora arkusza CSS

W panelu Wydajność pojawi się nowe ustawienie, które umożliwia przechwytywanie statystyk selektora arkusza CSS w przypadku długotrwałych zdarzeń Ponownie oblicz styl.

Aby wyświetlić statystyki, wybierz zdarzenie Oblicz ponownie styl i otwórz nową kartę Statystyki selektora. Znajdziesz na niej informacje o czasie, liczbie prób dopasowania i liczbie prób dopasowania oraz procentu niedopasowań, które nie wystąpiły na wolnej ścieżce dla każdego selektora.

Dodanie statystyk dotyczących selektora przed i po.

Problem z Chromium: 324282954.

Zmień kolejność lub ukryj ścieżki

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

Aby przejść do trybu konfiguracji, kliknij przycisk edytuj Edytuj z lewej strony nazwy ścieżki. Następnie kliknij arrow_upward w górę lub arrow_downward, aby przesunąć ścieżkę lub visibility_off, aby ukryć. Gdy skończysz, kliknij przycisk gotowe Sprawdź po prawej stronie nazwy ścieżki.

Kolejna wersja, Chrome 126, będzie zawierać więcej ulepszeń interfejsu.

Problem z Chromium: 311439339.

Ignoruj elementy zachowujące w panelu Pamięć

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

Aby zignorować element zachowający, wybierz obiekt, a następnie w sekcji Uchwytujący kliknij go prawym przyciskiem myszy i w menu wybierz Ignoruj to zachowanie. Ignorowane elementy 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.

Dodanie opcji ignorowania elementów zachowających przed i po.

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

Problem z Chromium: 327337527.

Lighthouse 11.7.1

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

Jedną z ważniejszych zmian jest wycofana obsługa wtyczki Publisher Ads, która w tej wersji straciła ważność.

Dodanie obsługi wtyczki wydawcy Google Ads (przed i po).

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

Problem z Chromium: 772558.

Inne ważne informacje

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

Panel Dyktafonu oficjalnie przestał wyświetlać się w wersji testowej (329271496).
Konsola nie wyświetla teraz błędu, gdy niestandardowy format formatujący zwraca null dla funkcji body(), co jest prawidłowym zachowaniem (329400119).
Panel Źródła zaktualizował elementy zaznaczania składni. Teraz obsługuje on flagi v i d w wyrażeniu regularnym.
Na karcie Sieć > Pliki cookie naprawiono błąd mapowania wykluczonych plików cookie na pliki cookie odpowiedzi (41491846).
Teraz na karcie Elementy > Style:
- Pokazuje w pełni przeciążone odziedziczone reguły z właściwościami niestandardowymi (41489874).
- Podświetla zastosowaną wartość w funkcji light-dark() w zależności od motywu koloru (331123816).

Pobieranie kanałów podglądu

Jako domyślnej przeglądarki dla programistów możesz używać Chrome Canary, Dev lub Beta. Te kanały podglądu dają dostęp do najnowszych funkcji Narzędzi deweloperskich, umożliwiają testowanie najnowocześniejszych interfejsów API platform internetowych oraz wykrywanie problemów w witrynie, zanim zdołają zrobić użytkownicy.

Kontakt z zespołem Narzędzi deweloperskich w Chrome

Użyj poniższych opcji, aby omówić nowe funkcje i zmiany w poście lub wszelkie inne kwestie związane z Narzędziami dla deweloperów.

Prześlij nam sugestię lub opinię na stronie crbug.com.
Aby zgłosić problem z Narzędziami deweloperskimi, kliknij Więcej opcji > Pomoc > Zgłoś problemy z Narzędziami deweloperskimi.
zatweetuj na @ChromeDevTools.
Napisz komentarz o nowościach w filmach w YouTube dostępnych w Narzędziach deweloperskich lub z poradami dotyczącymi narzędzi dla deweloperów w filmach w YouTube.

Co nowego w Narzędziach deweloperskich

Lista wszystkich zagadnień omówionych w serii Co nowego w Narzędziach deweloperskich.

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

101 Chrome

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

Subskrypcja Chrome 82 została anulowana.

Chrome 81

Chrome 80

Chrome 79

Chrome 78

Chrome 77

Chrome 76

Chrome 75

Chrome 74

Chrome 73

Chrome 72

Wizualizacja danych o skuteczności w panelu Skuteczność.
Podświetl węzły tekstowe w drzewie DOM
Skopiuj ścieżkę JS do węzła DOM.
Aktualizacje panelu audytu, w tym nowy audyt, który wykrywa biblioteki JS i nowe słowa kluczowe umożliwiające dostęp do panelu kontroli z menu poleceń.
Dodatkowa wskazówka: sprawdzaj zapytania o multimedia w trybie urządzenia (film)

Chrome 71

Najedź kursorem na wynik wyrażenia aktywnego, aby wyróżnić węzeł DOM.
Zapisywanie węzłów DOM jako zmiennych globalnych
Informacje o inicjatorze i priorytetach teraz w importach i eksportach plików HAR
Otwórz menu poleceń z menu głównego
Punkty przerwania obrazu w obrazie
Dodatkowa wskazówka: użyj pola monitorEvents() do rejestrowania zdarzeń wywoływanych przez węzeł w konsoli (film)