HTML – ¿Cómo puedo verificar si un file (.js o .css) se cargó o recogió del caching?

Primero, necesitaba una forma de forzar que el browser siempre cargara files .css y .js. Lo resolví poniendo un sufijo en los files:

Antes de:

<script type="text/javascript" src="file.js"></script> 

Después:

 <script type="text/javascript" src="file.js?v=1"></script> 

Eso aparentemente funcionó.

Ahora, necesito saber si realmente funcionó. Claro, puedo editar el file y verificar los cambios en mi browser, pero necesito una forma más específica, algo así como una opción en el browser que muestre "Archivo cargado desde el caching" / "Nuevo file cargado desde la carpeta".

¿Me puedes ayudar?

Es el área de responsabilidad del browser para cargar resources del server o sacarlos de la memory caching. Del código del cliente no se puede determinar la fuente que se usó realmente (si no se cargan los resources dinámicamente con ajax). Solo usted puede mirar la pestaña Red en Developer Tools (o Firebug).

En un browser Chromium / Chrome, abra las herramientas de desarrollo (alt + cmd / ctrl + I, o haga clic con el button secundario en la window y presione inspeccionar elemento), y luego click la pestaña Red; son las properties Tamaño y Estado que le informan si desde el caching del browser, y si se realizó una request al server para verificar si el activo estaba obsoleto.

La razón por la cual las personas pueden confundir 304 con el ideal en el almacenamiento en caching del browser es que si revisas la respuesta enviando una request a través de una actualización, siempre verificarás si el server está obsoleto y obtendrás un 304.

Si abre herramientas de desarrollador de antemano; o si en lugar de actualizar simplemente click la barra de direcciones y presione enter. Entonces deberías get un estado: 200 OK tamaño: (desde el caching) .

Si por algún motivo no ve una columna con el tamaño, haga clic con el button derecho en la window y selecciónela de la list de properties.