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

Sofia Emelianova
Sofia Emelianova
GitHub

Ulepszenia panelu sieci

Jeszcze szybsze zastępowanie treści internetowych lokalnie

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

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

Opcje zastępowania w menu żądania.

Jeśli masz skonfigurowane zastąpienia lokalne, ale są wyłączone, zostaną one włączone w Narzędziach deweloperskich. Jeśli narzędzia deweloperskie nie są jeszcze skonfigurowane, 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 niego Narzędziom deweloperskim.

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

Po skonfigurowaniu zastąpień w Narzędziach deweloperskich możesz otworzyć Źródła > Zastąpienia > Edytor, aby zastępować treści internetowe.

Pamiętaj, że zastąpione zasoby są oznaczone symbolem Zapisano. w panelu Sieć. Najedź na tę ikonę, aby zobaczyć zastąpienie.

ikonę zastępowania obok żądania w panelu Sieć;

Problemy z Chromium: 1465785, 1470532, 1469359.

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

Możesz teraz zastąpić zawartość XHR i żądania pobierania oprócz ich nagłówków odpowiedzi. Dzięki takim zastąpieniom możesz imitować odpowiedzi interfejsu API, aby debugować stronę internetową, nawet jeśli Twój backend i interfejs API nie są jeszcze gotowe.

Narzędzia deweloperskie obsługują obecnie zastąpienia 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). W przypadku nieobsługiwanych typów w Narzędziach deweloperskich opcja Zastąp treść jest wyszarzona.

Problemy z Chromium: 792101, 1469776.

Ukryj żądania rozszerzeń do Chrome

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

Aby odfiltrować wszystkie żądania wysyłane do chrome-extension:// adresów URL, 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 zrozumiały dla człowieka tekst obok kodów stanu HTTP, dzięki czemu możesz szybciej dowiedzieć się, co się stało z żądaniem.

Przed i po wyświetleniu zrozumiałych 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.

Zastosuj formatowanie stylistyczne odpowiedzi dla podtypów JSON

Karta Response (Odpowiedź) dotycząca żądania z podtypem MIME application/[subtype]+json (np. ld+json, hal+json i inne) teraz prawidłowo analizuje odpowiedź i umożliwia jej wstępne oszacowanie.

Przed analizą podtypu application/json i po niej w podglądzie odpowiedzi sieciowej.

Problem z Chromium: 406900.

Wydajność: wyświetlanie zmian priorytetu pobierania zdarzeń sieciowych

W panelu Skuteczność w sekcji Podsumowanie zdarzenia na ścieżce Sieć widać teraz 2 pola priorytetu: Początkowy priorytet i Priorytet (końcowy), a nie tylko pojedynczy priorytet. To dodatkowe pole pozwala teraz sprawdzić, czy zmienił się priorytet pobierania w wydarzeniu, oraz dostosować kolejność pobierania. Więcej informacji znajdziesz w artykule Optymalizowanie wczytywania zasobów przy użyciu interfejsu Fetch Priority API.

Przed i po wyświetleniu zmian w priorytecie pobierania.

Te same informacje znajdziesz też w kolumnie Priorytet w panelu Sieć z włączonym ustawieniem Pole wyboru. Wiersze dużych żądań.

Kolumna Priorytet w panelu Sieć.

Problemy z Chromium: 1463901, 1380964.

Ustawienia źródeł domyślnie włączone: zwijanie kodu i automatyczne ujawnianie plików

Opcja Ustawienia. Ustawienia > Preferencje > Pole wyboru. Zwijanie kodu jest teraz domyślnie włączona. Ta opcja umożliwia złożenie 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łę.

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

To ustawienie powoduje, że po przełączeniu kart drzewo plików w sekcji Źródła > Strona powoduje wybranie bieżącego pliku w Edytorze.

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 aktualizacjami wprowadzanymi w innych przeglądarkach, Chrome wprowadził inicjatywę Piaskownica prywatności. Inicjatywa ta zasadniczo poprawia ochronę 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ę nieaktualne. Piaskownica prywatności ma harmonogram stopniowego wycofywania, który pozwala wygodnie dostosowywać się do zmian.

Możesz już przetestować, jak Chrome zachowuje się po wycofaniu plików cookie innych firm. Aby to zrobić, uruchom Chrome z poziomu wiersza poleceń z flagą --test-third-party-cookies-phaseout. Aby dowiedzieć się, do czego służy ta flaga, przeczytaj artykuł Debugowanie plików cookie.

Niezależnie od tego, jak korzystasz z Chrome (z flagą czy bez), na karcie Problemy jest teraz domyślnie włączone pole wyboru Pole wyboru. Uwzględnij problemy z plikami cookie innych firm dla wszystkich nowych użytkowników Chrome, dzięki czemu możesz tworzyć raporty:

  • Ostrzeżenie o zmianie powodującej niezgodność z nadchodzącym wycofaniem.
  • Problemy związane z plikami cookie innych firm.

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

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

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

Dodatkowo zmieniliśmy sformułowanie filtra Pole wyboru. Zablokowane pliki cookie odpowiedzi w panelu Sieć, aby było jasne, że pokazuje tylko zablokowane pliki cookie odpowiedzi.

Pole wyboru jest włączone i wyświetla tylko żądania z zablokowanymi plikami cookie odpowiedzi.

Problemy z Chromium: 1458839, 1462693, 1466310.

Debugowanie wstępnego wczytywania w panelu aplikacji

Zespół Chrome wycofuje pełne renderowanie wstępne przyszłych stron, które użytkownik prawdopodobnie odwiedzi. Aby umożliwić debugowanie, Narzędzia deweloperskie dodają sekcję Wstępne wczytywanie do panelu Aplikacja. Nowe pobieranie 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 obejmujące wszystkie zestawy reguł znalezione na bieżącej stronie.
  • Wstępne wczytywanie, które zawiera listę wszystkich wstępnie pobranych i wyrenderowanych adresów URL z zestawów reguł.
  • Ta strona zawiera informacje o wstępnym wyrenderowaniu stanu bieżącej strony.

Więcej informacji znajdziesz w odpowiednim poście o debugowaniu reguł spekulacyjnych.

Problem z Chromium: 1410709.

Nowe kolory

Jak już pewnie wiesz, 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.

Przed i po zastosowaniu nowych kolorów.

Ta wersja (117) zawiera więcej udoskonaleń dotyczących wygody użytkowania Narzędzi deweloperskich – w tym m.in. ulepszone teksty interfejsu.

Problem z Chromium: 1456677.

Lighthouse 10.4.0

Panel Lighthouse korzysta teraz z Lighthouse 10.4.0. W szczególności w tej wersji dodaliśmy nowe kontrole ułatwień dostępu dotyczące tych elementów:

Na przykład:

nie udało się sprawdzić koloru linków, który sprawia, że nie da się ich odróżnić;

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 C/C++ WebAssembly dla Narzędzi deweloperskich jest teraz dostępne na licencji open source

Rozszerzenie do debugowania C/C++ WebAssembly dla Narzędzi deweloperskich jest teraz dostępne na licencji open source i znajduje się w repozytorium frontendu Narzędzi dla programistów. To rozszerzenie umożliwia debugowanie w Narzędziach deweloperskich w przypadku programów C++ skompilowanych w WebAssembly. Więcej informacji znajdziesz w artykule o debugowaniu C/C++ WebAssembly.

Dowiedz się, jak utworzyć, uruchomić i przetestować rozszerzenie, oraz dołącz do niego.

Problem z Chromium: 1410709.

Inne ważne informacje

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

Nowe funkcje eksperymentalne

Nowa emulacja renderowania: prefers-reduced-transparency

Użytkownicy Twojej witryny mogą zacząć włączać na swoich urządzeniach nową, eksperymentalną funkcję multimediów CSS prefers-reduced-transparency, aby określić, jak chcą ograniczyć przezroczystość. Warto wziąć to pod uwagę, aby zwiększyć dostępność witryny. Aby Ci pomóc, na karcie panelu Renderowanie można 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ć Twoja witryna.

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

Problem z Chromium: 1424879.

Monitorowanie protokołu Enhanced

Narzędzia deweloperskie w Chrome korzystają z protokołu CDP (Chrome DevTools Protocol) do instrumentowania, sprawdzania, debugowania i profilowania przeglądarek Chrome. Jeśli programujesz Chromium lub DevTools, możesz skorzystać z monitora protokołów, aby wyświetlić wszystkie żądania i odpowiedzi CDP przesłane przez te narzędzia oraz wysłać polecenia CDP.

Do Monitorowania protokołów dodano nowy interfejs, który umożliwia łatwiejsze tworzenie i wysyłanie poleceń CDP. Nie musisz już szukać poleceń i ich parametrów w dokumentacji – Narzędzia deweloperskie zasugerują je.

W prawym dolnym rogu karty Monitorowanie protokołów kliknij Otwarto lewy panel. Pokaż edytor poleceń CDP, wybierz element docelowy, zacznij wpisywać polecenie, wybierz jedną z sugerowanych wartości (jeśli jest to wymagane), określ wartości parametrów i kliknij Wyślij. Wyślij polecenie (Ctrl/Cmd + Enter).

Określanie i wysyłanie polecenia CDP.

Problem z Chromium: 1469345.

Pobieranie kanałów podglądu

Jako domyślnej przeglądarki dla programistów możesz używać Chrome Canary, Dev lub Beta. Te kanały podglądu dają dostęp do najnowszych funkcji Narzędzi deweloperskich, umożliwiają testowanie najnowocześniejszych interfejsów API platform internetowych oraz wykrywanie problemów w witrynie, zanim zdołają zrobić użytkownicy.

Kontakt z zespołem Narzędzi deweloperskich w Chrome

Użyj poniższych opcji, aby omówić nowe funkcje i zmiany w poście lub wszelkie inne kwestie związane z Narzędziami dla deweloperów.

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

Co nowego w Narzędziach deweloperskich

Lista wszystkich omówionych funkcji w serii Co nowego w Narzędziach deweloperskich.

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

101 Chrome

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

Subskrypcja Chrome 82 została anulowana.

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