Broken Image Finder memindai setiap <img> dan background-image CSS di halaman, mendeteksi beban yang gagal (404, kegagalan CORS, canvas yang terkontaminasi), dan menampilkannya dalam daftar yang bersih. Filter berdasarkan rusak/semua/latar belakang CSS, lompati dan sorot setiap gambar di halaman, serta salin daftar URL gambar yang rusak untuk laporan bug cepat.
Gambar yang rusak adalah salah satu bug paling terlihat di halaman web — namun mereka mengejutkan mudah dilewatkan selama QA karena mereka gagal secara diam-diam. Broken Image Finder menangkap semuanya. Saat diaktifkan, alat berjalan melalui DOM untuk setiap elemen <img> (memeriksa naturalWidth / naturalHeight untuk mendeteksi beban yang gagal) dan setiap URL background-image CSS (menguji setiap dengan Image() segar untuk memverifikasi pemuatannya). Hasil dikategorikan sebagai OK / Broken / Loading dan disajikan dalam daftar yang dapat disaring dengan hitungan statistik di bagian atas. Setiap entri menunjukkan URL, jenis (img atau CSS bg), dimensi jika dimuat, dan teks alt jika ada. Gambar yang rusak disorot merah dan memiliki tombol "Locate" yang menggulir elemen ke tampilan dan menyorot garis merah di sekitarnya. Tombol "Copy Broken URLs" mengambil semua URL yang gagal sekaligus untuk copy/paste laporan bug. Bekerja di halaman apa pun tanpa perlu akses ke log backend — gerbang QA visual cepat.
Memeriksa setiap elemen <img> ditambah setiap URL background-image dalam gaya yang dihitung. URI Data dan URL blob dilewati (mereka selalu valid).
Statistik sekilas menunjukkan kesehatan gambar di halaman. Angka diperbarui secara langsung saat penyelidikan asinkron diselesaikan.
Beralih antara tab Broken, All, dan CSS Backgrounds. Tetap fokus pada apa yang perlu diperbaiki.
Klik Locate pada gambar apa pun untuk menggulir ke elemennya di halaman dan menyorot garis merah di sekitarnya.
Satu klik menyalin daftar URL gambar yang rusak — tempel ke laporan bug atau bagikan dengan tim backend.
Dibatasi hingga 500 pemindaian latar belakang CSS untuk menjaga UI tetap responsif di halaman yang kaya konten.
Jalankan pada staging sebelum deploy untuk menangkap 404 yang diperkenalkan oleh refaktor, aset yang diganti nama, atau migrasi CDN.
Pindai halaman langsung secara berkala — gambar yang rusak merugikan SEO dan kepercayaan pengguna, dan mereka sering terlewat dari tes otomatis.
Ketika editor mengunggah gambar, beberapa mungkin tidak pernah mencapai URL akhir. Pindai untuk menangkap referensi yang mati.
Jika Anda mengandalkan layanan gambar eksternal (avatar, foto produk hot-linked), pindai secara teratur untuk menangkap gangguan.
Setelah memindahkan aset ke CDN atau bucket baru, pindai setiap halaman kunci untuk memverifikasi migrasi tidak merusak apa pun.
Klik ikon Broken Images di dock DevSuite Pro. Panel terbuka dan memindai halaman secara otomatis.
Statistik atas panel menunjukkan Total / OK / Rusak / Pemuatan. Jika Rusak > 0, beralih ke tab Broken untuk melihatnya.
Klik Locate pada baris apa pun untuk menggulir elemennya ke tampilan di halaman — garis merah berkedip di sekitarnya selama 2 detik.
Klik Copy Broken URLs untuk mengambil daftar lengkap — tempel ke tiket, obrolan, atau investigasi backend.
Setelah perbaikan backend, klik Re-scan Page untuk memverifikasi semua gambar sekarang dimuat dengan benar.
Instal DevSuite Pro secara gratis dan buka 64+ alat pengembang untuk browser Anda.
