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

Ulepszenia panelu Sieć

Jeszcze szybciej zastępuj treści z internetu lokalnie

Funkcja zastąpienia lokalnych została udoskonalona, dzięki czemu można z poziomu panelu Sieć łatwo imitować nagłówki odpowiedzi i treści internetowe zasobów zdalnych, nie mając do nich dostępu.

Aby zastąpić treści z internetu, otwórz panel Sieć, kliknij żądanie prawym przyciskiem myszy i wybierz Zastąp treść.

Jeśli masz skonfigurowane lokalne zastąpienia, ale są wyłączone, Narzędzia deweloperskie je włączają. Jeśli nie masz jeszcze skonfigurowanych narzędzi deweloperskich, na pasku działań u góry pojawi się odpowiedni komunikat. Wybierz folder, w którym będą przechowywane zastąpienia i zezwól na dostęp do nich Narzędzi deweloperskich.

Po skonfigurowaniu zastąpień w Narzędziach deweloperskich przejdziesz do sekcji Źródła > Zastąpienia > Edytor umożliwiający zastępowanie treści internetowych.

Uwaga: zastąpione zasoby są oznaczone w panelu Sieć etykietą . Najedź na nią kursorem, aby zobaczyć, co zostało zastąpione.

Problemy z Chromium: 1465785, 1470532, 1469359.

Zastąp treść żądań XHR i żądań pobierania

Możesz teraz zastąpić zawartość żądań XHR i pobrać je oraz ich nagłówki odpowiedzi. Dzięki tym zastąpieniom możesz imitować odpowiedzi interfejsu API, aby debugować stronę internetową, nawet jeśli backend i interfejs API nie są jeszcze gotowe.

Narzędzia deweloperskie obsługują obecnie zastąpienia treści w przypadku tych typów żądań: obrazy (np. avif, png), czcionki, pobieranie i XHR, skrypty (css i js) oraz dokumenty (html). W Narzędziach deweloperskich opcja Zastąp treść jest teraz wyszarzona w przypadku nieobsługiwanych typów.

Problemy z Chromium: 792101, 1469776.

Ukrywanie próśb o udostępnienie rozszerzeń do Chrome

Aby pomóc Ci skupić się na autorze kodu i odfiltrować nietrafne żądania wysyłane przez rozszerzenia zainstalowane w Chrome, w panelu Sieć dodaliśmy nowy filtr.

Aby odfiltrować wszystkie żądania wysłane do adresów URL chrome-extension://, zaznacz Ukryj adresy URL rozszerzeń.

Problemy z Chromium: 1257885, 1458803.

Zrozumiałe dla człowieka kody stanu HTTP

Kod stanu w nagłówku żądania wyświetla teraz czytelny dla człowieka tekst obok kodów stanu HTTP, dzięki czemu możesz szybciej ustalić, co się stało z żądaniem.

Aby zobaczyć ten sam tekst, możesz też najechać kursorem na kod stanu w tabeli żądań.

Problem z Chromium: 1153956.

Odpowiedzi formatowanie stylistyczne dla podtypów JSON

Karta Odpowiedź w przypadku żądania z podtypem MIME application/[subtype]+json (np. ld+json, hal+json i innymi) analizuje teraz odpowiedź prawidłowo i umożliwia jej zaprezentowanie.

Problem z Chromium: 406900.

Wydajność: sprawdzanie zmian priorytetu pobierania zdarzeń sieciowych

W panelu Skuteczność w sekcji Podsumowanie zdarzenia na ścieżce Sieć wyświetlane są teraz 2 pola priorytetu: Początkowy priorytet i (ostateczny) Priorytet, a nie tylko jeden Priorytet. To dodatkowe pole pozwala teraz sprawdzić, czy zmieni się priorytet pobierania zdarzenia, i dostosować kolejność pobrań. Więcej informacji znajdziesz w artykule o optymalizowaniu wczytywania zasobów przy użyciu interfejsu Fetch Priority API.

Te same informacje można też znaleźć w kolumnie Priorytet w panelu Sieć przy włączonym ustawieniu Duże wiersze żądania.

Problemy z Chromium: 1463901, 1380964.

Domyślnie włączone ustawienia źródeł: zawijanie kodu i automatyczne ujawnianie plików

Kliknij Ustawienia > Ustawienia > Opcja zawijania kodu jest teraz domyślnie włączona. Ta opcja umożliwia zwijanie bloków kodu.

Aby zwinąć blok kodu, najedź kursorem na numer wiersza obok jego początku i kliknij ikonę zwijania . Kliknij {...}, aby ponownie rozwinąć bryłę.

Ponadto w Ustawienia > Ustawienia > Automatyczne wyświetlanie plików na pasku bocznym jest teraz domyślnie włączone.

To ustawienie powoduje, że drzewo plików jest dostępne w sekcji Źródła > Strona wybierz bieżący plik otwarty w Edytorze po przełączeniu kart.

Problemy z Chromium: 1459193, 1336599.

Ulepszone debugowanie problemów z plikami cookie innych firm

Chcąc zapewnić większą prywatność w internecie, a jednocześnie równolegle z aktualizacją innych przeglądarek wprowadziliśmy inicjatywę Piaskownica prywatności. Inicjatywa ta znacząco zwiększa prywatność w internecie i może utrzymać dobrze prosperującą sieć z reklamami oraz sprawi, że pliki cookie innych firm staną się przestarzałe. Piaskownica prywatności ma harmonogram stopniowego wycofywania, który pozwala wygodnie dostosowywać się do zmian.

Możesz już przetestować zachowanie Chrome po wycofaniu plików cookie innych firm. Aby to zrobić, uruchom Chrome z poziomu wiersza poleceń z flagą --test-third-party-cookies-phaseout. O działaniu tej flagi dowiesz się z artykułu Debugowanie plików cookie.

Niezależnie od tego, jak korzystasz z Chrome (z flagą czy bez niej), pole wyboru Uwzględnij problemy z plikami cookie innych firm na karcie Problemy jest teraz domyślnie włączone dla wszystkich nowych użytkowników Chrome. Oznacza to, że:

• Ostrzeżenie o zmianie powodującej niezgodność dotyczące nadchodzącego wycofania.
• Problemy związane z plikami cookie innych firm.

Jeśli chcesz, aby dotychczasowy użytkownik Chrome wyświetlał ostrzeżenia o nadchodzącym wycofaniu plików cookie, zaznacz to pole wyboru.

Aby to sprawdzić, sprawdź pliki cookie na tej stronie demonstracyjnej.

Dodatkowo filtr Zablokowane pliki cookie odpowiedzi w panelu Sieć został przeredagowany, aby jasno określić, że pokazuje tylko zablokowane pliki cookie odpowiedzi.

Problemy z Chromium: 1458839, 1462693, 1466310.

Debugowanie wstępnego wczytywania w panelu aplikacji

Zespół Chrome przywraca pełne wstępne renderowanie przyszłych stron, które użytkownicy prawdopodobnie będą odwiedzać. Aby umożliwić debugowanie, Narzędzia deweloperskie dodaje do panelu Aplikacja sekcję Wstępne wczytywanie. Nowe pobieranie z wyprzedzeniem i renderowanie z wyprzedzeniem (nazywane zbiorczo „wstępnym wczytywaniem nawigacji”) korzysta z interfejsu Speculation Rules API, a nie wskazówek dotyczących zasobów opartych na linkach.

Na tej stronie demonstracyjnej w aplikacji > Wstępne wczytywanie, w którym możesz sprawdzić:

• Reguły spekulacyjne, które zawierają listę wszystkich zestawów reguł znalezionych na bieżącej stronie.
• Wstępne wczytywanie zawiera listę wszystkich wstępnie pobranych i wyrenderowanych adresów URL z zestawów reguł.
• Ta strona zawiera informacje o wstępnie wyrenderowanym stanie bieżącej strony.

Więcej informacji znajdziesz w specjalnym poście na temat reguł spekulacyjnych debugowania.

Problem z Chromium: 1410709.

Nowe kolory

Zapewne już zauważyłeś, że Narzędzia deweloperskie mają teraz odświeżony wygląd, który lepiej pasuje do Chrome. Jednym z czynników, który ma tu znaczenie, jest nowy schemat kolorów.

Ta wersja (117) wprowadza więcej ulepszeń UX w Narzędziach deweloperskich, o których wspominamy już wcześniej i wspomnieliśmy w dalszej części e-maila, w tym ulepszyliśmy teksty w interfejsie.

Problem z Chromium: 1456677.

Lighthouse 10.4.0

Panel Lighthouse korzysta teraz z Lighthouse w wersji 10.4.0. W szczególności dodano nowe audyty ułatwień dostępu dotyczące:

• aria-dialog-name
• aria-text
• link-in-text-block
• select-name

Na przykład:

Zobacz też pełną listę zmian. Podstawowe informacje na temat korzystania z panelu Lighthouse w Narzędziach deweloperskich znajdziesz w artykule Lighthouse: optymalizacja szybkości witryny.

Problem z Chromium: 772558.

Rozszerzenie do debugowania C/C++ WebAssembly w Narzędziach deweloperskich jest teraz dostępne na zasadach open source

Rozszerzenie do debugowania WebAssembly C/C++ WebAssembly dla Narzędzi deweloperskich jest teraz typu open source i znajduje się w repozytorium frontendu DevTools. To rozszerzenie umożliwia debugowanie w Narzędziach deweloperskich w przypadku programów C++ skompilowanych do WebAssembly. Więcej informacji znajdziesz w artykule Debugowanie WebAssembly w C/C++.

Dowiedz się, jak stworzyć, uruchamiać i testować rozszerzenie, i dołącz do witryny.

Problem z Chromium: 1410709.

Różne wyróżnienia

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

• Zagnieżdżanie CSS: panel Elementy zawiera teraz cały łańcuch selektora zagnieżdżonych elementów podrzędnych (1172985).
• Aplikacja > Plik manifestu zawiera teraz sekcję Nakładka z elementami sterującymi okna, która sprawdza, czy w pliku manifestu znajduje się wartość display_override, i zawiera linki do odpowiedniej dokumentacji.
• Źródła > Drzewo stron wygląda teraz tak, jak na przykład (1442863):
  • Wyszarza foldery, jeśli cała ich zawartość jest wyświetlana na liście ignorowanych.
  • Foldery mają kolor pomarańczowy, jeśli cała ich zawartość pochodzi z mapy źródłowej.
• Wydajność: ustawienia nagrywania są teraz automatycznie ukrywane po rozpoczęciu nagrywania (1455498).
• Źródła > Edytor przywrócił działanie klawiszy Ctrl + Ctrl (Win) oraz Ctrl + Ctrl (MacOs) (1468208).
• Animacje > Przełącznik Wstrzymaj wszystko zachowuje swój stan po wczytaniu stron (1446046).
• Aplikacja > Miejsce na dane > Pamięć podręczna została przeniesiona do sekcji Aplikacja > Miejsce na dane > Cache section (1462622).
• Ulepszyliśmy niektóre teksty i etykietki interfejsu: Etykieta równoczesności sprzętu, Teksty filtra sieci i opcja menu głównego, wielkie litery w widoku drzewa aplikacji, Sieć > Teksty nagłówków, Źródła > Zastąpienia i teksty systemu plików.

Nowe funkcje eksperymentalne

Nowa emulacja renderowania: prefers-reduced-transparency

Użytkownicy Twojej witryny mogą włączyć na swoich urządzeniach nową, eksperymentalną funkcję multimediów CSS prefers-reduced-transparency, aby wskazać, że chcą ograniczyć przezroczyste efekty. Rozważ zastosowanie tej opcji w celu zwiększenia dostępności witryny. Aby Ci to ułatwić, karta panelu Renderowanie może teraz emulować ustawienie prefers-reduced-transparency: reduce. Dzięki temu możesz utworzyć prototyp rozwiązania i przetestować, jak w tym przypadku będzie działać witryna.

Aby przetestować tę funkcję w Chrome, włącz eksperymentalne funkcje platformy internetowej w przeglądarce chrome://flags.

Problem z Chromium: 1424879.

Monitor Enhanced Protocol

Narzędzia deweloperskie w Chrome korzystają z protokołu Chrome DevNarzędzia (CDP), aby umożliwiać testowanie, sprawdzanie, debugowanie i profilowanie przeglądarek Chrome. Jeśli jesteś programistą Chromium lub Narzędziami deweloperskimi, monitor protokołów umożliwia wyświetlanie wszystkich żądań i odpowiedzi CDP wysyłanych przez Narzędzia deweloperskie oraz wysyłanie poleceń CDP.

Monitor protokołów otrzymuje nowy interfejs, który ułatwia tworzenie i wysyłanie poleceń CDP. Nie musisz już szukać poleceń i ich parametrów w dokumentacji – Narzędzia deweloperskie zasugerują je Tobie.

W prawym dolnym rogu karty monitora protokołu kliknij Pokaż edytor poleceń CDP, wybierz element docelowy, zacznij wpisywać polecenie, wybierz jedno z sugerowanych poleceń, jeśli jest wymagane, określ wartości parametrów, a następnie kliknij Wyślij polecenie (Ctrl/Cmd + Enter).

Problem z Chromium: 1469345.

Pobierz kanały podglądu

Zastanów się, czy nie ustawić Chrome w wersji Canary, Dev lub beta jako domyślnej przeglądarki do programowania. Te kanały wersji testowej dają dostęp do najnowszych funkcji Narzędzi deweloperskich, umożliwiają testowanie najnowocześniejszych interfejsów API platformy internetowej i wykrywanie problemów w witrynie, zanim użytkownicy ją zobaczą.

Kontakt z zespołem ds. Narzędzi deweloperskich w Chrome

Skorzystaj z poniższych opcji, aby porozmawiać o nowych funkcjach i zmianach w poście lub o innych kwestiach związanych z Narzędziami deweloperskimi.

• Prześlij nam sugestię lub opinię na crbug.com.
• Aby zgłosić problem z Narzędziami deweloperskimi, kliknij Więcej opcji   > Pomoc > Zgłoś problemy z Narzędziami deweloperskimi w Narzędziach deweloperskich.
• Opublikuj tweeta na stronie @ChromeDevTools.
• Napisz komentarz w filmach w YouTube o nowościach w Narzędziach deweloperskich lub o filmach w YouTube ze wskazówkami dotyczącymi Narzędzi deweloperskich.

Co nowego w Narzędziach deweloperskich

Lista wszystkich tematów, które zostały omówione w serii Co nowego w Narzędziach deweloperskich.