Panel Sieć w Narzędziach deweloperskich w Chrome, dostarczający cennych informacji o aktywności sieciowej stron internetowych, to jedno z najczęściej używanych narzędzi.
W tym artykule omawiamy szereg ulepszeń w panelu Network, które Ioana Forfota i Silvia Eremia wprowadziły w trakcie stażu w programie STEP. Wprowadziliśmy te usprawnienia z niecierpliwością. Zostały one starannie wybrane z obszernej listy zaległości z narzędzia do śledzenia problemów w Chromium, dzięki czemu panel jest bardziej dostępny, intuicyjny i bogaty w informacje.
Dzięki nowym funkcjom panel Sieć umożliwia programistom stron internetowych:
- Skoncentruj się tylko na trafnych żądaniach sieciowych.
- Kody stanu HTTP są rozumiene bez konieczności stosowania odwołań z zewnątrz.
- Szybkie identyfikowanie i rozwiązywanie błędów w żądaniach.
- Omówienie odpowiedzi podtypów JSON.
Czytaj dalej, aby poznać więcej szczegółów.
Filtruj żądania rozszerzeń do Chrome
Rozszerzenia do Chrome mogą tworzyć własne żądania sieciowe, które pojawiają się obok żądań strony w panelu Sieć. Jeśli nie tworzysz aktywnie rozszerzeń, te prośby prawdopodobnie nie będą dla Ciebie istotne. Wcześniej jedynym sposobem ich ukrycia było użycie filtra -scheme:chrome-extension lub debugowania w trybie incognito.
Od wersji Chrome 117 jest to łatwiejsze. Aby ułatwić Ci pracę w panelu Sieć, w Narzędziach deweloperskich znajdziesz teraz pole wyboru do wykluczania żądań rozszerzeń do Chrome.
Trwają dyskusje na temat domyślnego stanu tej funkcji. Początkowo rozważaliśmy włączenie tej funkcji domyślnie, mając pewność, że może ona poprawić wygodę większości użytkowników. Niektórzy użytkownicy mogą jednak nie wiedzieć, że adresy URL rozszerzeń do Chrome mogą wywoływać żądania. Może to też stanowić problem dla programistów rozszerzeń. Dlatego domyślnie ustawiona jest wartość „Wyłączone”.
Gdy to pole wyboru jest włączone, Twoja lista żądań będzie bardziej przejrzysta, będzie się lepiej skupiać na żądaniach, które są dla Ciebie najważniejsze. Debugowanie będzie bardziej przyjemne w użyciu.
Teksty stanu odpowiedzi HTTP
Poznanie kodów stanu HTTP jest niezbędne do skutecznego debugowania. Jednak ciągłe wyszukiwanie ich znaczeń może być niewygodne. W Narzędziach deweloperskich wprowadziliśmy przydatne ulepszenie: gdy najedziesz kursorem na kod stanu na liście żądań, etykietka natychmiast wyświetli tekst stanu – opisowy tytuł, który wyjaśnia znaczenie elementu.
Tekst stanu jest też widoczny w widoku nagłówków, obok kodu. Funkcje te były wcześniej dostępne tylko w przypadku HTTP/1.1, ale teraz są teraz dodatkowo rozszerzone na HTTP/2 i HTTP/3. Te pozornie niewielkie zmiany mają duży wpływ na oszczędność czasu i pozwalają skupić się na debugowaniu zamiast na szukaniu znaczenia kodu.
Ulepszona widoczność błędów
Ułatwiliśmy szybkie wykrywanie błędów i eliminowanie ich bez szczegółowej analizy panelu. W tym celu zamiast wyróżniać komunikaty o błędach za pomocą zmiany koloru tekstu dodaliśmy ikony wskazujące, które zwracają uwagę na błędy żądań, np. z kodem stanu 404. Te subtelne, lecz przydatne wskaźniki sprawią, że błędy będą bardziej zauważalne, dzięki czemu nie przeoczysz ważnych błędów.
Podtypy JSON do drukowania w sposób atrakcyjny
Tworzenie stron internetowych często obejmuje sprawdzanie odpowiedzi JSON, ale odczytywanie nieprzetworzonych niesformatowanych plików JSON jest bardzo niewygodne. Radzenie sobie z takimi odpowiedziami, zwłaszcza podtypami takimi jak ld+json, hal+json i sparql-results+json, może być frustrujące, na przykład gdy wyświetlają się one w jednym wierszu. Aby ułatwić pracę, w Narzędziach deweloperskich wprowadziliśmy bardziej przyjazną, zwijaną prezentację dla podtypów JSON. Teraz odpowiedzi są sformatowane, dzięki czemu deweloperzy nie muszą korzystać z narzędzi zewnętrznych. W ten sposób interfejs jest prosty i czytelny.
Pozytywne opinie społeczności
Mimo że te funkcje są dopiero na wczesnym etapie wdrożenia, społeczność spotka się z ogromnie pozytywnym odzewem. Pomyślna implementacja sprawiła, że wielu użytkowników jest zadowolonych z ulepszeń, co znacznie poprawiło ich wrażenia. Niektóre odpowiedzi możesz przeczytać na X:
– Świetnie! Narzędzia ChromeDevTools pojawiły się właśnie w ChromeDevTools, pokazując czytelne dla człowieka kody stanu HTTP, dzięki czemu łatwiej można zobaczyć, co poszło nie tak z żądaniem sieciowym”. – TribalIdeas na X
„Ostatnio bardzo mi pomogło. Dotyczy to zwłaszcza formularzy z blokadami reklam i rozszerzeniami gramatycznymi” – MrAhmadAwais na X
Chcesz poznać te nowe funkcje? Otwórz Narzędzia deweloperskie w Chrome i samodzielnie wypróbuj ulepszony panel Sieć. Powodzenia w debugowaniu!
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
> 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.