Broken Image Finder ช่วยสแกนทุกแท็ก <img> และ CSS background-image บนหน้าเว็บ เพื่อตรวจจับการโหลดที่ล้มเหลว (404, ปัญหา CORS, Canvas ที่ถูกจำกัดสิทธิ์) และแสดงผลในรูปแบบรายการที่อ่านง่าย สามารถกรองตามสถานะต่างๆ, ระบุตำแหน่งและไฮไลต์รูปภาพบนหน้าเว็บ และคัดลอกรายการ URL ที่เสียเพื่อนำไปรายงานบั๊กได้อย่างรวดเร็ว
รูปภาพที่เสีย (Broken image) เป็นหนึ่งในบั๊กที่เห็นได้ชัดที่สุดบนหน้าเว็บ — แต่กลับเป็นเรื่องง่ายที่ฝ่าย QA จะมองข้ามไปเพราะเบราว์เซอร์มักจะปิดกั้นการโหลดเงียบๆ Broken Image Finder จะดักจับทั้งหมดนั้น เมื่อเปิดใช้งาน เครื่องมือจะสำรวจ DOM เพื่อหาทุกองค์ประกอบ <img> (โดยตรวจสอบจาก naturalWidth / naturalHeight เพื่อตรวจจับการโหลดที่ล้มเหลว) และทุก URL ของ CSS background-image (โดยการทดลองสร้าง Image() ใหม่เพื่อยืนยันการโหลด) ผลลัพธ์จะถูกแบ่งออกเป็นสถานะ OK / Broken / Loading และแสดงในรายการที่กรองได้พร้อมสถิติสรุปที่ด้านบน แต่ละรายการจะแสดง URL, ประเภท (img หรือ CSS bg), ขนาดถ้าโหลดสำเร็จ และ Alt text ถ้ามี รูปภาพที่เสียจะถูกไฮไลต์เป็นสีแดงและมีปุ่ม "Locate" สำหรับเลื่อนหน้าจอไปยังองค์ประกอบนั้นๆ พร้อมแสดงเส้นขอบสีแดงกะพริบรอบตัวรูปภาพ และมีปุ่ม "Copy Broken URLs" เพื่อคัดลอก URL ที่เสียทั้งหมดไปใช้รายงานบั๊กได้ทันที ทำงานได้กับทุกหน้าเว็บโดยไม่จำเป็นต้องเข้าถึง Log ของเซิร์ฟเวอร์ — เป็นขั้นตอนการตรวจสอบความถูกต้องด้วยสายตาที่รวดเร็ว
ตรวจสอบทุกองค์ประกอบ <img> รวมถึงทุก URL ของ background-image ใน Computed styles โดยจะข้าม Data URI และ Blob URL (เนื่องจากใช้งานได้เสมอ)
แสดงสถิติสุขภาพของรูปภาพบนหน้าเว็บในพริบตา ตัวเลขจะอัปเดตแบบสดๆ เมื่อผลการตรวจสอบแบบ Async ทยอยส่งกลับมา
สลับไปมาระหว่างแท็บ Broken (เสีย), All (ทั้งหมด) และ CSS Backgrounds เพื่อให้โฟกัสเฉพาะจุดที่ต้องแก้ไข
คลิกปุ่ม Locate ที่รูปภาพใดก็ได้เพื่อเลื่อนหน้าจอไปยังตำแหน่งนั้นบนหน้าเว็บ และแสดงไฮไลต์สีแดงกะพริบรอบรูปภาพ
คัดลอกรายการ URL ของรูปภาพที่เสียทั้งหมดในคลิกเดียว — เพื่อนำไปวางในรายงานบั๊กหรือแชร์ให้ทีม Backend
จำกัดการสแกน CSS-background ไว้ที่ 500 รายการ เพื่อให้ UI ยังคงตอบสนองได้ดีแม้ในหน้าเว็บที่มีเนื้อหาหนาแน่น
รันบน Staging ก่อน Deploy เพื่อดักจับข้อผิดพลาด 404 ที่อาจเกิดจากการ Refactor โค้ด, การเปลี่ยนชื่อไฟล์ หรือการย้าย CDN
สแกนหน้าเว็บจริงเป็นระยะๆ — รูปภาพที่เสียส่งผลเสียต่อ SEO และความน่าเชื่อถือของผู้ใช้ และมักจะหลุดลอดการทดสอบอัตโนมัติไปได้
เมื่อบรรณาธิการอัปโหลดรูปภาพ บางรูปอาจไม่แสดงผลจริงบนหน้าเว็บ ให้สแกนเพื่อตรวจหาการอ้างอิงไฟล์ที่เสีย
หากคุณใช้บริการรูปภาพจากภายนอก (เช่น รูปโปรไฟล์ หรือรูปสินค้าจากลิงก์ภายนอก) ให้สแกนเป็นประจำเพื่อตรวจจับกรณีผู้ให้บริการล่ม
หลังจากย้ายไฟล์ไปยัง CDN หรือ Bucket ใหม่ ให้สแกนหน้าสำคัญๆ ทุกหน้าเพื่อยืนยันว่าการย้ายข้อมูลไม่ทำให้ส่วนไหนพัง
คลิกไอคอน Broken Images ใน DevSuite Pro dock แผงควบคุมจะเปิดขึ้นและเริ่มสแกนหน้าเว็บโดยอัตโนมัติ
ดูสถิติ Total / OK / Broken / Loading ที่ด้านบน หากพบ Broken > 0 ให้สลับไปยังแท็บ Broken เพื่อดูรายละเอียด
คลิกปุ่ม Locate ในแถวที่ต้องการเพื่อเลื่อนหน้าจอไปยังองค์ประกอบนั้นๆ — จะมีเส้นขอบสีแดงกะพริบรอบตัวรูปภาพเป็นเวลา 2 วินาที
คลิกปุ่ม Copy Broken URLs เพื่อรับรายการทั้งหมด — นำไปวางใน Ticket, แชท หรือส่งให้ทีม Backend ตรวจสอบ
หลังจาก Backend แก้ไขแล้ว ให้คลิก Re-scan Page เพื่อยืนยันว่ารูปภาพทั้งหมดโหลดได้ถูกต้องแล้ว
ติดตั้ง DevSuite Pro ฟรีและปลดล็อกเครื่องมือสำหรับนักพัฒนามากกว่า 64 รายการสำหรับเบราว์เซอร์ของคุณ
