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 w Chrome DevTools jest potężna, ale ciężka w użyciu — zajmuje sporo miejsca na ekranie, resetuje się przy każdej nawigacji i wymaga przełączenia się poza treść strony. Network Monitor dostarcza najważniejsze funkcje monitorowania sieci w lekkim, pływającym panelu umieszczonym bezpośrednio nad stroną.
Przechwytuje żądania XHR i Fetch oraz monitoruje wczytywanie zasobów za pomocą Performance API, pokazując każde żądanie sieciowe w momencie jego wystąpienia. Przy każdym żądaniu widoczny jest adres URL, metoda HTTP (GET, POST, PUT, DELETE), kod statusu (oznaczony kolorem: zielony dla 2xx, żółty dla 3xx, czerwony dla 4xx/5xx), rozmiar odpowiedzi w bajtach oraz czas trwania w milisekundach. Kliknięcie dowolnego żądania rozwija jego szczegóły: nagłówki żądania, nagłówki odpowiedzi, ładunek żądania, podgląd treści odpowiedzi oraz rozkład czasowy.
Przechwytywane są również żądania wysyłane przez Beacon API (powszechnie używane do sygnałów analitycznych wysyłanych tuż przed opuszczeniem strony), które normalnie trudno zaobserwować, ponieważ wyzwalają się w trakcie nawigacji. To osobne narzędzie względem WebSocket Inspector — Network Monitor skupia się na ruchu żądań i odpowiedzi HTTP, natomiast połączenia WebSocket i ich ramki obsługuje dedykowane narzędzie WebSocket Inspector, dzięki czemu każdy panel pozostaje przejrzysty i czytelny, zamiast mieszać dwa zupełnie różne typy ruchu w jednym, chaotycznym widoku.
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 64 narzędzi programistycznych dla swojej przeglądarki.
