Vídeo que explica diversos mecanismos para evitar que la cache del navegador te muestre archivos antiguos: borrar la caché, invalidarla, borrar almacenamiento, etc.
Una pregunta habitual cuando estamos comenzando a desarrollar páginas web es cómo borrar la caché del navegador, o al menos desactivarla para evitar que te muestre contenido antiguo en vez del que acabas de actualizar.
Es verdad que la caché da algunos problemillas menores y algunos pequeños dolores de cabeza cuando has actualizado la página y sin embargo sigues viendo el contenido antiguo, pero no es algo que no puedas solucionar en un minutillo y usar algunos trucos interesantes que vamos a mostrar en este artículo, al que acompaña un vídeo con más detalles.
¿Qué es la caché del navegador?
Para empezar explicamos que la caché del navegador es una** funcionalidad que permite que no se necesite descargar todo el contenido de la página web que estamos visitando**, al menos que no se descargue el contenido que ya tenemos en nuestro ordenador. Con esto se consigue que la navegación sea más rápida y se ahorre transferencia de datos. Es positivo tanto para el servidor de tu web como para los usuarios que la visitan.
La caché funciona automáticamente, sin que tú tengas que configurar nada y que se ponga en funcionamiento o no depende de diversos factores, entre los que se encuentra la configuración del servidor. No vamos a abordar la configuración del servidor, sino cómo usar el cliente web (el navegador) para que se eliminen los problemas de la caché durante la etapa de desarrollo.
¿Qué podemos hacer para que la caché no nos de problemas en desarrollo?
Durante la etapa de desarrollo la caché puede dar problemas, básicamente porque haces cambios en los archivos pero al refrescar la página no se ven esos cambios. Para solucionar estas situaciones vamos a ver tres trucos sencillos y rápidos que puedes aplicar en el navegador:
Al final del texto encuentras el vídeo donde vas a ver todo el proceso paso a paso, por lo que nos dedicaremos simplemente a resumir las opciones que se han presentado en el vídeo.
Cómo actualizar la página web sin usar la caché
El primer truco consiste en actualizar la página web borrando previamente los datos que se encuentran en la caché.
Esto lo consigues abriendo las herramientas de desarrollo y pulsando el botón de actualizar con el botón derecho del ratón. Seleccionando luego que se borre la cache y se actualice la página.
Cómo borrar la caché y todo el almacenamiento de una página web
Los sitios web pueden tener diversos medios de almacenamiento temporal de ficheros, ya sean páginas HTML, CSS, Javascript, etc. Pero además podemos guardar Cookies, datos en el localstorage, bases de datos y más…
Todos esos datos que se almacenan en el navegador pueden provocar que al refrescar el sitio no funcione como deseamos durante el desarrollo de una página. Por tanto, podemos necesitar borrarlos.
Esto lo conseguimos haciendo clic en la sección "Application" (Aplicación si está en español el menú de las herramientas de desarrolladores) y luego pulsando "Storage" y "Clear site data".
Cómo desactivar la caché durante desarrollo
Por último veremos un mecanismo muy útil que consiste en decirle al navegador que deshabilite la caché durante un tiempo, tanto como el tiempo que mantengamos las herramientas de desarrollo abiertas.
Para ello vamos a la sección "Network) (Red) y pulsamos el checkbox "Disable cache". Eso hará que durante toda la navegación se evite el uso de la caché, lo que nos ahorra clics y tiempo en cada actualización.
Vídeo sobre cómo borrar la caché del navegador y otros tips de caché
Acabamos con el vídeo en el que se explican todos los detalles de estos truquillos paso a paso. Espero que te ayude!!
Ana Alvarez Sanchez
Diseñadora y escritora en el ámbito de la web y las aplicaciones, apasionada del...