Broken Image Finder scanează fiecare <img> și fiecare background-image CSS din pagină, detectează încărcările eșuate (404, erori CORS, canvas-uri tainted) și le afișează într-o listă clară. Filtrați după broken/toate/fundaluri CSS, treceți la fiecare imagine și evidențiați-o pe pagină, apoi copiați lista de URL-uri nefuncționale pentru rapoarte rapide de bug-uri.
Imaginile nefuncționale sunt printre cele mai vizibile bug-uri de pe o pagină web — și totuși sunt surprinzător de ușor de ratat în timpul QA-ului, deoarece eșuează în tăcere. Broken Image Finder le prinde pe toate. La activare, instrumentul parcurge DOM-ul căutând fiecare element <img> (verificând naturalWidth / naturalHeight pentru a detecta încărcările eșuate) și fiecare URL de background-image CSS (testând fiecare cu un obiect Image() nou, pentru a verifica dacă se încarcă). Rezultatele sunt clasificate ca OK / Broken / Loading și prezentate într-o listă filtrabilă, cu statistici în partea de sus. Fiecare intrare afișează URL-ul, tipul (img sau CSS bg), dimensiunile dacă s-a încărcat și textul alt, dacă există. Imaginile nefuncționale sunt evidențiate cu roșu și au un buton "Locate" care derulează elementul în vizor și îi aprinde un contur roșu intermitent. Un buton "Copy Broken URLs" preia deodată toate URL-urile eșuate, pentru a le copia/lipi rapid într-un raport de bug. Funcționează pe orice pagină, fără a fi nevoie de acces la log-urile de backend — o poartă rapidă de QA vizual.
Verifică fiecare element <img> plus fiecare URL de background-image din stilurile calculate. URI-urile de date și URL-urile blob sunt ignorate (sunt mereu valide).
Statistici dintr-o privire care arată starea de sănătate a imaginilor din pagină. Numerele se actualizează live pe măsură ce sondele asincrone se finalizează.
Comutați între filele Broken, All și CSS Backgrounds. Rămâneți concentrat pe ce trebuie corectat.
Faceți clic pe Locate pentru orice imagine, pentru a derula la elementul respectiv pe pagină și a-i aprinde un contur roșu intermitent.
Un singur clic copiază lista de URL-uri de imagini nefuncționale — lipiți-o într-un raport de bug sau trimiteți-o echipei de backend.
Limitat la 500 de scanări de fundaluri CSS, pentru a păstra interfața receptivă pe pagini bogate în conținut.
Rulați pe staging înainte de deploy, pentru a prinde 404-urile introduse de refactorizări, resurse redenumite sau migrări de CDN.
Scanați periodic paginile live — imaginile nefuncționale afectează SEO-ul și încrederea utilizatorilor și adesea scapă testelor automate.
Când editorii încarcă imagini, unele s-ar putea să nu ajungă niciodată la URL-ul final. Scanați pentru a depista referințele moarte.
Dacă vă bazați pe servicii externe de imagini (avataruri, fotografii de produs hot-linked), scanați periodic pentru a detecta întreruperile.
După mutarea resurselor pe un CDN sau bucket nou, scanați fiecare pagină importantă pentru a verifica dacă migrarea nu a stricat nimic.
Faceți clic pe pictograma Broken Images din dock-ul DevSuite Pro. Se deschide un panou și pagina este scanată automat.
Statisticile din partea de sus a panoului arată Total / OK / Broken / Loading. Dacă Broken > 0, comutați la fila Broken pentru a le vedea.
Faceți clic pe Locate pentru orice rând, pentru a derula la elementul respectiv pe pagină — un contur roșu se aprinde intermitent timp de 2 secunde.
Faceți clic pe Copy Broken URLs pentru a prelua lista completă — lipiți-o într-un tichet, chat sau investigație de backend.
După ce backend-ul este corectat, faceți clic pe Re-scan Page pentru a verifica dacă toate imaginile se încarcă acum corect.
Instalează DevSuite Pro gratuit și deblochează peste 64 de instrumente pentru dezvoltatori în browserul tău.
