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

Sofia Emelianova
Sofia Emelianova

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

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 zastosować 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 pomoc.

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.

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

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.

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

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 nie jest już dostę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 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.

Co nowego w Narzędziach deweloperskich

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