Broken Image Finder በገጹ ላይ ያለውን እያንዳንዱን <img> እና CSS background-image ይቃኛል፣ የተሰበሩ ጫናዎችን (404s, CORS failures, tainted canvases) ይለያል፣ እና በንፁህ ዝርዝር ውስጥ ያሳያቸዋል። በተሰበረ/ሁሉም/CSS backgrounds ያጣሩ፣ ወደ እያንዳንዱ ምስል በገጹ ላይ ይዝለሉ እና ያድምቁ፣ እና ለፈጣን ስህተት ሪፖርቶች የተሰበሩ URLs ዝርዝርን ይቅዱ።
የተሰበሩ ምስሎች በድረ-ገጽ ላይ ካሉት በጣም የሚታዩ bugs አንዱ ናቸው — ነገር ግን በጸጥታ ስለሚወድቁ በ QA ወቅት ማጣት በጣም ቀላል ነው። Broken Image Finder ሁሉንም ይይዛል። ሲነቃ፣ መሳሪያው እያንዳንዱን <img> ኤለመንት (naturalWidth / naturalHeight ን በመፈተሽ የተሳኩ ጫናዎችን ለመለየት) እና እያንዳንዱን CSS background-image URL (እያንዳንዱን በአዲስ Image() በመመርመር እንደሚጫን ለማረጋገጥ) ለማየት DOM ን ይዞራል። ውጤቶች እንደ OK / Broken / Loading ተከፋፍለው በላይ ላይ ከስታት ቆጠራዎች ጋር በሚያጣራ ዝርዝር ውስጥ ይቀርባሉ። እያንዳንዱ ግቤት URL, ዓይነት (img ወይም CSS bg)፣ ከተጫነ ልኬቶች፣ እና ካለ alt text ያሳያል። የተሰበሩ ምስሎች በቀይ ተደምቀው "Locate" አዝራር አላቸው ኤለመንቱን ወደ እይታ የሚያንከባልል እና ቀይ ገጽታ ዙሪያውን የሚያበራ። "Copy Broken URLs" አዝራር ለስህተት-ሪፖርት መቅዳት/መለጠፍ ሁሉንም የወደቁ URLs በአንድ ጊዜ ይይዛል። ወደ backend logs መዳረሻ ሳያስፈልግ በማንኛውም ገጽ ላይ ይሰራል — ፈጣን የእይታ QA በር።
እያንዳንዱን <img> ኤለመንት እና እያንዳንዱን background-image URL በ computed styles ውስጥ ይፈትሻል። Data URIs እና blob URLs ይዘለላሉ (ሁልጊዜ ትክክለኛ ናቸው)።
በአንድ-እይታ ስታቶች የገጹን የምስሎች ጤንነት ያሳያሉ። async probes ሲፈቱ ቁጥሮች በቀጥታ ይዘምናሉ።
በ Broken, All, እና CSS Backgrounds ትሮች መካከል ይቀያይሩ። ማስተካከል በሚያስፈልገው ላይ ያተኩሩ።
በገጹ ላይ ወዳለው ኤለመንት ለመንከባለል እና ቀይ ደማቅ ዙሪያውን ለማብራት በማንኛውም ምስል ላይ Locate ጠቅ ያድርጉ።
አንድ ጠቅታ የተሰበሩ የምስል URLs ዝርዝርን ይቅዳል — ወደ ስህተት ሪፖርት ይለጥፉ ወይም ከ backend ቡድን ጋር ያካፍሉ።
UI ን በይዘት-ከባድ ገጾች ላይ ምላሽ ሰጪ ለማድረግ በ500 CSS-background ቅኝቶች ተገድቧል።
በ refactors, በተሰየሙ ንብረቶች, ወይም CDN migrations የተፈጠሩ 404s ን ለመያዝ ከመላክ በፊት በ staging ላይ ያካሂዱ።
ቀጥታ ገጾችን በየጊዜው ይቃኙ — የተሰበሩ ምስሎች SEO እና የተጠቃሚ እምነት ላይ ጉዳት ያደርሳሉ፣ እና ብዙ ጊዜ ራስ-ሰር ሙከራዎችን ያልፋሉ።
ኤዲተሮች ምስሎችን ሲጭኑ፣ አንዳንዶቹ ወደ መጨረሻው URL ላይደርሱ ይችላሉ። የሞቱ ማጣቀሻዎችን ለመያዝ ይቃኙ።
በውጫዊ የምስል አገልግሎቶች (avatars, hot-linked ምርት ፎቶዎች) ላይ የሚደገፉ ከሆነ፣ ማቆራረጦችን ለመያዝ በመደበኛነት ይቃኙ።
ንብረቶችን ወደ አዲስ CDN ወይም bucket ካዘዋወሩ በኋላ፣ ስደቱ ምንም ነገር እንዳልሰበረ ለማረጋገጥ እያንዳንዱን ቁልፍ ገጽ ይቃኙ።
በ DevSuite Pro dock ውስጥ ያለውን Broken Images አዶ ጠቅ ያድርጉ። ፓነል ይከፈታል እና ገጹን በራስ-ሰር ይቃኛል።
የፓነሉ የላይኛው ክፍል ስታቶች Total / OK / Broken / Loading ያሳያሉ። Broken > 0 ከሆነ፣ ለማየት ወደ Broken ትር ይቀይሩ።
ኤለመንቱን በገጹ ላይ ወደ እይታ ለማንከባለል በማንኛውም ረድፍ ላይ Locate ጠቅ ያድርጉ — ቀይ ደማቅ ዙሪያውን ለ2 ሰከንድ ያበራል።
ሙሉውን ዝርዝር ለማግኘት Copy Broken URLs ጠቅ ያድርጉ — ወደ ትኬት፣ ቻት፣ ወይም backend ምርመራ ይለጥፉ።
backend ማስተካከያዎች ከተደረጉ በኋላ፣ ሁሉም ምስሎች አሁን በትክክል እንደሚጫኑ ለማረጋገጥ Re-scan Page ጠቅ ያድርጉ።
DevSuite Pro ን በነፃ ይጫኑ እና 64+ የገንቢ መሳሪያዎችን ለአሳሽዎ ይክፈቱ።
