Nowości w Narzędziach dla deweloperów (Chrome 113)

Zadbaj o dobrą organizację dzięki kolekcji Zapisuj i kategoryzuj treści zgodnie ze swoimi preferencjami.

Sofia Emelianova

Jecelyn Yeen

Zastępowanie nagłówków odpowiedzi sieci

Teraz możesz zastąpić nagłówki odpowiedzi w panelu Sieć. Wcześniej do eksperymentowania z nagłówkami odpowiedzi HTTP potrzebny był dostęp do serwera WWW.

Za pomocą zastąpień nagłówków odpowiedzi możesz lokalnie testować poprawki różnych nagłówków, m.in.:

• Nagłówki mechanizmu współdzielenia zasobów między domenami (CORS)
• Nagłówki Permissions-Policy
• Nagłówki izolacji między domenami

Aby zastąpić nagłówek, kliknij Sieć > Nagłówki > Nagłówki odpowiedzi, najedź kursorem na wartość nagłówka, kliknij  i zmodyfikuj go.

Możesz też dodać nagłówki niestandardowe.

Aby edytować wszystkie zastąpienia w jednym miejscu, otwórz plik .headers w sekcji Źródła > Zastąpienia. Możesz też kliknąć Dodaj regułę zastąpienia, aby zastąpić wiele żądań za pomocą symboli wieloznacznych (*).

Problem z Chromium: 1288023.

Ulepszenia dotyczące debugowania w Nuxt, Vite i Rollup

Aby ułatwić Ci szybsze znajdowanie problemów podczas debugowania, rozszerzony ślad pakietu zawiera teraz ukryte ramki pochodzące ze źródeł wygenerowanych przez Nuxt 3.3 lub nowszą wersję. Narzędzia deweloperskie pomija takie klatki:

• W śladach w Konsoli kliknij link Pokaż jeszcze N ramek.
• W sekcji Źródła > Stos wywołania kliknij  Pokaż klatki na liście ignorowanych.

Aby wprowadzić te ulepszenia, zespoły DevTools, Nuxt, Vite i Rollup współpracowały ze sobą, aby wdrożyć rozszerzenie x_google_ignoreList mapy źródeł:

• Nuxt 3.3
• Opcje serwera VITE
• Opcje konfiguracji podsumowania

Zespół DevTools dziękuje zespołom Nuxt, Vite i Rollup za umożliwienie tego. Dziękujemy za współpracę i współdziałanie, które przyczyniły się do udanej implementacji. Jeszcze raz dziękujemy za Twój wkład.

Ulepszenia CSS w sekcji Elementy > Style

Nieprawidłowe właściwości i wartości CSS

Aby pomóc Ci szybciej diagnozować problemy z CSS, panel Style zawiera teraz wykluczenia dotyczące:

• Całą deklarację CSS (właściwość i wartość), gdy właściwość CSS jest nieprawidłowa.
• Tylko wartość, gdy właściwość CSS jest prawidłowa, ale jej wartość jest nieprawidłowa.

Zespół Narzędzi deweloperskich dziękuje użytkownikowi Yisi(一丝) za wdrożenie tej poprawki.

linki do keyframe’ów w krótkiej nazwie animacji;

Właściwość CSS w skrótowym zapisie animation zawiera teraz linki do odpowiednich reguł @keyframes, dzięki czemu możesz szybciej poruszać się po panelu Style.

Problem z Chromium: 1420656.

Nowe ustawienie konsoli: autouzupełnianie po naciśnięciu Enter

Począwszy od poprzedniej wersji (112) możesz skonfigurować konsolę w Narzędziach deweloperskich, aby po naciśnięciu Enter została zastosowana sugestia autouzupełniania.

Domyślnie, aby zaakceptować sugestię autouzupełniania, możesz nacisnąć Tab lub Arrow right. Aby autouzupełnianie działało też w przypadku Enter, włącz Ustawienia > Konsola > Akceptuj sugestie autouzupełniania po naciśnięciu klawisza Enter.

Ponadto tekst innego ustawienia jest teraz bardziej przyjazny dla użytkownika: Traktuj ocenę kodu jako działanie użytkownika.

Problem z Chromium: 1276960.

Menu poleceń kładzie nacisk na pliki utworzone przez autora

W oknie szybkiego otwierania w menu poleceń pliki innych firm, które znajdują się na liście ignorowanych, są teraz wyszarzone, aby wyróżnić pliki utworzone przez Ciebie.

Problem z Chromium: 1424345.

Wycofanie programu profilującego JavaScript: etap 2

Już w Chrome 58 zespół narzędzi dla deweloperów planował wycofanie profilatora JavaScriptu i zachęcenie deweloperów Node.js i Deno do korzystania z panelu Wydajność do profilowania wydajności procesora JavaScript.

Wersja 113 DevTools rozpoczyna drugi etap czteroetapowego wycofywania programu profilującego JavaScript. W tej fazie nadal możesz otworzyć panel, ale jego interfejs nie jest już dostępny.

Aby stworzyć profil wydajności procesora, kliknij Przejdź do panelu wydajności.

Problem z Chromium: 1354548.

Inne wyróżnione informacje

Oto kilka istotnych poprawek w tej wersji:

• Rozwiązaliśmy błąd, który powodował nieprawidłowe wyświetlanie nazw zmiennych z znakami Unicode w panelu Źródła (1425055).
• Dodano nową wiadomość na karcie Problemy dotyczącą problemów z automatycznym wypełnianiem w przypadku niestandardowych wartości HTML (1399414).

Pobieranie kanałów podglądu

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

• Przesyłaj opinie i prośby o dodanie funkcji na stronie crbug.com.
• Zgłoś problem z Narzędziami deweloperskimi, klikając more_vert Więcej opcji > Pomoc > Zgłoś problem z Narzędziami deweloperskimi w Narzędziach deweloperskich.
• Wyślij tweeta do @ChromeDevTools.
• Dodaj komentarze do filmów w YouTube z serii „Co nowego w Narzędziach deweloperskich” lub Wskazówki dotyczące Narzędzi deweloperskich.

Co nowego w Narzędziach deweloperskich

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