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

Ulepszenia panelu Sieć

Jeszcze szybsze zastępowanie treści internetowych lokalnie

Funkcja lokalnych zastąpień została uproszczona, dzięki czemu możesz łatwo imitować nagłówki odpowiedzi i treści internetowe zasobów zdalnych z poziomu panelu Sieć bez dostępu do nich.

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

Jeśli masz skonfigurowane lokalne zastąpienia, ale są one wyłączone, Narzędzia deweloperskie je włączą. Jeśli nie masz jeszcze skonfigurowanych punktów przerwania, w pasku działań u góry Narzędzia deweloperskie wyświetlą odpowiedni komunikat. Wybierz folder, w którym mają być przechowywane zastąpienia, i przyznaj do niego dostęp Narzędziom deweloperskim.

Po skonfigurowaniu zastąpień Narzędzia deweloperskie przeniosą Cię do sekcji Źródła > Zastąpienia > Edytor, aby umożliwić Ci zastąpienie treści internetowych.

Zwróć uwagę, że zastąpione zasoby są oznaczone symbolem  w panelu Sieć. Najedź kursorem na ikonę, aby zobaczyć, co zostało zastąpione.

Problemy z Chromium: 1465785, 1470532, 1469359.

Zastępowanie treści żądań XHR i fetch

Możesz teraz zastępować zawartość żądań XHR i fetch, a także nagłówki odpowiedzi. Dzięki takim zastąpieniom możesz symulować 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ępowanie treści w przypadku tych typów żądań: obrazów (np. avif, png), czcionek, pobierania i XHR, skryptów (css i js) oraz dokumentów (html). Narzędzia deweloperskie wyszarzają teraz opcję Zastąp treść w przypadku nieobsługiwanych typów.

Problemy z Chromium: 792101, 1469776.

Ukrywanie próśb o rozszerzenia Chrome

Aby ułatwić Ci skupienie się na pisanym przez Ciebie kodzie i odfiltrowanie nieistotnych żądań wysyłanych przez rozszerzenia zainstalowane w Chrome, w panelu Sieć pojawi się nowy filtr.

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

Problemy z Chromium: 1257885, 1458803.

Kody stanu HTTP zrozumiałe dla człowieka

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

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

Problem w Chromium: 1153956.

Formatowanie odpowiedzi dla podtypów JSON

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

Problem z Chromium: 406900.

Skuteczność: sprawdź zmiany priorytetu pobierania w przypadku zdarzeń sieciowych

W panelu Skuteczność w podsumowaniu zdarzenia na ścieżce Sieć są teraz wyświetlane 2 pola priorytetu: Priorytet początkowy i (ostateczny) Priorytet, a nie tylko jedno pole Priorytet. Dzięki temu dodatkowemu polu możesz teraz sprawdzić, czy priorytet pobierania zdarzenia się zmienia, i dostosować kolejność pobierania. Więcej informacji znajdziesz w artykule Optymalizowanie ładowania zasobów za pomocą interfejsu Fetch Priority API.

Te same informacje znajdziesz też w kolumnie Priorytet w panelu Sieć, gdy włączone jest ustawienie Wiersze dużych żądań.

Problemy z Chromium: 1463901, 1380964.

Ustawienia źródeł włączone domyślnie: zwijanie kodu i automatyczne wyświetlanie pliku

Opcja Ustawienia > Ustawienia > Zwinięcie 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 początku bloku i kliknij ikonę zwijania . Aby ponownie rozwinąć blok, kliknij {...}.

Ponadto domyślnie włączona jest opcja Ustawienia > Preferencje > Automatycznie wyświetlaj pliki na pasku bocznym.

To ustawienie powoduje, że drzewo plików w sekcji Źródła > Strona wybiera bieżący plik otwarty w Edytorze, gdy przełączasz karty.

Problemy z Chromium: 1459193, 1336599.

Ulepszone debugowanie problemów z plikami cookie innych firm

Aby pomóc w budowaniu bardziej prywatnej sieci i równolegle z aktualizacjami innych przeglądarek, Chrome wprowadził inicjatywę Piaskownica prywatności. Ta inicjatywa zasadniczo zwiększa poziom prywatności w internecie i może utrzymać zdrową sieć z reklamami w sposób, który sprawi, że pliki cookie innych firm staną się przestarzałe. Piaskownica prywatności ma stopniowy harmonogram wycofywania, dzięki czemu możesz wygodnie dostosować się do zmian.

Możesz już przetestować, jak Chrome będzie działać po wycofaniu plików cookie innych firm. Aby to zrobić, uruchom Chrome z wiersza poleceń z flagą --test-third-party-cookies-phaseout. Więcej informacji o tym, co robi ten parametr, znajdziesz w sekcji Debugowanie plików cookie.

Niezależnie od tego, czy używasz Chrome z tym flagą, czy bez niej, karta Problemy ma teraz domyślnie zaznaczone pole wyboru Uwzględnij problemy z plikami cookie innych firm dla wszystkich nowych użytkowników Chrome. W związku z tym zgłasza:

• Ostrzeżenie o nadchodzącym wycofaniu usługi, które spowoduje zmianę w działaniu.
• problemy związane z plikami cookie innych firm;

Jeśli jesteś użytkownikiem Chrome i chcesz wyświetlać ostrzeżenia o plikach cookie dotyczące nadchodzącego wycofania, zaznacz to pole wyboru.

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

Dodatkowo filtr Zablokowane pliki cookie odpowiedzi w panelu Sieć został przeformułowany, aby było jasne, że wyświetla on tylko zablokowane pliki cookie odpowiedzi.

Problemy z Chromium: 1458839, 1462693, 1466310.

Debugowanie wstępnego wczytywania w panelu Aplikacja

Zespół Chrome przywraca pełne wstępne renderowanie przyszłych stron, do których użytkownik prawdopodobnie przejdzie. Aby ułatwić Ci debugowanie, Narzędzia deweloperskie dodają sekcję Wstępne wczytywanie do panelu Aplikacja. Nowe wstępne pobieranie i wstępne renderowanie (zwane łącznie „wstępnym wczytywaniem nawigacyjnym”) korzysta z interfejsu Speculation Rules API, a nie ze wskazówek dotyczących zasobów opartych na linkach.

Na tej stronie demonstracyjnej wstępnego renderowania w sekcji Aplikacja > Wstępne wczytywanie możesz sprawdzić:

• Reguły spekulacyjne, która zawiera listę wszystkich zbiorów reguł znalezionych na bieżącej stronie.
• Wstępne załadowania, które zawierają listę wszystkich wstępnie pobranych i wstępnie wyrenderowanych adresów URL z zestawów reguł.
• Ta strona, na której wyświetla się stan wstępnego renderowania bieżącej strony.

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

Problem w Chromium: 1410709.

Nowe kolory

Pewnie już wiesz, że narzędzia deweloperskie mają teraz odświeżony wygląd, który lepiej pasuje do Chrome. Jednym z czynników jest nowy schemat kolorów.

Wersja 117 wprowadza kolejne ulepszenia interfejsu Narzędzi deweloperskich, zarówno te wymienione wcześniej, jak i te, które znajdziesz na liście poniżej. Obejmują one m.in. ulepszone teksty interfejsu.

Problem w Chromium: 1456677.

Lighthouse 10.4.0

Panel Lighthouse działa teraz w wersji 10.4.0. W tej wersji dodaliśmy nowe audyty ułatwień dostępu dotyczące tych elementów:

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

Na przykład:

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

Problem w Chromium: 772558.

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

Rozszerzenie do debugowania C/C++ WebAssembly w Narzędziach deweloperskich jest teraz oprogramowaniem typu open source i znajduje się w repozytorium interfejsu Narzędzi deweloperskich. To rozszerzenie włącza w Narzędziach deweloperskich funkcje debugowania programów w C++ skompilowanych do WebAssembly. Więcej informacji znajdziesz w artykule Debugowanie kodu C/C++ w WebAssembly.

Dowiedz się, jak tworzyć, uruchamiać i testować rozszerzenie, i zachęcamy do współpracy.

Problem w Chromium: 1410709.

Różne wyróżnione informacje

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

• Zagnieżdżanie CSS: panel Elementy wyświetla teraz cały łańcuch selektorów dla zagnieżdżonych elementów podrzędnych (1172985).
• W sekcji Aplikacja > Manifest znajduje się teraz sekcja Nakładka elementów sterujących oknem, która sprawdza, czy w pliku manifestu występuje wartość display_override, i zawiera linki do odpowiedniej dokumentacji.
• Drzewo Źródła > Strona wykonuje teraz te czynności, m.in. (1442863):
  • Wyszarza foldery, jeśli cała ich zawartość znajduje się na liście ignorowanych.
  • Koloruje foldery na pomarańczowo, jeśli wszystkie ich treści pochodzą z mapy źródłowej.
• Wydajność: Ustawienia przechwytywania są teraz automatycznie ukrywane po rozpoczęciu nagrywania (1455498).
• Źródła > Edytor przywrócono działanie skrótów Ctrl + strzałka (Windows) i Opt + strzałka (macOS) (1468208).
• Przełącznik Animacje > Wstrzymaj wszystko zachowuje teraz swój stan podczas wczytywania stron (1446046).
• Aplikacja > Pamięć > Pamięć podręczna przeniesiono do sekcji Aplikacja > Pamięć > Pamięć podręczna (1462622).
• Ulepszyliśmy niektóre teksty interfejsu i etykietki: etykietkę współbieżności sprzętowej, teksty filtrów sieciowych i opcję menu głównego, wielkie litery w widoku drzewa aplikacji, teksty w sekcji Sieć > Nagłówki oraz teksty w sekcji Źródła > Zastąpienia i System plików.

Nowe funkcje eksperymentalne

Nowa emulacja renderowania: prefers-reduced-transparency

Użytkownicy Twojej witryny mogą zacząć włączać na swoich urządzeniach nową eksperymentalną prefers-reduced-transparencyfunkcję multimedialną CSS, aby wskazać, że wolą ograniczyć efekty przezroczystości. Możesz wziąć pod uwagę tę preferencję, aby zwiększyć dostępność witryny. Aby Ci w tym pomóc, karta panelu Renderowanie może teraz emulować ustawienie prefers-reduced-transparency: reduce, dzięki czemu możesz stworzyć prototyp rozwiązania i sprawdzić, jak witryna zachowuje się w tym przypadku.

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

Problem w Chromium: 1424879.

Monitor protokołów rozszerzonych

Narzędzia deweloperskie w Chrome korzystają z protokołu narzędzi deweloperskich w Chrome (CDP), aby instrumentować, sprawdzać, debugować i profilować przeglądarki Chrome. Jeśli jesteś programistą Chromium lub Narzędzi deweloperskich, monitor protokołu umożliwia wyświetlanie wszystkich żądań i odpowiedzi CDP wysyłanych przez Narzędzia deweloperskie oraz wysyłanie poleceń CDP.

Monitor protokołu ma 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 będą je sugerować.

W prawym dolnym rogu karty Monitor protokołu kliknij  Pokaż edytor poleceń CDP, wybierz cel, zacznij wpisywać polecenie, wybierz jedno z sugerowanych poleceń, w razie potrzeby określ wartości parametrów i kliknij  Wyślij polecenie (Ctrl/Cmd + Enter).

Problem w Chromium: 1469345.

Pobieranie kanałów podglądu

Rozważ używanie Chrome w wersji Canary, deweloperskiej lub beta jako domyślnej przeglądarki do programowania. Te kanały wersji testowych zapewniają dostęp do najnowszych funkcji Narzędzi deweloperskich, umożliwiają testowanie najnowocześniejszych interfejsów API platformy internetowej i pomagają znajdować problemy w witrynie, zanim zrobią to użytkownicy.

Kontakt z zespołem Narzędzi deweloperskich w Chrome

Skorzystaj z tych opcji, aby porozmawiać o nowych funkcjach, aktualizacjach lub innych kwestiach związanych z Narzędziami deweloperskimi.

• Prześlij nam opinię 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.
• Dodawaj komentarze do filmów na YouTube z serii „Co nowego w Narzędziach deweloperskich” lub filmów na YouTube z serii „Wskazówki dotyczące Narzędzi deweloperskich”.

Co nowego w Narzędziach deweloperskich

Lista wszystkich tematów omówionych w serii Nowości w Narzędziach deweloperskich.