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

Ulepszenia panelu Sieć

Jeszcze szybsze zastępowanie treści internetowych lokalnie

Funkcja zastępowania lokalnego została uproszczona, dzięki czemu możesz łatwo symulować nagłówki odpowiedzi i zawartość internetową zasobów zdalnych z panelu Sieć bez dostępu do tych zasobów.

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

Jeśli masz skonfigurowane zastąpienia lokalne, ale są one wyłączone, Narzędzia deweloperskie je włączają. Jeśli nie masz jeszcze skonfigurowanych tych ustawień, na pasku czynności u góry pojawi się odpowiedni komunikat. Wybierz folder, w którym mają być przechowywane zastąpienia, i pozwalaj na dostęp do niego w narzędziach DevTools.

Gdy zastąpione wartości zostaną skonfigurowane, DevTools przeniesie Cię do sekcji Źródła > Zastąpienia > Edytor, aby umożliwić zastąpienie zawartości strony internetowej.

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 żądań pobierania

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

Narzędzie DevTools obsługuje obecnie zastąpienia treści w przypadku tych typów żądań: obrazy (np. avif, png), czcionki, fetch i XHR, skrypty (css i js) oraz dokumenty (html). W narzędziu DevTools opcja Zastąp zawartość jest teraz wyszarzona na szaro w przypadku nieobsługiwanych typów.

Problemy z Chromium: 792101, 1469776.

Ukrywanie żądań rozszerzeń Chrome

Aby ułatwić Ci skupienie się na tworzonym kodzie i odfiltrowywanie nieistotnych żądań wysyłanych przez rozszerzenia zainstalowane w Chrome, panel Sieć ma teraz nowy filtr.

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

Problemy z Chromium: 1257885, 1458803.

Kody stanu HTTP zrozumiałe dla człowieka

Kod stanu w nagłówku żądania zawiera teraz tekst zrozumiały dla człowieka obok kodów stanu HTTP, dzięki czemu szybciej możesz się dowiedzieć, co stało się z żądaniem.

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

Problem z Chromium: 1153956.

Odpowiedzi w czytelnym formacie w przypadku podtypów danych JSON

Karta Odpowiedź w przypadku żądania z podtypem MIME application/[subtype]+json (na przykład ld+json, hal+json i inne) poprawnie analizuje odpowiedź i umożliwia jej upiększenie.

Problem z Chromium: 406900.

Wydajność: sprawdzanie zmian priorytetu pobierania zdarzeń sieciowych

W panelu Skuteczność w sekcji Podsumowanie zdarzenia na ścieżce Sieć są teraz widoczne 2 pola priorytetu: Początkowy priorytet i (ostateczny) Priorytet, a nie tylko Priorytet. Dzięki temu dodatkowemu polu możesz sprawdzić, czy priorytet pobierania zdarzenia się zmienił, i zmienić kolejność pobierania. Więcej informacji znajdziesz w artykule Optymalizowanie wczytywania zasobów za pomocą interfejsu Fetch Priority API.

Te same informacje znajdziesz też w kolumnie Priorytet w panelu Sieć, jeśli włączysz ustawienie Wielkie żądania.

Problemy z Chromium: 1463901, 1380964.

Domyślne ustawienia źródeł: zwijanie kodu i automatyczne ujawnianie plików

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

Aby złożyć blok kodu, najedź kursorem na numer wiersza obok początku bloku i kliknij ikonę złożenia . Aby ponownie rozwinąć blok, kliknij {...}.

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

Dzięki temu ustawieniu drzewo plików w sekcji Źródła > Strona wybiera aktualnie otwarty plik w Edytorze, gdy przełączasz karty.

Problemy z Chromium: 1459193, 1336599.

Ulepszenie debugowania problemów z plikami cookie innych firm

Aby pomóc w budowaniu bardziej prywatnego internetu i równolegle z aktualizacjami innych przeglądarek, Chrome wprowadził inicjatywę Piaskownicę prywatności. Ta inicjatywa znacznie zwiększa prywatność w internecie i może zapewnić zdrowy internet z reklamami w sposób, który sprawi, że pliki cookie innych firm staną się przestarzałe. Piaskownica prywatności ma oś czasu stopniowego wycofywania, aby umożliwić Ci wygodne dostosowanie się do zmian.

Możesz już przetestować, jak będzie zachowywać się Chrome po wycofaniu plików cookie innych firm. Aby to zrobić, uruchom Chrome z wiersza poleceń z flagą --test-third-party-cookies-phaseout. Aby dowiedzieć się, do czego służy ten parametr, zapoznaj się z artykułem Debugowanie plików cookie.

Niezależnie od tego, czy używasz flagi, czy nie, na karcie Problemy znajduje się teraz pole wyboru Uwzględnij problemy z plikami cookie innych firm, które jest domyślnie zaznaczone dla wszystkich nowych użytkowników Chrome. W rezultacie raportuje ono:

• Ostrzeżenie o zmianie wprowadzanej stopniowo.
• problemy związane z plikami cookie innych firm.

Jeśli chcesz widzieć ostrzeżenia o przyszłej fazie wycofywania plików cookie, zaznacz to pole.

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

Dodatkowo w panelu Sieć zmieniliśmy opis filtra Zablokowane pliki cookie odpowiedzi, aby wyraźnie wskazywał, że wyświetla tylko zablokowane pliki cookie odpowiedzi.

Problemy z Chromium: 1458839, 1462693, 1466310.

Debugowanie wstępnego wczytywania w panelu Aplikacja

Zespół Chrome przywraca pełne prerenderowanie stron, które użytkownik prawdopodobnie odwiedzi. Aby umożliwić debugowanie, Narzędzia deweloperskie dodają sekcję Wstępny załadunek do panelu Aplikacja. Nowe pobieranie w poprzedniej kolejności i wstępne renderowanie (zwane zbiorczo „wstępnym wczytywaniem nawigacji”) korzysta z interfejsu Speculation Rules API, a nie z wskazówek dotyczących zasobów opartych na linkach.

Na tej stronie demonstracyjnej w sekcji Aplikacja > Wczytywanie z poziomu serwera możesz sprawdzić:

• Reguły spekulacyjne, na której znajduje się lista wszystkich zestawów reguł znalezionych na bieżącej stronie.
• Wstępne załadowania – lista 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ępnie wyrenderowanej bieżącej strony.

Więcej informacji znajdziesz w artykule poświęconym debugowaniu reguł spekulacji.

Problem z Chromium: 1410709.

Nowe kolory

Zauważysz pewnie, że Narzędzia programistyczne mają teraz odświeżony wygląd, który lepiej pasuje do Chrome. Jednym z nich jest nowy schemat kolorów.

Ta wersja (117) zawiera więcej ulepszeń UX w narzędziach dla deweloperów, w tym już wspomniane i wymienione poniżej, w tym kilka ulepszeń tekstu interfejsu.

Problem z Chromium: 1456677.

Lighthouse 10.4.0

Panel Lighthouse korzysta teraz z wersji Lighthouse 10.4.0. Najważniejsze jest to, że w tej wersji 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. Podstawy korzystania z panelu Lighthouse w Narzędziach deweloperskich znajdziesz w artykule Lighthouse: optymalizacja szybkości witryny.

Problem z Chromium: 772558.

Rozszerzenie do debugowania WebAssembly w C/C++ dla Narzędzi deweloperskich jest teraz dostępne jako oprogramowanie open source

Rozszerzenie do debugowania WebAssembly w C/C++ dla Narzędzi deweloperskich jest teraz dostępne jako oprogramowanie open source i znajduje się w repozytorium front-endu Narzędzi deweloperskich. To rozszerzenie umożliwia debugowanie w Narzędziach deweloperskich w przypadku programów C++, które zostały skompilowane do WebAssembly. Więcej informacji znajdziesz w artykule Debugowanie kodu C/C++ w WebAssembly.

Dowiedz się, jak skompilować, uruchomić i przetestować rozszerzenie, i skorzystaj z opcji wspołania.

Problem z Chromium: 1410709.

Inne najciekawsze momenty

Oto kilka istotnych poprawek i ulepszeń w tej wersji:

• Zespolone elementy CSS: panel Elementy pokazuje teraz cały łańcuch selektora dla zagnieżdżonych podrzędnych elementów (1172985).
• W sekcji Aplikacja > Plik manifestu pojawiła się sekcja Okno sterowania, która sprawdza, czy w pliku manifestu występuje wartość display_override, oraz zawiera linki do odpowiedniej dokumentacji.
• Drzewo Źródła > Strona umożliwia teraz m.in. (1442863):
  • Wygasza foldery, jeśli wszystkie ich treści znajdują się na liście ignorowanych.
  • Koloruje foldery na pomarańczowo, jeśli wszystkie ich zawartości pochodzą z mapy źródłowej.
• Wydajność: ustawienia rejestrowania są teraz automatycznie ukrywane po rozpoczęciu nagrywania (1455498).
• Źródła > Edytor przywrócił zachowanie Ctrl + Strzałka (Windows) i Opt + Strzałka (MacOs) (1468208).
• Przełącznik Animacje > Wstrzymaj wszystkie zachowuje teraz swój stan podczas wczytywania kolejnych stron (1446046).
• Aplikacja > Pamięć wewnętrzna > Pamięć podręczna przeniesione do sekcji Aplikacja > Pamięć wewnętrzna > Pamięć podręczna (1462622).
• Ulepszono niektóre teksty i etykiety w interfejsie: etykieta obsługi równoczesności sprzętowej, teksty filtra sieciowego i opcji menu głównego, wielkość liter w widoku drzewa aplikacji, teksty w sekcji Sieć > Nagłówki, 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ę multimediów CSS, aby wskazać, że wolą ograniczyć przezroczyste efekty. Warto wziąć pod uwagę tę preferencję, aby zwiększyć ułatwienia dostępu w witrynie. Aby Ci pomóc, na karcie Renderowanie w drawerze możesz teraz emulować ustawienie prefers-reduced-transparency: reduce, dzięki czemu możesz utworzyć prototyp rozwiązania i sprawdzić, jak w tym przypadku zachowuje się Twoja witryna.

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

Problem z Chromium: 1424879.

Monitorowanie zaawansowane

Narzędzia deweloperskie w Chrome korzystają z protokołu Chrome DevTools (CDP) do instrumentowania, sprawdzania, debugowania i profilowania przeglądarek Chrome. Jeśli jesteś deweloperem Chromium lub DevTools, monitor protokołu umożliwia wyświetlanie wszystkich próśb i odpowiedzi CDP wysyłanych przez DevTools oraz wysyłanie poleceń CDP.

Monitor protokołu ma teraz 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 Ci podpowiadać.

W prawym dolnym rogu karty Monitorowanie protokołów kliknij  Pokaż edytor poleceń CDP, wybierz cel, zacznij wpisywać polecenie, wybierz jedno z zaproponowanych poleceń (jeśli to konieczne), określ wartości parametrów i kliknij  Wyślij polecenie (Ctrl/Cmd + Enter).

Problem z Chromium: 1469345.

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