Mfuatiliaji wa Mtandao ananasa na kuonyesha kila ombi la mtandao linalofanywa na ukurasa wa sasa kwa wakati halisi.
Kichupo cha Network cha Chrome DevTools kina nguvu lakini ni kizito — kinachukua nafasi kubwa ya skrini, kinajiweka upya unaposogea kwenye ukurasa mwingine, na kinahitaji ubadilishe kutoka kwenye maudhui ya ukurasa. Network Monitor inatoa vipengele muhimu vya ufuatiliaji wa mtandao katika paneli nyepesi inayoelea juu ya ukurasa.
Inanasa XHR na Fetch requests na kufuatilia upakiaji wa resources kupitia Performance API, ikionyesha kila network request inapotokea. Kila request inaonyesha URL, HTTP method (GET, POST, PUT, DELETE), status code (yenye rangi maalum: kijani kwa 2xx, njano kwa 3xx, nyekundu kwa 4xx/5xx), ukubwa wa response kwa bytes, na muda kwa milliseconds. Bofya request yoyote ili kupanua maelezo yake: request headers, response headers, request payload, muhtasari wa response body, na uchambuzi wa muda (timing breakdown).
Requests zinazotumwa kupitia Beacon API (ambazo hutumika kwa kawaida kwa analytics pings zinazotumwa muda mfupi kabla ukurasa haujafunguliwa upya) pia zinanaswa, jambo ambalo kwa kawaida ni gumu kufuatilia kwa sababu zinatokea wakati wa kusogea kati ya kurasa. Hii ni zana tofauti na WebSocket Inspector — Network Monitor inalenga trafiki ya HTTP request/response, wakati miunganisho ya WebSocket na frames zake vinashughulikiwa na zana maalum ya WebSocket Inspector, hivyo kila paneli inabaki ikilenga jambo moja na kusomeka vizuri badala ya kuchanganya aina mbili tofauti za trafiki katika mtiririko mmoja wenye kelele.
Kila ombi la mtandao huonekana kwenye paneli linapotokea — upakiaji wa ukurasa, simu za API, rasilimali zinazopakiwa kwa kuchelewa (lazy-loaded), na ufuatiliaji wa nyuma. Mlisho unasasishwa kwa wakati halisi bila haja ya kusasisha kwa mikono.
Bofya ombi lolote ili kuona maelezo kamili: URL ya ombi, mbinu (method), vichwa (headers), mzigo wa data (payload) (kwa POST/PUT), vichwa vya jibu, hakikisho la mwili wa jibu (JSON iliyopangwa kiotomatiki), msimbo wa hali (status code), ukubwa, na uchanganuzi wa muda.
Chuja maombi kwa aina: XHR/Fetch (simu za API), JS (script), CSS (stylesheets), IMG (picha), Font (font za wavuti), au Zote. Tenga trafiki ya API kutoka kwa upakiaji wa rasilimali ili kuzingatia kile kinachofaa.
Misimbo ya hali imewekwa rangi kwa utambuzi wa papo hapo: kijani kwa 2xx (mafanikio), manjano kwa 3xx (elekezo upya), nyekundu kwa 4xx (hitilafu za mteja) na 5xx (hitilafu za seva). Maombi yaliyoshindwa yanaonekana mara moja.
Kila ombi linaonyesha ukubwa wa jibu (katika KB) na muda wa jumla (katika milisekunde). Tambua simu za API za polepole, rasilimali zenye ukubwa wa kupita kiasi, na maombi yasiyo ya lazima yanayoathiri utendaji wa ukurasa.
Baa ya muhtasari inaonyesha jumla ya idadi ya maombi na ukubwa wa pamoja kwa maombi yote yaliyonaswa. Chuja muhtasari ili kuona jumla kwa kila aina — ni kiasi gani cha bandwidth kinatumika kwenye script vs picha vs simu za API.
Tazama maombi ya XHR/Fetch ili kuthibitisha kuwa frontend yako inaita endpoints sahihi za API ikiwa na vigezo sahihi. Bofya ili kukagua mizigo ya data ya maombi na miili ya majibu — nasa miundo ya data isiyolingana mara moja.
Maingizo nyekundu ya 404 na 500 yanaonyesha rasilimali zilizoharibika au simu za API zinazoshindwa. Ona ni URL zipi zinashindwa, zinashindwa lini, na ni jibu gani la hitilafu ambalo seva inarudisha.
Panga kwa muda ili kupata maombi ya polepole zaidi. Panga kwa ukubwa ili kupata rasilimali kubwa zaidi. Jumla ya muhtasari inaonyesha picha kamili ya bandwidth — je, ukurasa unafanya maombi mengi mno au unapakua data nyingi mno?
Ona ni maombi gani ya mtandao ambayo ukurasa unafanya kwa nyuma — pings za analytics, simu za mapigo ya moyo (heartbeat), maombi ya upigaji kura (polling), rasilimali zinazopakiwa kwa kuchelewa. Elewa shughuli kamili ya mtandao zaidi ya kile kinachoonekana kwa mtumiaji.
Chuja maombi na ukague ni vikoa vipi vinavyowasiliana. Tambua script za upande wa tatu zinazofanya simu za mtandao zisizotarajiwa — tracking pixels, ukusanyaji wa data, au simu za API za nje ambazo hukuwa unazijua.
Fungua kizimbani kinachoelea cha DevSuite Pro na ubofye ikoni ya Network Monitor. Paneli inafunguka na kuanza kunasa maombi ya mtandao mara moja.
Tumia ukurasa kawaida. Kila ombi la mtandao huonekana kwenye mlisho linapofanywa — simu za API, upakiaji wa rasilimali, na ufuatiliaji wa nyuma yote yananaswa.
Bofya vichujio vya aina (XHR, JS, CSS, IMG, Font) ili kupunguza mwonekano. Onyesha simu za API pekee ili kurekebisha uchukuaji wa data, au picha pekee ili kukagua upakiaji wa rasilimali.
Bofya mstari wowote wa ombi ili kupanua maelezo yake: URL, vichwa, mzigo wa data, mwili wa jibu, msimbo wa hali, ukubwa, na muda.
Misimbo ya hali nyekundu (404, 500) inaashiria maombi yaliyoshindwa. Muda wa polepole unaonyesha vikwazo vya utendaji. Ukubwa mkubwa unaashiria rasilimali zinazohitaji uboreshaji.
Sakinisha DevSuite Pro bila malipo na ufungue zana 64+ za wasanidi kwa kivinjari chako.
