ኔትዎርክ ክትትል በአሁኑ ገጽ የተደረጉ ማንኛውንም ኔትዎርክ ጥያቄ ይይዛል እና ያሳያል — XHR/Fetch API ጥሪዎች፣ script ጫኖች፣ ስታይልሺት ማግኘቶች፣ ምስል ማውረዶች እና ተጨማሪ — ሁሉም ያለ ብራውዘር DevTools ቅጽበታዊ ተንሳፋፊ ፓነል ውስጥ።
የChrome DevTools Network tab ኃይለኛ ነው ግን ከባድ ነው — ከፍተኛ የስክሪን ቦታ ይይዛል፣ ስትዘዋወር ራሱን ያድሳል፣ እና ከገጹ ይዘት ራቅ ብለህ እንድትቀያየር ይጠይቃል። Network Monitor ዋና ዋና የኔትወርክ ክትትል ባህሪያትን በገጹ ላይ በሚቀመጥ ቀላል ተንሳፋፊ ፓነል ውስጥ ያቀርባል።
XHR እና Fetch ጥያቄዎችን ይይዛል እንዲሁም በPerformance API በኩል የresource ጫናን ይከታተላል፣ እያንዳንዱ የኔትወርክ ጥያቄ ሲፈጠር ያሳያል። እያንዳንዱ ጥያቄ URL፣ HTTP method (GET, POST, PUT, DELETE)፣ status code (በቀለም የተለየ፦ አረንጓዴ ለ2xx፣ ቢጫ ለ3xx፣ ቀይ ለ4xx/5xx)፣ የምላሽ መጠን በbytes፣ እና ቆይታ በmilliseconds ያሳያል። ዝርዝሮቹን ለማስፋት ማንኛውንም ጥያቄ ተጫን፦ request headers፣ response headers፣ request payload፣ የresponse body ቅድመ-እይታ፣ እና የጊዜ ስሌት ዝርዝር።
በBeacon API በኩል የተደረጉ ጥያቄዎች (ገጽ ከመዘጋቱ በፊት ለሚላኩ analytics pings በተለምዶ የሚያገለግሉ) ጭምር ይያዛሉ፣ እነዚህ በnavigation ወቅት ስለሚነሱ በተለምዶ ለመታዘብ አስቸጋሪ ናቸው። ይህ ከWebSocket መርማሪ የተለየ መሳሪያ ነው — Network Monitor በHTTP request/response ትራፊክ ላይ ያተኩራል፣ የWebSocket ግንኙነቶች እና frames ግን በተለየ የተዘጋጀ WebSocket መርማሪ መሳሪያ ይሸፈናሉ፣ ስለዚህ እያንዳንዱ ፓነል ሁለት በጣም የተለያዩ የትራፊክ አይነቶችን ወደ አንድ ጫጫታማ feed ከማቀላቀል ይልቅ ትኩረቱን የጠበቀ እና ሊነበብ የሚችል ሆኖ ይቆያል።
ማንኛውም ኔትዎርክ ጥያቄ ሲከሰት በፓነል ውስጥ ይታያል — ገጽ ጫኖች፣ API ጥሪዎች፣ ዘግይተው የተጫኑ ንብረቶች እና ዳራ ማግኘቶች።
ሙሉ ዝርዝሮች ለማየት ማንኛውንም ጥያቄ ጠቅ ያድርጉ — URL፣ ዘዴ፣ ራስጌዎች፣ payload፣ ምላሽ ራስጌዎች፣ ምላሽ አካል ቅድመ-እይታ፣ ሁኔታ ኮድ፣ መጠን እና ጊዜ።
ጥያቄዎችን በዓይነት ያጣሩ — XHR/Fetch (API ጥሪዎች)፣ JS (scripts)፣ CSS (ስታይልሺቶች)፣ IMG (ምስሎች)፣ Font (ድረ-ገጽ ፎንቶች) ወይም ሁሉም።
ሁኔታ ኮዶች ለቅጽበታዊ ዝርዝር ቀለም-coded ናቸው — አረንጓዴ 2xx (ስኬት)፣ ቢጫ 3xx (ማዞሪያዎች)፣ ቀይ 4xx (ደንበኛ ስህተቶች) እና 5xx (ሰርቨር ስህተቶች)።
ማንኛውም ጥያቄ ምላሽ መጠን (KB) እና ጠቅላላ ቆይታ (ሚሊሰከንዶች) ያሳያል። ቀርፋፋ API ጥሪዎችን እና ከመጠን በላይ ትልቅ ንብረቶችን ይለዩ።
ማጠቃለያ አሞሌ ለሁሉም የተያዙ ጥያቄዎች ጠቅላላ ጥያቄ ቁጥር እና ጥምር መጠን ያሳያል።
XHR/Fetch ጥያቄዎችን ይመልከቱ frontend ትክክለኛ API endpoints ከትክክለኛ ፓራሜትሮች ጋር እንደሚጠራ ያረጋግጡ።
ቀይ 404 እና 500 ግቤቶች ወዲያውኑ የተሰበሩ ንብረቶችን ወይም ያልተሳኩ API ጥሪዎችን ያደምቃሉ።
ቀርፋፋ ጥያቄዎችን ለማግኘት በቆይታ ያደርድሩ። ትልቁን ንብረቶች ለማግኘት በመጠን ያደርድሩ።
ገጹ በዳራ ምን ኔትዎርክ ጥያቄዎች እንደሚያደርግ ይመልከቱ — analytics pings፣ heartbeat ጥሪዎች፣ ዘግይተው የተጫኑ ንብረቶች።
ጥያቄዎችን ያጣሩ ምን ዶሜይኖች እንደሚገናኙ ይፈትሹ። ያልጠበቁ ኔትዎርክ ጥሪዎች የሚያደርጉ ሶስተኛ-ወገን scripts ይለዩ።
የ DevSuite Pro ተንሳፋፊ ዶክ ይክፈቱ እና ኔትዎርክ ክትትል አዶን ጠቅ ያድርጉ።
ገጹን በመደበኛ ይጠቀሙ። ማንኛውም ኔትዎርክ ጥያቄ ሲደረግ በፍሰት ውስጥ ይታያል።
እይታውን ለማጥበብ ዓይነት ማጣሪያዎች (XHR፣ JS፣ CSS፣ IMG፣ Font) ጠቅ ያድርጉ።
URL፣ ራስጌዎች፣ payload፣ ምላሽ አካል፣ ሁኔታ ኮድ፣ መጠን እና ጊዜ ለማስፋት ማንኛውንም ጥያቄ ረድፍ ጠቅ ያድርጉ።
ቀይ ሁኔታ ኮዶች (404፣ 500) ያልተሳኩ ጥያቄዎችን ያሳያሉ። ቀርፋፋ ቆይታዎች የብቃት ማነቆዎችን ያሰይማሉ።
DevSuite Pro ን በነፃ ይጫኑ እና 64+ የገንቢ መሳሪያዎችን ለአሳሽዎ ይክፈቱ።
