Broken Image Finder scanne chaque <img> et image d'arrière-plan CSS de la page, détecte les erreurs de chargement (404, erreurs CORS, canvas corrompus), et les affiche dans une liste claire. Filtrez par cassées/toutes/arrière-plans CSS, localisez et mettez en évidence chaque image sur la page, et copiez la liste des URL cassées pour vos rapports.
Les images cassées sont des bugs visibles qui nuisent à la confiance, mais ils sont étonnamment faciles à manquer lors du test QA car ils échouent silencieusement. Broken Image Finder les repère tous. Lorsqu'il est activé, l'outil parcourt le DOM pour chaque élément <img> (vérifie naturalWidth / naturalHeight pour détecter l'échec) et chaque URL d'image d'arrière-plan CSS (qu'il teste avec un nouvel objet Image() pour vérification). Les résultats sont classés : OK / Cassées / En cours de chargement et présentés dans une liste filtrable. Chaque entrée affiche l'URL, le type (img ou CSS bg), les dimensions et le texte alt. Les images cassées se colorent en rouge et possèdent un bouton "Localiser" qui fait défiler la page et entoure l'élément d'un cadre rouge clignotant. Un bouton "Copier les URL cassées" permet de récupérer la liste pour vos tickets. Fonctionne sur n'importe quelle page sans accès aux logs serveur.
Vérifie chaque élément <img> ainsi que chaque image d'arrière-plan dans les styles calculés. Les données base64 et blobs sont ignorés.
Statistiques en un coup d'œil sur la santé des images de la page. Les chiffres se mettent à jour en direct au fur et à mesure des tests.
Basculez entre les onglets Cassées, Toutes et Arrière-plans CSS. Restez concentré sur ce qui doit être réparé.
Cliquez sur Localiser pour faire défiler la page jusqu'à l'image et la faire clignoter en rouge.
Copiez en un clic la liste des URL d'images cassées — collez-la dans un rapport de bug ou partagez-la avec l'équipe back-end.
Limité à 500 scans d'arrière-plan CSS pour maintenir la réactivité de l'interface sur les pages lourdes.
Lancez l'outil sur le staging avant déploiement pour détecter les 404 introduites par des refontes, renommages ou migrations CDN.
Scannez régulièrement vos pages en production — les images cassées nuisent au SEO et à l'expérience utilisateur.
Vérifiez que les images mises en ligne par les éditeurs de contenu sont toujours accessibles et n'ont pas de liens morts.
Si vous dépendez de services externes (avatars, photos produits), scannez régulièrement pour détecter les pannes.
Après avoir déplacé des fichiers vers un nouveau CDN ou bucket, scannez les pages clés pour vérifier que la migration n'a rien cassé.
Cliquez sur l'icône Broken Images dans le dock DevSuite Pro. Un panneau s'ouvre et scanne automatiquement la page.
Regardez les stats en haut. Si Cassées > 0, allez dans l'onglet correspondant pour voir les détails.
Cliquez sur Localiser pour faire défiler l'élément dans la vue — un cadre rouge clignote pendant 2 secondes.
Cliquez sur Copier les URL Cassées pour récupérer la liste complète — collez-la dans un ticket ou une discussion.
Après les corrections côté serveur, cliquez sur Re-scanner la Page pour vérifier que tout est rentré dans l'ordre.
Installez DevSuite Pro gratuitement et débloquez plus de 39 outils de développement pour votre navigateur.
