Monitor sieci przechwytuje i wyświetla każde żądanie sieciowe wykonywane przez bieżącą stronę — wywołania XHR/Fetch API, ładowania skryptów, pobierania arkuszy stylów, pobierania obrazów, pliki czcionek i więcej. Zobacz URL-e, metody HTTP, kody stanu, rozmiary odpowiedzi i czasy — wszystko w pływającym panelu aktualizującym się na żywo bez otwierania DevTools przeglądarki.
Zakładka Network DevTools Chrome jest potężna, ale ciężka — zajmuje znaczną część ekranu, resetuje się podczas nawigacji i wymaga przełączania się z zawartości strony. Monitor sieci zapewnia podstawowe funkcje monitorowania sieci w lekkim pływającym panelu siedzącym na stronie. Przechwytuje żądania XHR i Fetch i monitoruje ładowanie zasobów przez Performance API, pokazując każde żądanie sieciowe w miarę jego wystąpienia. Każde żądanie pokazuje URL, metodę HTTP (GET, POST, PUT, DELETE), kod stanu (kolorowo kodowany: zielony dla 2xx, żółty dla 3xx, czerwony dla 4xx/5xx), rozmiar odpowiedzi w bajtach i czas trwania w milisekundach. Kliknij dowolne żądanie, aby rozwinąć jego szczegóły: nagłówki żądania, nagłówki odpowiedzi, ładunek żądania (dla POST/PUT), podgląd treści odpowiedzi i podział czasu. Filtruj według typu (XHR/Fetch, JS, CSS, obrazy, czcionki), aby skupić się na konkretnym ruchu.
Każde żądanie sieciowe pojawia się w panelu w miarę wystąpienia — ładowania strony, wywołania API, leniwie ładowane zasoby i pobierania w tle. Kanał aktualizuje się w czasie rzeczywistym bez potrzeby ręcznego odświeżania.
Kliknij dowolne żądanie, aby zobaczyć pełne szczegóły: URL żądania, metodę, nagłówki, ładunek (dla POST/PUT), nagłówki odpowiedzi, podgląd treści odpowiedzi (JSON automatycznie sformatowany), kod stanu, rozmiar i podział czasu.
Filtruj żądania według typu: XHR/Fetch (wywołania API), JS (skrypty), CSS (arkusze stylów), IMG (obrazy), Font (czcionki webowe) lub Wszystkie. Izoluj ruch API od ładowania zasobów, aby skupić się na tym, co ma znaczenie.
Kody stanu są kolorowo kodowane dla natychmiastowego rozpoznania: zielony dla 2xx (sukces), żółty dla 3xx (przekierowania), czerwony dla 4xx (błędy klienta) i 5xx (błędy serwera). Nieudane żądania są natychmiast widoczne.
Każde żądanie pokazuje rozmiar odpowiedzi (w KB) i łączny czas trwania (w milisekundach). Identyfikuj wolne wywołania API, zbyt duże zasoby i niepotrzebne żądania wpływające na wydajność strony.
Pasek podsumowania pokazuje łączną liczbę żądań i połączony rozmiar wszystkich przechwyconych żądań. Filtruj podsumowanie, aby zobaczyć sumy według typu — ile przepustowości jest wydawane na skrypty vs obrazy vs wywołania API.
Obserwuj żądania XHR/Fetch, aby zweryfikować, że twój frontend wywołuje właściwe punkty końcowe API z właściwymi parametrami. Kliknij, aby sprawdzić ładunki żądań i treści odpowiedzi — wychwyć niepasujące formaty danych natychmiast.
Czerwone wpisy 404 i 500 natychmiast podświetlają zepsute zasoby lub niepowodzące się wywołania API. Zobacz, które URL-e zawodzą, kiedy zawodzą i jaką odpowiedź błędu zwraca serwer.
Sortuj według czasu trwania, aby znaleźć najwolniejsze żądania. Sortuj według rozmiaru, aby znaleźć największe zasoby. Sumy podsumowania pokazują pełny obraz przepustowości — czy strona wykonuje zbyt wiele żądań lub pobiera zbyt dużo danych?
Zobacz, jakie żądania sieciowe wykonuje strona w tle — pingi analityczne, wywołania heartbeat, żądania ankietujące, leniwie ładowane zasoby. Zrozum pełną aktywność sieciową poza tym, co jest widoczne dla użytkownika.
Filtruj żądania i sprawdź, jakie domeny są kontaktowane. Identyfikuj skrypty zewnętrzne wykonujące nieoczekiwane wywołania sieciowe — piksele śledzące, zbieranie danych lub wywołania zewnętrznych API, o których nie wiedziałeś.
Otwórz pływający dok DevSuite Pro i kliknij ikonę Monitora sieci. Otwiera się panel i natychmiast zaczyna przechwytywać żądania sieciowe.
Używaj strony normalnie. Każde żądanie sieciowe pojawia się w kanale w miarę wykonywania — wywołania API, ładowania zasobów i pobierania w tle są wszystkie przechwytywane.
Kliknij filtry typów (XHR, JS, CSS, IMG, Font), aby zawęzić widok. Pokaż tylko wywołania API, aby debugować pobieranie danych, lub tylko obrazy, aby sprawdzić ładowanie zasobów.
Kliknij dowolny wiersz żądania, aby rozwinąć jego szczegóły: URL, nagłówki, ładunek, treść odpowiedzi, kod stanu, rozmiar i czas.
Czerwone kody stanu (404, 500) wskazują nieudane żądania. Wolne czasy trwania oznaczają wąskie gardła wydajności. Duże rozmiary sugerują zasoby wymagające optymalizacji.
Zainstaluj DevSuite Pro za darmo i odblokuj ponad 39 narzędzi programistycznych dla swojej przeglądarki.
