Panel sieciowy bez DevTools — zakładka Network w JustZix
Panel Network w DevTools ma jedną uporczywą wadę: nagrywa tylko wtedy, gdy jest otwarty. Odśwież stronę, zapomnij otworzyć go najpierw, a żądanie, którego potrzebowałeś, przepada. Output Console w JustZix ma zakładkę Network, która żyje wewnątrz strony, przechwytuje ruch przez chrome.webRequest i utrzymuje bufor w tle — więc widzi żądania, które wystąpiły zanim otworzyłeś okno. Oto jak to działa i gdzie się sprawdza.
Jak działa przechwytywanie: chrome.webRequest
Zakładka Network nie podpina się pod fetch ani XMLHttpRequest w kodzie strony. Korzysta z chrome.webRequest — API na poziomie przeglądarki, do którego rozszerzenie sięga przez uprawnienie webRequest w manifeście. To znaczy, że obserwuje żądania na warstwie przeglądarki, w tym samym miejscu co stos sieciowy.
Praktyczną konsekwencją jest sztandarowa funkcja: bufor w tle. Rozszerzenie utrzymuje bieżący rejestr żądań dla karty. Kiedy otwierasz Output Console, zakładka Network jest już zapełniona tym, co działo się, zanim do niej dotarłeś. Bez tańca „odśwież, żeby przechwycić".
Otwieranie zakładki Network
Otwórz Output Console z menu pływającego przycisku JustZix albo jako okno TEMP skrótem Ctrl+Alt+K, a potem przełącz się na zakładkę Network. Jej plakietka pokazuje licznik żądań na żywo. Dzięki buforowi lista nie jest pusta nawet na stronie, którą wczytałeś kilka minut temu.
Co oznacza każda kolumna
Każde przechwycone żądanie to jeden wiersz. Kolumny:
| Kolumna | Znaczenie |
|---|---|
| Method | Czasownik HTTP — GET, POST, PUT, DELETE, … |
| URL | Pełny adres URL żądania. |
| Status | Kod statusu HTTP — 200, 301, 404, 500, … |
| Resource type | Jakiego rodzaju jest żądanie: dokument, skrypt, arkusz stylów, obraz, xhr/fetch, font, … |
| Size | Ile bajtów przesłało żądanie. |
| Duration | Jak długo trwało żądanie, w milisekundach. |
| Remote address | Adres IP, do którego żądanie faktycznie dotarło. |
| Initiator | Co wyzwoliło żądanie — skrypt lub zasób, który je uruchomił. |
Method, status i URL mówią Ci, co się stało. Size i duration mówią Ci, jak kosztowne to było. Remote address i Initiator mówią Ci, dokąd to poszło i kto to rozpoczął — dwie kolumny, które mają największe znaczenie, gdy polujesz na żądanie, którego sam nie napisałeś.
Kontekstowy pasek filtrów — trzy rzędy
Pasek filtrów Output Console jest kontekstowy; w zakładce Network rozwija się w trzy rzędy kontrolek:
- Typ zasobu — rząd pól wyboru: dokument, skrypt, arkusz stylów, obraz, xhr/fetch, font i więcej. Odznacz typy, które Cię nie obchodzą. Debugujesz API? Zostaw tylko xhr/fetch, a szum obrazów i fontów znika.
- Klasa statusu HTTP — rząd pól wyboru według klasy:
2xx,3xx,4xx,5xx. Odznacz2xxi3xx, aby zobaczyć tylko niepowodzenia. - Rozmiar + czas trwania + domena — dwa suwaki zakresu (0–100000, czas trwania w milisekundach) plus pole filtra domeny.
Rzędy pól wyboru mają skróty zaznacz wszystko / wyczyść wszystko, więc możesz wyczyścić wszystko i zaznaczyć jeden typ, który chcesz, albo odwrotnie — bez ręcznego przeklikiwania dziesięciu pól.
Suwaki i filtr domeny
Suwaki zakresu zmieniają mgliste podejrzenie w precyzyjne zapytanie:
- Suwak czasu trwania — ustaw minimum, a przetrwają tylko wolne żądania. Przeciągnij go do
2000ms, a masz listę wszystkiego, co trwało dłużej niż dwie sekundy. - Suwak rozmiaru — ta sama idea dla bajtów. Ustaw dolny próg, a zbyt duże ładunki — niezoptymalizowany obraz główny, blob JSON o wadze 400 KB — wypływają na wierzch.
- Filtr domeny — wpisz fragment domeny, aby zostawić tylko żądania do tego hosta. Wpisz
google-analyticsalbodoubleclick, a patrzysz dokładnie na ruch zewnętrzny, który chciałeś zaudytować.
Wszystko to sumuje się z zawsze widocznym polem wyszukiwania poniżej paska filtrów — działającym na żywo, niewrażliwym na wielkość liter filtrem podciągów nad wierszami. Esc czyści wyszukiwanie.
Zastosowanie 1 — debugowanie wywołań API
Wyczyść rząd typów zasobów, zaznacz tylko xhr/fetch. Teraz zakładka Network to wyłącznie ruch API Twojej aplikacji — bez skryptów, bez obrazów. Wyzwól akcję, którą debugujesz, i obserwuj, jak pojawia się żądanie: metoda, URL, status, jak długo trwało. Jeśli status jest nieprawidłowy, od razu wiesz, czy problem leży w żądaniu, czy w kodzie obsługującym odpowiedź.
Zastosowanie 2 — znajdowanie wolnych lub zbyt dużych żądań
Przeciągnij suwak czasu trwania do progu — powiedzmy 1500 ms — a lista zwija się do Twoich najwolniejszych żądań. Zrób to samo z suwakiem rozmiaru, aby wydobyć ciężkie ładunki. Dwa przeciągnięcia i masz krótką listę wydajnościową: żądania faktycznie warte optymalizacji, oddzielone od dziesiątek tych, z którymi wszystko jest w porządku.
Zastosowanie 3 — wykrywanie niepowodzeń 4xx i 5xx
To jest to, czego zakładka Errors nie zrobi za Ciebie. Nieudany fetch lub XHR nie jest wyjątkiem JavaScript — nigdy nie dociera do zakładki Errors. Aby znaleźć zepsute żądania, przejdź do zakładki Network i odznacz 2xx oraz 3xx w rzędzie statusów. To, co zostaje, to każde 4xx i 5xx: brakujący endpoint, niepowodzenie autoryzacji, błąd serwera. Dodaj termin wyszukiwania, aby namierzyć jedną ścieżkę.
Zastosowanie 4 — audyt zewnętrznych trackerów i beaconów
Każda witryna ładuje rzeczy, których niekoniecznie zapowiadała — analitykę, piksele reklamowe, beacony. Wpisz domenę trackera w filtr domeny albo obserwuj kolumnę Initiator, aby zobaczyć, który skrypt wystrzelił który beacon. W połączeniu z kolumną Remote address możesz dokładnie określić, dokąd trafiają dane. To szybki, uczciwy audyt prywatności bez żadnych specjalistycznych narzędzi.
Uczciwe porównanie z panelem Network w DevTools
Panel Network w DevTools jest potężniejszy — ta zakładka nie udaje, że jest inaczej. Ale kompromisy są realne i działają w obie strony:
| Zakładka Network JustZix | Network w DevTools | |
|---|---|---|
| Gdzie się znajduje | Wewnątrz strony, przeciągalne okno | Osobny zadokowany/oddokowany panel |
| Wymaga DevTools | Nie | Tak |
| Przechwytuje, zanim go otworzysz | Tak — bufor w tle | Nie — tylko gdy otwarty |
| Metadane żądania | Tak — metoda, status, rozmiar, czas trwania, IP, inicjator | Tak |
| Treści odpowiedzi | Nie | Tak |
| Nagłówki żądania/odpowiedzi, wykres czasowy (waterfall) | Nie | Tak |
Decydujące ograniczenie: chrome.webRequest daje metadane żądania, a nie treści odpowiedzi. Jeśli musisz przeczytać JSON, który zwróciło żądanie, DevTools nadal jest Twoim narzędziem. Jeśli musisz wiedzieć, które żądania zostały wysłane, czy się powiodły, jak wolne były i dokąd trafiły — łącznie z żądaniami sprzed momentu, gdy zacząłeś patrzeć — zakładka Network robi to w karcie, całkowicie bez DevTools.
Po które narzędzie sięgnąć i kiedy
- Zakładka Network — szybka selekcja, zablokowane maszyny, łapanie żądań wystrzelonych przy wczytywaniu strony, audyt ruchu zewnętrznego, udostępnianie konfiguracji debugowania jako części reguły.
- Network w DevTools — inspekcja treści odpowiedzi, czytanie nagłówków, wykres czasowy, throttling, ponawianie żądań.
Nie są rywalami. Zakładka Network obsługuje codzienne pytanie „co ta strona robi w sieci"; DevTools obsługuje głębokie analizy.
Zobacz też
- Przebudowana Output Console — wszystkie sześć zakładek wyjaśnione
- Przykłady JustZix — gotowe do użycia reguły CSS i JS
Panel sieciowy, który przechwytuje od momentu sprzed jego otwarcia, prosto w karcie — bez F12. Pobierz JustZix — jest darmowy, działa na Chrome 100+ i instaluje się w jakieś dwie minuty.
Oceń ten wpis
Brak ocen — oceń jako pierwszy.