Broken Image Finder escaneja cada <img> i cada background-image CSS de la pàgina, detecta càrregues fallides (404s, errors de CORS, canvas contaminats) i les mostra en una llista neta. Filtra per trencades/totes/fons CSS, salta i ressalta cada imatge a la pàgina, i copia la llista d'URL trencades per a informes d'errors ràpids.
Les imatges trencades són un dels errors més visibles en una pàgina web — tot i així, són sorprenentment fàcils de passar per alt durant el QA perquè fallen en silenci. Broken Image Finder les detecta totes. Quan s'activa, l'eina recorre el DOM cercant cada element <img> (comprovant naturalWidth / naturalHeight per detectar càrregues fallides) i cada URL de background-image CSS (provant-la amb un Image() nou per verificar que carrega). Els resultats es classifiquen com OK / Broken / Loading i es presenten en una llista filtrable amb comptadors estadístics a la part superior. Cada entrada mostra la URL, el tipus (img o CSS bg), les dimensions si s'ha carregat, i el text alt si n'hi ha. Les imatges trencades es ressalten en vermell i tenen un botó "Locate" que desplaça l'element cap a la vista i en fa parpellejar un contorn vermell. Un botó "Copy Broken URLs" agafa totes les URL fallides d'un cop per copiar-les i enganxar-les a un informe d'error. Funciona en qualsevol pàgina sense necessitat d'accedir als registres del backend — una porta de QA visual ràpida.
Comprova cada element <img> més cada URL de background-image als estils calculats. Els URIs de dades i les URL blob s'ometen (sempre són vàlids).
Les estadístiques d'un cop d'ull mostren l'estat de salut de les imatges de la pàgina. Els números s'actualitzen en directe a mesura que es resolen les comprovacions asíncrones.
Canvia entre les pestanyes Broken, All i CSS Backgrounds. Mantén el focus en el que cal corregir.
Fes clic a Locate en qualsevol imatge per desplaçar-te fins al seu element a la pàgina i fer-hi parpellejar un ressaltat vermell.
Un sol clic copia la llista d'URL d'imatges trencades — enganxa-la a un informe d'error o comparteix-la amb l'equip de backend.
Limitat a 500 escanejos de fons CSS per mantenir la interfície responsiva en pàgines amb molt contingut.
Executa'l a staging abans del desplegament per detectar 404s introduïts per refactoritzacions, recursos reanomenats o migracions de CDN.
Escaneja periòdicament les pàgines en producció — les imatges trencades perjudiquen el SEO i la confiança dels usuaris, i sovint passen desapercebudes a les proves automatitzades.
Quan els editors pugen imatges, algunes podrien no arribar mai a la URL final. Escaneja per detectar referències mortes.
Si depens de serveis d'imatges externs (avatars, fotos de producte enllaçades directament), escaneja regularment per detectar interrupcions.
Després de traslladar recursos a un nou CDN o bucket, escaneja cada pàgina clau per verificar que la migració no ha trencat res.
Fes clic a la icona Broken Images al dock de DevSuite Pro. S'obre un panell i s'escaneja la pàgina automàticament.
Les estadístiques a la part superior del panell mostren Total / OK / Broken / Loading. Si Broken > 0, canvia a la pestanya Broken per veure-les.
Fes clic a Locate a qualsevol fila per desplaçar el seu element cap a la vista a la pàgina — un contorn vermell hi parpelleja durant 2 segons.
Fes clic a Copy Broken URLs per obtenir la llista completa — enganxa-la a un tiquet, un xat o una investigació del backend.
Després de les correccions al backend, fes clic a Re-scan Page per verificar que totes les imatges ara carreguen correctament.
Instal·la DevSuite Pro gratuïtament i desbloqueja més de 64 eines de desenvolupador per al teu navegador.
