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

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 ją.

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 pomijają 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 zastosować 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 wkład w realizację tego projektu. 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:

• 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ń podkreśla 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 procesu wycofywania programu profilującego JavaScript. W tej fazie panel nadal można otworzyć, ale jego interfejs jest niedostępny.

Aby stworzyć profil wydajności procesora, kliknij Otwórz panel Wydajność.

Problem z Chromium: 1354548.

Inne najciekawsze momenty

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 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.

• 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.
• 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ędziach deweloperskich.