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

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

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

Błąd CORS został naprawiony przez zastąpienie nagłówka.

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

Dodawanie nagłówka niestandardowego.

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 (*).

Edytowanie wszystkich zastąpień.

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 stosu teraz ukrywa 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 Pole wyboru. Pokaż klatki na liście ignorowanych.

Ślad stosu przed i po włączeniu ignorowania listy zewnętrznych dostawców.

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ł:

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

Nieprawidłowa nazwa i wartość właściwości.

Zespół Narzędzi deweloperskich dziękuje 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.

Linki do keyframe’ów w właściwości skrótu animacji.

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. Ustawienia > Konsola > Pole wyboru. Akceptuj sugestie autouzupełniania po naciśnięciu klawisza Enter.

odpowiednie pole wyboru w Ustawieniach.

Ponadto tekst innego ustawienia jest teraz bardziej przyjazny dla użytkownika: Pole wyboru. 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.

Skrypt umieszczony na liście ignorowanych w oknie szybkiego otwierania przed i po zmianie.

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

wycofanie programu profilującego JavaScript,

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

Co nowego w Narzędziach deweloperskich

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