Kinukuha at ipinapakita ng Network Monitor ang bawat network request na ginagawa ng kasalukuyang pahina — XHR/Fetch API call, pag-load ng script, pag-fetch ng stylesheet, pag-download ng larawan, mga font file, at iba pa. Tingnan ang mga URL, HTTP method, status code, laki ng response, at timing — lahat sa isang live-updating na floating panel nang hindi kailangang buksan ang browser DevTools.
Makapangyarihan ngunit mabigat ang Network tab ng Chrome DevTools — malaki ang espasyong kinukuha nito sa screen, nare-reset kapag nag-navigate ka, at kailangan mong lumayo sa nilalaman ng pahina. Ibinibigay ng Network Monitor ang mahahalagang feature ng network monitoring sa isang magaang na floating panel na nasa ibabaw ng pahina. Nino-intercept nito ang XHR at Fetch request at binibigyan ng monitoring ang pag-load ng resource sa pamamagitan ng Performance API, ipinapakita ang bawat network request habang nangyayari ito. Ipinapakita ng bawat request ang URL, HTTP method (GET, POST, PUT, DELETE), status code (may color-coding: berde para sa 2xx, dilaw para sa 3xx, pula para sa 4xx/5xx), laki ng response sa bytes, at tagal sa milliseconds. I-click ang anumang request para palawakin ang mga detalye nito: request header, response header, request payload (para sa POST/PUT), preview ng response body, at timing breakdown. Mag-filter ayon sa uri (XHR/Fetch, JS, CSS, Images, Fonts) para makapag-focus sa partikular na trapiko.
Bawat network request ay lumalabas sa panel habang nangyayari ito — mga page load, API call, lazy-loaded na resource, at background fetch. Nag-a-update ang feed nang real-time nang walang kailangang manual na refresh.
I-click ang anumang request para makita ang buong detalye: request URL, method, header, payload (para sa POST/PUT), response header, preview ng response body (JSON auto-formatted), status code, laki, at timing breakdown.
Mag-filter ng mga request ayon sa uri: XHR/Fetch (API call), JS (script), CSS (stylesheet), IMG (larawan), Font (web font), o Lahat. Ihiwalay ang API traffic mula sa pag-load ng resource para makapag-focus sa mahalaga.
Ang mga status code ay may color-coding para sa agarang pagkilala: berde para sa 2xx (tagumpay), dilaw para sa 3xx (redirect), pula para sa 4xx (client error) at 5xx (server error). Agad na nakikita ang mga nabigong request.
Ipinapakita ng bawat request ang laki ng response (sa KB) at kabuuang tagal (sa milliseconds). Tukuyin ang mabagal na API call, sobrang laking resource, at hindi kinakailangang request na nakakaapekto sa performance ng pahina.
Ipinapakita ng summary bar ang kabuuang bilang ng request at pinagsama-samang laki ng lahat ng nakunang request. I-filter ang buod para makita ang mga kabuuan bawat uri — magkano ang bandwidth na ginagastos sa script kumpara sa larawan kumpara sa API call.
Panoorin ang mga XHR/Fetch request para i-verify na ang iyong frontend ay tumatawag sa tamang API endpoint na may tamang parameter. I-click para suriin ang mga request payload at response body — agad na mahuhuli ang mga hindi tugmang format ng data.
Ang mga pulang 404 at 500 na entry ay agad na nagtatampok ng mga sirang resource o nabigong API call. Tingnan kung aling mga URL ang nabigo, kailan sila nabigo, at anong error response ang ibinabalik ng server.
Mag-sort ayon sa tagal para mahanap ang pinakamabagal na request. Mag-sort ayon sa laki para mahanap ang pinakamalaking resource. Ipinapakita ng mga kabuuan ng buod ang buong larawan ng bandwidth — masyadong maraming request ang ginagawa ng pahina o nagda-download ng masyadong maraming data?
Tingnan kung anong network request ang ginagawa ng pahina sa background — mga analytics ping, heartbeat call, polling request, lazy-loaded na resource. Unawain ang buong aktibidad sa network na higit pa sa nakikita ng user.
Mag-filter ng mga request at suriin kung aling mga domain ang kinakausap. Tukuyin ang mga third-party script na gumagawa ng hindi inaasahang network call — mga tracking pixel, pangongolekta ng data, o external na API call na hindi mo alam.
Buksan ang DevSuite Pro floating dock at i-click ang icon ng Network Monitor. Magbubukas ang isang panel at magsisimulang kumukuha ng mga network request kaagad.
Gamitin ang pahina nang normal. Bawat network request ay lumalabas sa feed habang ginagawa ito — ang mga API call, pag-load ng resource, at background fetch ay lahat nakuha.
I-click ang mga type filter (XHR, JS, CSS, IMG, Font) para paliitin ang view. Ipakita lamang ang mga API call para i-debug ang pag-fetch ng data, o mga larawan lamang para suriin ang pag-load ng asset.
I-click ang anumang row ng request para palawakin ang mga detalye nito: URL, header, payload, response body, status code, laki, at timing.
Ang mga pulang status code (404, 500) ay nagpapahiwatig ng mga nabigong request. Ang mabagal na tagal ay nagtatanda ng mga performance bottleneck. Ang malalaking laki ay nagmumungkahi ng mga resource na kailangang i-optimize.
I-install ang DevSuite Pro nang libre at i-unlock ang 39+ developer tools para sa iyong browser.
