Usar DevTools Network para encontrar errores 404

Si tu web aparece sin estilos o una imagen no carga, abre DevTools Network y recarga la página. El panel muestra qué dirección se solicitó y qué respondió el servidor.

Captura la petición que falla

1. Abre las herramientas del navegador y entra en Network o Red.
2. Activa Preserve log si hay una redirección y recarga.
3. Busca un estado 404. Filtra por CSS, JS o Img según el recurso que falte.
4. Selecciona la solicitud y compara Request URL con la ubicación real del archivo.

Encuentra el archivo que originó la petición

Initiator ayuda a identificar si la solicitud procede del HTML, de JavaScript o de una hoja de estilos. Si url('../img/logo.webp') aparece en un CSS externo, el navegador calcula la ruta desde esa hoja. Una ruta que parece correcta desde el HTML puede apuntar a otra carpeta.

Reproduce el caso con un ejemplo

Si el archivo está en css/estilos.css y el HTML solicita styles/estilos.css, cambia solo la ruta incorrecta. Repite la carga y comprueba tanto el estado como la vista previa de la respuesta. Un servidor puede devolver una página HTML con estado 200 para una URL que debería entregar CSS.

Comprueba la corrección

Si la primera prueba funciona, abre también una página interior. Las rutas relativas pueden cambiar al navegar a una URL con más niveles. Con DevTools abierto, desactiva temporalmente la caché para distinguir un archivo antiguo de una ruta rota.

Consulta la documentación de referencia y la guía relacionada de MasterCodePro.