Network Monitor bilježi i prikazuje svaki mrežni zahtjev koji stranica šalje — XHR/Fetch API pozive, učitavanja skripti, dohvaćanja stilova, preuzimanja slika, datoteke fontova i još mnogo toga. Pregledajte URL-ove, HTTP metode, statusne kodove, veličine odgovora i vremensku mjeru — sve u plutajućem panelu koji se ažurira uživo, bez otvaranja DevTools preglednika.
Kartica Network u Chrome DevTools moćna je, ali zahtjevna — zauzima znatno prostora na ekranu, resetira se pri navigaciji i zahtijeva prebacivanje s prikaza stranice. Network Monitor donosi ključne funkcije praćenja mreže u lagani plutajući panel koji se prikazuje iznad stranice. Presreće XHR i Fetch zahtjeve te prati učitavanje resursa putem Performance API-ja, prikazujući svaki mrežni zahtjev u trenutku kad se dogodi. Svaki zahtjev prikazuje URL, HTTP metodu (GET, POST, PUT, DELETE), statusni kod (kodiran bojom: zelena za 2xx, žuta za 3xx, crvena za 4xx/5xx), veličinu odgovora u bajtovima i trajanje u milisekundama. Kliknite bilo koji zahtjev za prikaz detalja: zaglavlja zahtjeva, zaglavlja odgovora, tijelo zahtjeva (za POST/PUT), pregled tijela odgovora i vremenski pregled. Filtrirajte po vrsti (XHR/Fetch, JS, CSS, slike, fontovi) kako biste se usredotočili na određeni promet.
Svaki mrežni zahtjev pojavljuje se u panelu čim se dogodi — učitavanja stranica, API pozivi, odgođeno učitani resursi i zahtjevi u pozadini. Feed se ažurira u stvarnom vremenu bez potrebe za ručnim osvježavanjem.
Kliknite bilo koji zahtjev za prikaz svih detalja: URL zahtjeva, metodu, zaglavlja, tijelo (za POST/PUT), zaglavlja odgovora, pregled tijela odgovora (JSON se automatski formatira), statusni kod, veličinu i vremenski pregled.
Filtrirajte zahtjeve po vrsti: XHR/Fetch (API pozivi), JS (skripte), CSS (stilovi), IMG (slike), Font (web fontovi) ili Sve. Odvojite API promet od učitavanja resursa kako biste se usredotočili na ono što je važno.
Statusni kodovi kodirani su bojom radi trenutnog prepoznavanja: zelena za 2xx (uspjeh), žuta za 3xx (preusmjeravanja), crvena za 4xx (greške klijenta) i 5xx (greške poslužitelja). Neuspjeli zahtjevi odmah su vidljivi.
Svaki zahtjev prikazuje veličinu odgovora (u KB) i ukupno trajanje (u milisekundama). Prepoznajte spore API pozive, prevelike resurse i nepotrebne zahtjeve koji utječu na performanse stranice.
Traka sažetka prikazuje ukupan broj zahtjeva i kombiniranu veličinu za sve zabilježene zahtjeve. Filtrirajte sažetak za prikaz ukupnih vrijednosti po vrsti — koliko se propusnosti troši na skripte, slike ili API pozive.
Pratite XHR/Fetch zahtjeve kako biste provjerili poziva li vaš frontend ispravne API krajnje točke s odgovarajućim parametrima. Kliknite za pregled tijela zahtjeva i odgovora — trenutno otkrijte neusklađene formate podataka.
Crveni unosi 404 i 500 odmah ističu neispravne resurse ili neuspjele API pozive. Vidite koji URL-ovi ne rade, kada ne rade i koji odgovor s greškom vraća poslužitelj.
Sortirajte po trajanju kako biste pronašli najsporije zahtjeve. Sortirajte po veličini za pronalazak najvećih resursa. Ukupni sažetak prikazuje cjelokupnu sliku propusnosti — šalje li stranica previše zahtjeva ili preuzima previše podataka?
Vidite koje mrežne zahtjeve stranica šalje u pozadini — analitički pingovi, heartbeat pozivi, zahtjevi za ispitivanje, odgođeno učitani resursi. Razumijte cjelokupnu mrežnu aktivnost koja nije vidljiva korisniku.
Filtrirajte zahtjeve i provjerite koje domene se kontaktiraju. Prepoznajte skripte trećih strana koje šalju neočekivane mrežne pozive — piksele za praćenje, prikupljanje podataka ili API pozive koje niste znali da postoje.
Otvorite plutajući dock DevSuite Pro i kliknite ikonu Network Monitora. Panel se otvara i odmah počinje bilježiti mrežne zahtjeve.
Koristite stranicu normalno. Svaki mrežni zahtjev pojavljuje se u feedu čim se pošalje — API pozivi, učitavanja resursa i zahtjevi u pozadini su svi zabilježeni.
Kliknite filtere vrste (XHR, JS, CSS, IMG, Font) kako biste suzili prikaz. Prikažite samo API pozive za otklanjanje grešaka u dohvaćanju podataka ili samo slike za provjeru učitavanja resursa.
Kliknite bilo koji redak zahtjeva za prikaz detalja: URL, zaglavlja, tijelo zahtjeva, tijelo odgovora, statusni kod, veličinu i trajanje.
Crveni statusni kodovi (404, 500) označavaju neuspjele zahtjeve. Dugo trajanje upućuje na uska grla performansi. Velika veličina sugerira resurse koji trebaju optimizaciju.
Instalirajte DevSuite Pro besplatno i otključajte 39+ razvojnih alata za svoj preglednik.
