Cómo recuperar archivos estáticos del caché de Chrome
Apr 01, 2022 / Victor Tisnado

Lo más recomendable a la hora de trabajar un proyecto de desarrollo web, por no decir que una obligación, es usar un sistema de control de versiones. Esto evita que se suban archivos con errores a producción así como la perdida y conflicto de versiones, sobre todo cuando más de una persona trabajan en los mismos archivos. 

Lamentablemente hay momentos en que nos podemos encontrar con un proyecto sin una adecuada gestión de archivos. En este caso lo más obvio sería empezar por crear un repositorio en alguna plataforma como Github o Gitlab, pero para los efectos de este post vamos a plantear una situación en la que:

  1. No se cuenta con repositorio de archivos.
  2. Se subió un cambio en "caliente" a producción.
  3. No se cuenta con backup del/los archivos originales.
  4. Es un viernes por la tarde y... ¡el proyecto dejó de funcionar!

Sí, la situación arriba mencionada no debería suceder en 2022, pero si estás pasando por esto, el caché de Chrome podría salvarte de un mal rato.

Caché al rescate

Si estás leyendo este post probablemente ya sepas que casi todo lo que ves en el navegador queda guardado en un sistema de archivos local llamado "caché". El caché del navegador guarda archivos estáticos como los .css y .js de nuestro sitio.

Ahora bien, imaginando la situación arriba descrita, es posible recuperar estos archivos del caché de alguien que no haya entrado al proyecto luego dedel fallo.

Para ejecutar este último recurso solo necesitarás seguir los siguientes pasos:

  1. Desconectar la computadora de internet.
  2. Abrir Chrome y escribir la dirección del sitio web. No importa que salga un mensaje de sin conexión.
  3. Presionar F12 para abrir Chrome Dev Tools y navegar a la pestaña de Application.
  4. Buscar en el listado de la izquierda donde dice Back/forward cache.
  5. Hacer clic en el botón: Test back/forward cache.

Lo pasos anteriores deberían permitirte ver una versión "offline" del sitio.

Ahora podrás recuperar los archivos estáticos solo yendo a la pestaña de Elements. Aquí podrás buscar el link a cualquier archivo CSS o JS, darle clic derecho y elegir la opción: Reveal in sources panel, con esto podrás ver el código de la última versión de los archivos que estuvieron en producción.

¿Qué te pareció este truco del caché, ya lo conocías o conoces otra manera de hacerlo?