Broken Image Finder পেজের প্রতিটি <img> ও CSS background-image স্ক্যান করে, ভাঙা লোড (404, CORS ব্যর্থতা, tainted canvas) শনাক্ত করে, এবং একটি পরিষ্কার তালিকায় দেখায়। broken/all/CSS backgrounds অনুযায়ী ফিল্টার করুন, পেজে প্রতিটি ছবিতে জাম্প করে হাইলাইট করুন, এবং দ্রুত বাগ রিপোর্টের জন্য ভাঙা URL-এর তালিকা কপি করুন।
ভাঙা ছবি একটি ওয়েবপেজের সবচেয়ে দৃশ্যমান বাগগুলোর একটি — তবুও QA-এর সময় এগুলো আশ্চর্যজনকভাবে সহজেই চোখ এড়িয়ে যায় কারণ এগুলো নীরবে ব্যর্থ হয়। Broken Image Finder এগুলো সবই ধরে ফেলে। অ্যাক্টিভেট হলে, টুলটি প্রতিটি <img> এলিমেন্টের জন্য DOM ঘুরে দেখে (লোড ব্যর্থতা শনাক্ত করতে naturalWidth / naturalHeight চেক করে) এবং প্রতিটি CSS background-image URL (প্রতিটি লোড হচ্ছে কিনা যাচাই করতে একটি নতুন Image() দিয়ে প্রোব করে)। ফলাফল OK / Broken / Loading হিসেবে শ্রেণীবদ্ধ হয় এবং উপরে স্ট্যাট কাউন্টসহ একটি ফিল্টারযোগ্য তালিকায় দেখানো হয়। প্রতিটি এন্ট্রি URL, টাইপ (img বা CSS bg), লোড হলে ডাইমেনশন, ও থাকলে alt টেক্সট দেখায়। ভাঙা ছবি লাল রঙে হাইলাইট হয় এবং এর একটি "Locate" বাটন থাকে যা এলিমেন্টকে ভিউতে স্ক্রল করে এবং তার চারপাশে লাল আউটলাইন ফ্ল্যাশ করে। "Copy Broken URLs" বাটন সব ব্যর্থ URL একসাথে নিয়ে নেয় বাগ-রিপোর্ট কপি/পেস্টের জন্য। ব্যাকএন্ড লগে অ্যাক্সেস ছাড়াই যেকোনো পেজে কাজ করে — একটি দ্রুত ভিজ্যুয়াল QA গেট।
প্রতিটি <img> এলিমেন্ট এবং কম্পিউটেড স্টাইলের প্রতিটি background-image URL চেক করে। Data URI ও blob URL বাদ যায় (এগুলো সবসময় বৈধ)।
এক নজরে স্ট্যাট পেজের ছবিগুলোর স্বাস্থ্য দেখায়। অ্যাসিঙ্ক প্রোব সম্পন্ন হওয়ার সাথে সাথে সংখ্যা লাইভ আপডেট হয়।
Broken, All, ও CSS Backgrounds ট্যাবের মধ্যে সুইচ করুন। যা ফিক্স করা দরকার তাতে ফোকাস থাকুন।
যেকোনো ছবিতে Locate ক্লিক করে পেজে তার এলিমেন্টে স্ক্রল করুন এবং চারপাশে লাল হাইলাইট ফ্ল্যাশ করুন।
এক ক্লিকে ভাঙা ছবির URL তালিকা কপি হয় — একটি বাগ রিপোর্টে পেস্ট করুন বা ব্যাকএন্ড টিমের সাথে শেয়ার করুন।
কনটেন্ট-হেভি পেজে UI দ্রুত রাখতে ৫০০টি CSS-ব্যাকগ্রাউন্ড স্ক্যানে সীমাবদ্ধ।
রিফ্যাক্টর, নাম পরিবর্তিত অ্যাসেট, বা CDN মাইগ্রেশনের কারণে হওয়া 404 ধরতে ডিপ্লয়ের আগে স্টেজিংয়ে চালান।
নিয়মিত লাইভ পেজ স্ক্যান করুন — ভাঙা ছবি SEO ও ব্যবহারকারীর বিশ্বাস নষ্ট করে, এবং প্রায়ই অটোমেটেড টেস্ট এড়িয়ে যায়।
এডিটররা ছবি আপলোড করার সময়, কিছু হয়তো কখনো চূড়ান্ত URL-এ পৌঁছায় না। মৃত রেফারেন্স ধরতে স্ক্যান করুন।
আপনি যদি বাহ্যিক ইমেজ সার্ভিসের (অ্যাভাটার, হট-লিঙ্কড প্রোডাক্ট ফটো) ওপর নির্ভরশীল হন, আউটেজ ধরতে নিয়মিত স্ক্যান করুন।
অ্যাসেট নতুন CDN বা বাকেটে স্থানান্তরের পর, মাইগ্রেশন কিছু ভাঙেনি তা যাচাই করতে প্রতিটি গুরুত্বপূর্ণ পেজ স্ক্যান করুন।
DevSuite Pro ডকে Broken Images আইকনে ক্লিক করুন। একটি প্যানেল খোলে এবং স্বয়ংক্রিয়ভাবে পেজ স্ক্যান করে।
প্যানেলের উপরে স্ট্যাট Total / OK / Broken / Loading দেখায়। Broken > 0 হলে সেগুলো দেখতে Broken ট্যাবে যান।
পেজে তার এলিমেন্টে স্ক্রল করতে যেকোনো সারিতে Locate ক্লিক করুন — এর চারপাশে ২ সেকেন্ডের জন্য লাল আউটলাইন ফ্ল্যাশ করে।
পুরো তালিকা নিতে Copy Broken URLs ক্লিক করুন — একটি টিকেট, চ্যাট, বা ব্যাকএন্ড ইনভেস্টিগেশনে পেস্ট করুন।
ব্যাকএন্ড ফিক্সের পর, সব ছবি এখন সঠিকভাবে লোড হচ্ছে তা যাচাই করতে Re-scan Page ক্লিক করুন।
বিনামূল্যে DevSuite Pro ইনস্টল করুন এবং আপনার ব্রাউজারের জন্য ৬৪+ ডেভলপার টুল আনলক করুন।
