Το Broken Image Finder σαρώνει κάθε <img> και CSS background-image στη σελίδα, εντοπίζει αποτυχημένες φορτώσεις (404, αποτυχίες CORS, μολυσμένα canvases), και τις εμφανίζει σε μια καθαρή λίστα. Φιλτράρετε κατά χαλασμένες/όλες/CSS backgrounds, μεταβείτε και επισημάνετε κάθε εικόνα στη σελίδα, και αντιγράψτε τη λίστα των χαλασμένων URL για γρήγορες αναφορές σφαλμάτων.
Οι χαλασμένες εικόνες είναι ένα από τα πιο εμφανή bugs σε μια ιστοσελίδα — ωστόσο είναι εκπληκτικά εύκολο να τις προσπεράσετε κατά τον έλεγχο ποιότητας, καθώς αποτυγχάνουν σιωπηλά. Το Broken Image Finder τις εντοπίζει όλες. Όταν ενεργοποιηθεί, το εργαλείο διατρέχει το DOM για κάθε στοιχείο <img> (ελέγχοντας naturalWidth / naturalHeight για να εντοπίσει αποτυχημένες φορτώσεις) και κάθε URL CSS background-image (δοκιμάζοντας το καθένα με ένα νέο Image() για να επαληθεύσει ότι φορτώνει). Τα αποτελέσματα κατηγοριοποιούνται ως OK / Broken / Loading και παρουσιάζονται σε μια φιλτραρισμένη λίστα με στατιστικά στο επάνω μέρος. Κάθε καταχώρηση δείχνει το URL, τον τύπο (img ή CSS bg), τις διαστάσεις αν έχει φορτωθεί, και το alt text αν υπάρχει. Οι χαλασμένες εικόνες επισημαίνονται με κόκκινο χρώμα και έχουν ένα κουμπί "Locate" που κάνει scroll στο στοιχείο ώστε να είναι ορατό και αναβοσβήνει ένα κόκκινο περίγραμμα γύρω του. Ένα κουμπί "Copy Broken URLs" παίρνει όλα τα αποτυχημένα URL μαζί για αντιγραφή/επικόλληση σε αναφορά σφάλματος. Λειτουργεί σε οποιαδήποτε σελίδα χωρίς να χρειάζεται πρόσβαση σε logs του backend — μια γρήγορη οπτική πύλη ελέγχου ποιότητας.
Ελέγχει κάθε στοιχείο <img> καθώς και κάθε URL background-image στα υπολογισμένα στυλ. Τα Data URI και blob URL παραλείπονται (είναι πάντα έγκυρα).
Στατιστικά με μια ματιά δείχνουν την υγεία των εικόνων της σελίδας. Οι αριθμοί ενημερώνονται ζωντανά καθώς επιλύονται οι ασύγχρονες δοκιμές.
Εναλλαγή μεταξύ των καρτελών Broken, All, και CSS Backgrounds. Μείνετε εστιασμένοι σε ό,τι χρειάζεται διόρθωση.
Κάντε κλικ στο Locate σε οποιαδήποτε εικόνα για να κάνετε scroll στο στοιχείο της στη σελίδα και να αναβοσβήσει ένα κόκκινο περίγραμμα γύρω της.
Ένα κλικ αντιγράφει τη λίστα των χαλασμένων URL εικόνων — επικολλήστε σε αναφορά σφάλματος ή μοιραστείτε με την ομάδα backend.
Περιορίζεται σε 500 σαρώσεις CSS-background ώστε το UI να παραμένει αποκριτικό σε σελίδες με πολύ περιεχόμενο.
Εκτελέστε σε staging πριν το deploy για να εντοπίσετε 404 που προέκυψαν από refactoring, μετονομασία assets, ή μεταναστεύσεις CDN.
Σαρώνετε περιοδικά ζωντανές σελίδες — οι χαλασμένες εικόνες βλάπτουν το SEO και την εμπιστοσύνη των χρηστών, και συχνά ξεφεύγουν από τα αυτοματοποιημένα tests.
Όταν οι editors ανεβάζουν εικόνες, κάποιες μπορεί να μην φτάσουν ποτέ στο τελικό URL. Σαρώστε για να εντοπίσετε νεκρές αναφορές.
Αν βασίζεστε σε εξωτερικές υπηρεσίες εικόνων (avatars, hot-linked φωτογραφίες προϊόντων), σαρώνετε τακτικά για να εντοπίσετε διακοπές.
Μετά τη μεταφορά assets σε νέο CDN ή bucket, σαρώστε κάθε βασική σελίδα για να επαληθεύσετε ότι η μετανάστευση δεν χάλασε τίποτα.
Κάντε κλικ στο εικονίδιο Broken Images στο dock του DevSuite Pro. Ανοίγει ένα panel και σαρώνει τη σελίδα αυτόματα.
Τα στατιστικά στην κορυφή του panel δείχνουν Total / OK / Broken / Loading. Αν Broken > 0, μεταβείτε στην καρτέλα Broken για να τις δείτε.
Κάντε κλικ στο Locate σε οποιαδήποτε γραμμή για να κάνετε scroll στο στοιχείο της στη σελίδα — ένα κόκκινο περίγραμμα αναβοσβήνει γύρω της για 2 δευτερόλεπτα.
Κάντε κλικ στο Copy Broken URLs για να πάρετε την πλήρη λίστα — επικολλήστε σε ένα ticket, chat, ή διερεύνηση backend.
Μετά από διορθώσεις στο backend, κάντε κλικ στο Re-scan Page για να επαληθεύσετε ότι όλες οι εικόνες φορτώνουν πλέον σωστά.
Εγκαταστήστε το DevSuite Pro δωρεάν και ξεκλειδώστε 64+ εργαλεία προγραμματιστή για το πρόγραμμα περιήγησής σας.
