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 symulować nagłówki odpowiedzi i zawartość internetową zasobów zdalnych z panelu Sieć bez dostępu do tych zasobów.

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 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 Źródeł > Zastąpień > Edytowanie, 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ędziach deweloperskich opcja Zastąp treść jest teraz wyszarzona 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 odfiltrowanie 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 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.

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. To dodatkowe pole pozwala 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 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 wyświetlanie plików

Opcja Ustawienia > Preferencje > Zawijanie 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 . 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

Chcąc zapewnić większą prywatność w internecie, a jednocześnie równolegle z aktualizacją innych przeglądarek wprowadziliśmy inicjatywę Piaskownica 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. O działaniu tej flagi dowiesz się z artykułu Debugowanie plików cookie.

Niezależnie od tego, czy używasz Chrome z flagą, czy bez, 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 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żytkownik prawdopodobnie odwiedzi. Aby umożliwić debugowanie, Narzędzia deweloperskie dodają sekcję Wstępny załadunek do panelu Aplikacja. 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 sekcji Aplikacja > Wczytywanie wstępne możesz sprawdzić:

• Reguły spekulacyjne, które zawierają listę 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 specjalnym poście na temat reguł spekulacyjnych debugowania.

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 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. 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++ skompilowanych do WebAssembly. Więcej informacji znajdziesz w artykule Debugowanie kodu C/C++ w WebAssembly.

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

Problem z Chromium: 1410709.

Inne wyróżnione informacje

Oto kilka ważnych 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).
• 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.
• 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.
  • Kolory folderów na pomarańczowo, jeśli wszystkie ich zawartości pochodzą z mapy źródłowej.
• Wydajność: ustawienia nagrywania 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 została przeniesiona do sekcji Aplikacja > Pamięć > 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. Rozważ zastosowanie tej opcji w celu zwiększenia dostępności witryny. Aby ułatwić Ci pracę, 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, możesz używać monitora protokołu do wyświetlania wszystkich próśb i odpowiedzi CDP wysyłanych przez DevTools oraz do wysyłania 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 przeglądarki Chrome Canary, Dev lub Beta jako domyślnej przeglądarki deweloperskiej. 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

Użyj poniższych opcji, aby omówić nowe funkcje, aktualizacje lub inne informacje związane z Narzędziami deweloperskimi.

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