El Buscador de Imágenes Rotas escanea cada <img> e imagen de fondo CSS en la página, detecta cargas fallidas (404, errores de CORS, lienzos contaminados) y las muestra en una lista limpia. Filtra por rotas/todas/fondos CSS, salta a cada imagen resaltándola en la página y copia la lista de URLs rotas para informes rápidos de errores.
Las imágenes rotas son uno de los errores más visibles en una página web — sin embargo, son sorprendentemente fáciles de pasar por alto durante el control de calidad porque fallan silenciosamente. El Buscador de Imágenes Rotas las detecta todas. Cuando se activa, la herramienta recorre el DOM para cada elemento <img> (verificando naturalWidth / naturalHeight para detectar cargas fallidas) y cada URL de background-image de CSS (probando cada una con un nuevo objeto Image() para verificar su carga). Los resultados se categorizan como OK / Rotas / Cargando y se presentan en una lista filtrable con recuentos de estadísticas en la parte superior. Cada entrada muestra la URL, el tipo (img o fondo CSS), dimensiones si se ha cargado y el texto alternativo si está presente. Las imágenes rotas se resaltan en rojo y tienen un botón de "Localizar" que desplaza el elemento a la vista y hace parpadear un contorno rojo a su alrededor. Un botón "Copiar URLs Rotas" captura todas las URLs fallidas de una vez para copiar/pegar en informes de errores. Funciona en cualquier página sin necesidad de acceder a los logs del backend — un rápido filtro de QA visual.
Verifica cada elemento <img> además de cada URL de background-image en los estilos calculados. Las URIs de datos y las URLs de blobs se omiten (siempre son válidas).
Las estadísticas de un vistazo muestran la salud de las imágenes de la página. Los números se actualizan en vivo a medida que se resuelven las sondas asíncronas.
Cambia entre las pestañas Rotas, Todas y Fondos CSS. Mantente enfocado en lo que necesita corregirse.
Haz clic en Localizar en cualquier imagen para desplazarte hasta su elemento en la página y hacer parpadear un resaltado rojo a su alrededor.
Un clic copia la lista de URLs de imágenes rotas — pégala en un informe de errores o compártela con el equipo de backend.
Limitado a 500 escaneos de fondos CSS para mantener la interfaz receptiva en páginas con mucho contenido.
Ejecuta en staging antes del despliegue para detectar 404s introducidos por refactorizaciones, activos renombrados o migraciones de CDN.
Escanea periódicamente las páginas en vivo — las imágenes rotas dañan el SEO y la confianza del usuario, y a menudo pasan desapercibidas en las pruebas automatizadas.
Cuando los editores suben imágenes, algunas podrían no llegar nunca a la URL final. Escanea para detectar referencias muertas.
Si dependes de servicios de imágenes externos (avatares, fotos de productos enlazadas directamente), escanea regularmente para detectar caídas del servicio.
Después de mover activos a un nuevo CDN o bucket, escanea cada página clave para verificar que la migración no rompió nada.
Haz clic en el ícono de Imágenes Rotas en el dock de DevSuite Pro. Se abre un panel y escanea la página automáticamente.
Las estadísticas en la parte superior del panel muestran Total / OK / Rotas / Cargando. Si Rotas > 0, cambia a la pestaña Rotas para verlas.
Haz clic en Localizar en cualquier fila para desplazar su elemento a la vista en la página — un contorno rojo parpadea a su alrededor durante 2 segundos.
Haz clic en Copiar URLs Rotas para obtener la lista completa — pégala en un ticket, chat o investigación de backend.
Después de las correcciones en el backend, haz clic en Volver a Escanear Página para verificar que todas las imágenes ahora se cargan correctamente.
Instala DevSuite Pro gratis y desbloquea más de 39 herramientas de desarrollador para tu navegador.
