Network Monitor capturează și afișează fiecare cerere de rețea efectuată de pagina curentă — apeluri XHR/Fetch API, încărcări de scripturi, fetch-uri de foi de stil, descărcări de imagini, fișiere font și altele. Vezi URL-uri, metode HTTP, coduri de stare, dimensiuni ale răspunsurilor și timpi de răspuns — totul într-un panou flotant actualizat în timp real, fără a deschide DevTools-ul browserului.
Tab-ul Network din Chrome DevTools este puternic, dar greoi — ocupă mult spațiu pe ecran, se resetează la navigare și necesită să comuți atenția de la conținutul paginii. Network Monitor oferă funcționalitățile esențiale de monitorizare a rețelei într-un panou flotant ușor, plasat deasupra paginii. Interceptează cererile XHR și Fetch și monitorizează încărcarea resurselor prin Performance API, afișând fiecare cerere de rețea pe măsură ce se produce. Fiecare cerere afișează URL-ul, metoda HTTP (GET, POST, PUT, DELETE), codul de stare (codificat prin culori: verde pentru 2xx, galben pentru 3xx, roșu pentru 4xx/5xx), dimensiunea răspunsului în octeți și durata în milisecunde. Dă click pe orice cerere pentru a-i extinde detaliile: headere de cerere, headere de răspuns, payload-ul cererii (pentru POST/PUT), previzualizarea corpului răspunsului și defalcarea timpilor. Filtrează după tip (XHR/Fetch, JS, CSS, Imagini, Fonturi) pentru a te concentra pe traficul relevant.
Fiecare cerere de rețea apare în panou în momentul în care se produce — încărcări de pagini, apeluri API, resurse încărcate lazy și fetch-uri de fundal. Feed-ul se actualizează în timp real, fără nicio reîmprospătare manuală.
Dă click pe orice cerere pentru a vedea detalii complete: URL-ul cererii, metoda, headerele, payload-ul (pentru POST/PUT), headerele răspunsului, previzualizarea corpului răspunsului (JSON formatat automat), codul de stare, dimensiunea și defalcarea timpilor.
Filtrează cererile după tip: XHR/Fetch (apeluri API), JS (scripturi), CSS (foi de stil), IMG (imagini), Font (fonturi web) sau Toate. Izolează traficul API față de încărcarea resurselor pentru a te concentra pe ce contează.
Codurile de stare sunt codificate prin culori pentru recunoaștere instantanee: verde pentru 2xx (succes), galben pentru 3xx (redirecționări), roșu pentru 4xx (erori client) și 5xx (erori server). Cererile eșuate sunt imediat vizibile.
Fiecare cerere afișează dimensiunea răspunsului (în KB) și durata totală (în milisecunde). Identifică apelurile API lente, resursele supradimensionate și cererile inutile care afectează performanța paginii.
O bară de sumar afișează numărul total de cereri și dimensiunea cumulată a tuturor cererilor capturate. Filtrează sumarul pentru a vedea totalurile pe tip — câtă lățime de bandă este consumată de scripturi față de imagini față de apeluri API.
Urmărește cererile XHR/Fetch pentru a verifica dacă frontend-ul tău apelează corect endpoint-urile API cu parametrii potriviți. Dă click pentru a inspecta payload-urile cererilor și corpurile răspunsurilor — detectează instantaneu formatele de date nepotrivite.
Intrările roșii 404 și 500 evidențiază imediat resursele defecte sau apelurile API care eșuează. Vezi care URL-uri eșuează, când eșuează și ce răspuns de eroare returnează serverul.
Sortează după durată pentru a găsi cererile cele mai lente. Sortează după dimensiune pentru a găsi cele mai mari resurse. Totalurile din sumar arată imaginea completă a lățimii de bandă — pagina face prea multe cereri sau descarcă prea multe date?
Vezi ce cereri de rețea efectuează pagina în fundal — ping-uri de analiză, apeluri heartbeat, cereri de polling, resurse încărcate lazy. Înțelege activitatea completă de rețea dincolo de ce este vizibil pentru utilizator.
Filtrează cererile și verifică ce domenii sunt contactate. Identifică scripturile terțe care efectuează apeluri de rețea neașteptate — pixeli de tracking, colectare de date sau apeluri API externe despre care nu știai.
Deschide dock-ul flotant DevSuite Pro și dă click pe iconița Network Monitor. Se deschide un panou care începe imediat să captureze cererile de rețea.
Folosește pagina în mod normal. Fiecare cerere de rețea apare în feed pe măsură ce este efectuată — apelurile API, încărcările de resurse și fetch-urile de fundal sunt toate capturate.
Dă click pe filtrele de tip (XHR, JS, CSS, IMG, Font) pentru a restrânge vizualizarea. Afișează doar apelurile API pentru a depana preluarea datelor sau doar imaginile pentru a verifica încărcarea resurselor.
Dă click pe orice rând de cerere pentru a-i extinde detaliile: URL, headere, payload, corpul răspunsului, codul de stare, dimensiunea și timpii.
Codurile de stare roșii (404, 500) indică cereri eșuate. Duratele mari semnalează blocaje de performanță. Dimensiunile mari sugerează resurse care necesită optimizare.
Instalează DevSuite Pro gratuit și deblochează peste 39 de instrumente pentru dezvoltatori în browserul tău.
