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

Sofia Emelianova
Sofia Emelianova
GitHub

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ść.

Opcje zastępowania w menu żądania.

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.

Wybierz folder i zezwól na dostęp do niego z paska działań u góry.

Po skonfigurowaniu zastąpień w Narzędziach deweloperskich kliknij Źródła > Zastąpienia > Edytor, aby umożliwić zastępowanie treści z internetu.

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

Ikona zastępowania obok żądania w panelu Sieć.

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 jako dodatek do nagłówków 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 Pole wyboru. Ukryj adresy URL rozszerzeń.

Adresy URL rozszerzeń są ukryte w tabeli żądań.

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.

Kody stanu HTTP „przed” i „po” w postaci czytelnych dla człowieka kodów stanu HTTP.

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.

Wartość przed i po analizie podtypu aplikacji/json w podglądzie odpowiedzi sieciowej.

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.

Przed i po wyświetleniu zmian priorytetu pobierania.

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

Kolumna Priorytet w panelu Sieć.

Problemy z Chromium: 1463901, 1380964.

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

Opcja Ustawienia. Ustawienia > Preferencje > Pole wyboru. 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 Zwiń.. Kliknij {...}, aby ponownie rozwinąć bryłę.

Oprócz tego domyślnie włączona jest opcja Ustawienia. Ustawienia > Preferencje > Pole wyboru. Automatycznie pokazuj pliki na pasku bocznym.

To ustawienie powoduje, że drzewo plików w sekcji Źródła > Strona wybiera bieżący plik 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 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.

Problemy z plikami cookie innych firm zgłoszone na karcie Problemy.

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

Pole wyboru jest włączone i pokazuje tylko żądania z zablokowanymi plikami 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 sekcji Aplikacja > Wstępne wczytywanie 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.

Przed i po zastosowaniu nowych 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:

Na przykład:

Nie udało się sprawdzić koloru linków, których nie da się odróżnić.

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.
  • Drzewo Źródła > Strona wykonuje teraz następujące operacje, w tym między innymi (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 + strzałka (Win) oraz Opt + strzałka (MacOs) (1468208).
  • Przełącznik Animacje > Wstrzymaj wszystko zachowuje swój stan po wczytaniu strony (1446046).
  • Aplikacja > Pamięć wewnętrzna > Pamięć podręczna została przeniesiona do sekcji Aplikacja > Pamięć > Pamięć podręczna (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 Lewy panel jest otwarty. 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. Wyślij polecenie (Ctrl/Cmd + Enter).

Określanie i wysyłanie polecenia CDP.

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   Więcej   > Pomoc > Zgłoś problemy z Narzędziami deweloperskimi.
  • Opublikuj tweeta na stronie @ChromeDevTools.
  • Napisz komentarz pod filmem dotyczącym nowości w Narzędziach deweloperskich w Narzędziach deweloperskich w YouTube lub 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.

Chrome 127

Chrome 126

Chrome 125

Chrome 124

Chrome 123

Chrome 122

Chrome 121

Chrome 120

Chrome 119

Chrome 118

Chrome 117

Chrome 116

Chrome 115

Chrome 114

Chrome 113

Chrome 112

Chrome 111

Chrome 110

Chrome 109

Chrome 108

Chrome 107

Chrome 106

Chrome 105

Chrome 104

Chrome 103

Chrome 102

Chrome 101

Chrome 100

Chrome 99

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Chrome 93

Chrome 92

Chrome 91

Chrome 90

Chrome 89

Chrome 88

Chrome 87

Chrome 86

Chrome 85

Chrome 84

Chrome 83

Chrome 82

Chrome 82 został anulowany.

Chrome 81

Chrome 80

Chrome 79

Chrome 78

Chrome 77

Chrome 76

Chrome 75

Chrome 74

Chrome 73

Chrome 72

Chrome 71

Chrome 70

Chrome 68

Chrome 67

Chrome 66

Chrome 65

Chrome 64

Chrome 63

Chrome 62

Chrome 61

Chrome 60

Chrome 59