Ukryj prośby o rozszerzenia i inne ulepszenia w panelu Sieć

Silvia Eremia
Silvia Eremia
Ioana Forfota
Ioana Forfota

W Narzędziach deweloperskich w Chrome jednym z najczęściej używanych narzędzi jest panel Sieć, który zawiera cenne informacje o aktywności sieciowej strony internetowej.

W tym artykule przedstawiamy zestaw bardzo pożądanych ulepszeń panelu Network, które Ioana Forfota i Silvia Eremia wprowadziły w ramach stażu STEP. Te długo oczekiwane ulepszenia zostały starannie wybrane z obszernej listy oczekujących poprawek w śledziku błędów Chromium. Dzięki nim panel jest bardziej dostępny, intuicyjny i bardziej przydatny.

Dzięki tym nowym funkcjom panel Sieć umożliwia deweloperom stron internetowych:

  • Skoncentruj się tylko na odpowiednich żądaniach sieci.
  • zrozumieć kody stanu HTTP bez konieczności korzystania z odniesień zewnętrznych;
  • Szybko znajduj i rozwiązuj błędy żądań.
  • Informacje o odpowiedziach typu podtypu JSON.

Czytaj dalej, aby dowiedzieć się więcej.

Filtrowanie żądań dotyczących rozszerzeń do Chrome

Rozszerzenia Chrome mogą wysyłać własne żądania sieci, które są widoczne w panelu Sieć obok żądań strony. Jeśli nie rozwijasz aktywnie rozszerzenia, te prośby prawdopodobnie nie będą miały dla Ciebie znaczenia. Wcześniej jedynym sposobem na ich ukrycie było użycie filtra -scheme:chrome-extension lub debugowanie w trybie incognito.

Od wersji 117 Chrome jest to łatwiejsze. Aby uporządkować panel Sieć, w Narzędziach deweloperskich możesz teraz zaznaczyć pole wyboru, aby wykluczyć żądania rozszerzeń Chrome.

Trwają dyskusje na temat domyślnego stanu tej funkcji. Początkowo rozważaliśmy włączenie tej funkcji domyślnie, ponieważ zakładaliśmy, że może ona poprawić wrażenia większości użytkowników. Jednak takie podejście może spowodować, że niektórzy użytkownicy nie będą wiedzieć, że adresy URL rozszerzeń Chrome mogą wywoływać prośby. Może to też stanowić problem dla twórców rozszerzeń. Dlatego stan domyślny jest ustawiony na „wyłączony”.

Żądania sieci są wyświetlane w panelu wraz z żądaniami z witryny.
Wcześniej: można było zobaczyć żądania sieci z rozszerzeń do Chrome.
Żądania sieciowe są ukryte.
Po: żądania sieci z rozszerzeń do Chrome są ukryte.

Po zaznaczeniu tego pola lista żądań będzie czystsza, mniej rozpraszająca i bardziej skupiona na żądaniach, które mają największe znaczenie. Dzięki temu debugowanie będzie znacznie przyjemniejsze.

Teksty stanów odpowiedzi HTTP

Kody stanu HTTP są niezbędne do skutecznego debugowania. Jednak ciągłe sprawdzanie ich znaczeń może być niewygodne. W DevTools wprowadziliśmy przydatną funkcję: gdy najedziesz kursorem na kod stanu na liście żądań, natychmiast pojawi się etykieta z tekstem stanu – opisowym tytułem, który wyjaśnia jego znaczenie.

Etykieta wyświetlana po najechaniu kursorem na kod stanu.

Tekst stanu jest też widoczny w widoku nagłówków tuż obok kodu. Te funkcje były wcześniej dostępne tylko w przypadku HTTP/1.1, ale teraz obsługują też HTTP/2 i HTTP/3. Te pozornie niewielkie zmiany mają duży wpływ. Pozwalają zaoszczędzić czas i skupić się na debugowaniu, a nie na szukaniu znaczenia kodu.

Tekst stanu wyświetlany w nagłówkach.

Ulepszona widoczność błędów

Ułatwiliśmy szybkie wykrywanie błędów i ich rozwiązywanie bez konieczności zagłębiania się w panel. Aby to osiągnąć, zamiast wyróżniania komunikatów o błędach za pomocą koloru tekstu, dodaliśmy ikony wskazujące błędy żądania, np. te z kodem stanu 404. Te subtelne, ale przydatne wskaźniki sprawią, że błędy będą bardziej widoczne, dzięki czemu nie przeoczysz ważnych problemów.

Błąd jest wyróżniony ikoną i kolorem.

Formatowanie podtypów danych JSON

Programowanie internetowe często wymaga sprawdzania odpowiedzi w formacie JSON, ale odczytywanie niesformatowanych plików JSON jest bardzo niewygodne. Praca z takimi odpowiedziami, zwłaszcza z podtypami takimi jak ld+json, hal+json czy sparql-results+json, może być uciążliwa, np. gdy pojawiają się one w jednym wierszu. Aby ułatwić pracę, w DevTools wprowadziliśmy bardziej przyjazną dla użytkownika, składaną prezentację podtypów JSON. Teraz odpowiedzi są formatowane, dzięki czemu deweloperzy nie muszą polegać na zewnętrznych narzędziach. Ta nowa wersja zapewnia prostą i bardzo czytelną prezentację.

Dane JSON są wyświetlane jako długi ciąg znaków, który wymaga przewijania, aby można było go zobaczyć.
Wcześniej: odpowiedź LD+JSON nie była ładnie drukowana.
Formatowanie JSON ułatwia czytanie.
Po: odpowiedź LD+JSON jest ładnie wydrukowana.

pozytywne opinie społeczności,

Chociaż te funkcje są dopiero na początku swojej drogi, społeczność zareagowała na nie bardzo pozytywnie. Dzięki ich udanej implementacji wielu użytkowników jest zadowolonych z ulepszonych wrażeń. Niektóre odpowiedzi możesz przeczytać na stronie X:

„To świetne. ChromeDevTools właśnie wprowadziło nową funkcję wyświetlania kodów stanu HTTP w czytelnej dla człowieka formie, dzięki czemu łatwiej jest sprawdzić, co poszło nie tak z żądaniem sieciowym”. – TribalIdeas na X

„W ostatnim czasie było to bardzo pomocne. Especially dealing with forms with ad blockers and grammar extensions.” – MrAhmadAwais on X

Chcesz poznać nowe funkcje? Otwórz Narzędzia deweloperskie w Chrome i spróbuj korzystać z ulepszonego panelu Sieć. Powodzenia w debugowaniu!

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.