Broken Image Finder scansiona ogni tag <img> e ogni background-image CSS nella pagina, rileva i caricamenti falliti (404, errori CORS, canvas contaminati) e li mostra in un elenco pulito. Filtra per immagini interrotte/tutte/sfondi CSS, vai ed evidenzia ogni immagine nella pagina e copia l'elenco degli URL interrotti per segnalazioni di bug rapide.
Le immagini interrotte sono uno dei bug più visibili su una pagina web, eppure è sorprendentemente facile che sfuggano durante il QA perché falliscono silenziosamente. Broken Image Finder le individua tutte. Una volta attivato, lo strumento percorre il DOM per ogni elemento <img> (controllando naturalWidth / naturalHeight per rilevare caricamenti falliti) e ogni URL di background-image CSS (testando ognuno con un nuovo oggetto Image() per verificarne il caricamento). I risultati sono categorizzati come OK / Interrotto / Caricamento e presentati in un elenco filtrabile con i conteggi statistici in alto. Ogni voce mostra l'URL, il tipo (img o sfondo CSS), le dimensioni se caricate e il testo alternativo se presente. Le immagini interrotte sono evidenziate in rosso e hanno un pulsante "Individua" che fa scorrere l'elemento in vista e fa lampeggiare un bordo rosso attorno ad esso. Un pulsante "Copia URL interrotti" preleva tutti gli URL falliti in una volta sola per il copia-incolla nelle segnalazioni di bug. Funziona su qualsiasi pagina senza dover accedere ai log del backend: un rapido controllo di QA visivo.
Controlla ogni elemento <img> e ogni URL background-image negli stili calcolati. I Data URI e gli URL blob vengono saltati (sono sempre validi).
Statistiche a colpo d'occhio mostrano lo stato delle immagini della pagina. I numeri si aggiornano in tempo reale man mano che i test asincroni si risolvono.
Passa tra le schede Interrotti, Tutti e Sfondi CSS. Rimani concentrato su ciò che deve essere corretto.
Clicca su Individua in corrispondenza di qualsiasi immagine per scorrere fino al suo elemento nella pagina e far lampeggiare un'evidenziazione rossa attorno ad esso.
Un solo clic per copiare l'elenco degli URL delle immagini interrotte: incollalo in una segnalazione di bug o condividilo con il team backend.
Limitato a 500 scansioni di sfondi CSS per mantenere l'interfaccia reattiva su pagine ricche di contenuti.
Eseguilo in staging prima del deploy per individuare i 404 introdotti da refactoring, asset rinominati o migrazioni CDN.
Scansiona periodicamente le pagine live: le immagini interrotte danneggiano la SEO e la fiducia degli utenti, e spesso sfuggono ai test automatizzati.
Quando i redattori caricano immagini, alcune potrebbero non arrivare mai all'URL finale. Esegui una scansione per individuare i riferimenti inattivi.
Se ti affidi a servizi di immagini esterni (avatar, foto prodotto collegate esternamente), esegui scansioni regolari per individuare eventuali interruzioni del servizio.
Dopo aver spostato gli asset su un nuovo CDN o bucket, scansiona ogni pagina chiave per verificare che la migrazione non abbia interrotto nulla.
Clicca sull'icona Immagini interrotte nel dock di DevSuite Pro. Si aprirà un pannello che scansionerà automaticamente la pagina.
Le statistiche in alto nel pannello mostrano Totale / OK / Interrotto / Caricamento. Se Interrotto > 0, passa alla scheda Interrotto per vederle.
Clicca su Individua su qualsiasi riga per far scorrere l'elemento in vista nella pagina: un bordo rosso lampeggerà attorno ad esso per 2 secondi.
Clicca su Copia URL interrotti per prelevare l'elenco completo: incollalo in un ticket, in una chat o in un'indagine backend.
Dopo le correzioni nel backend, clicca su Riesegui scansione pagina per verificare che tutte le immagini vengano caricate correttamente.
Installa DevSuite Pro gratuitamente e sblocca più di 64 strumenti per sviluppatori per il tuo browser.
