Detener el almacenamiento en caché de Chrome Mis archivos JS

136

Haré un cambio en mis archivos JS pero realmente no cambiará en el navegador, tengo que cambiar el nombre de los archivos cada vez para que se vuelva a cargar. ¿Hay algún tipo de comando .htaccess que pueda agregar o algo para que deje de almacenar en caché?

Incluso está almacenando en caché mis páginas html hard core. Necesito volver a abrir todo mi navegador solo para ver los cambios. ¿Podría ser un problema del servidor?

Howdy_McGee
fuente
¿Habilitar el encabezado ETag en su servidor web hace que Chrome se almacene en caché pero recupera correctamente una nueva copia del archivo cuando ha cambiado?
Webs de desarrolladores

Respuestas:

200

Puede hacer clic en el icono de configuración en la esquina superior derecha ...| Más herramientas | Herramientas para desarrolladores | Red | Deshabilitar caché (mientras DevTools está abierto)

Para Windows, esto es F12o CTRL + SHIFT + Imientras que en Mac CMD + SHIFT + Iabre DevTools.

Nueva ruta para la actualización de Chrome en septiembre de 2018:

Haga clic en el icono de configuración en la esquina superior derecha ...| Configuraciones | preferencias | Herramientas para desarrolladores | Red | Deshabilitar caché (mientras DevTools está abierto)

MartinHN
fuente
44
Error importante de Chrome para almacenar cosas en caché ... incluso cuando la página está marcada Sin caché ... Oh, bueno, al menos esto funciona, los usuarios pueden sufrir, pero al menos yo puedo desarrollar
Robert Noack
44
Tenga en cuenta que la "Configuración" ya no se encuentra en la parte inferior derecha. Haga clic en el menú de tres puntos en la esquina superior derecha para acceder a la configuración.
yizzlez
44
La ubicación es: esquina superior derecha | "..." | ajustes | Preferencias Red | "Desactivar caché (mientras DevTools está abierto).
atom88
1
¡Esto es MUY MALA PRÁCTICA! No, no debe tener un truco temporal para su uso ... debe tener una solución PERMANENTE para TODOS sus usuarios. La mejor manera es una cadena de consulta aleatoria al final del src. src = "someJs.js? someRandomStringCreatedByInlineJsOrServerRenderedCode", lo que haría que tuviera una versión nueva cada vez. una buena secuencia aleatoria sería tomar la fecha / hora de hoy y tirarla allí. Es posible que deba convertirlo en una cadena, ya que probablemente sea un objeto de fecha. Es realmente muy malo que esta haya sido la respuesta elegida y haya votado tanto.
1
A partir de Chrome 61.0.3163.100, parece que la opción ahora se encuentra en Más herramientas / Condiciones de red. La opción "Herramientas para desarrolladores" ya no existe.
Ilia Koulikov
61

Una forma más rápida de hacerlo es haciendo clic con el botón derecho en el icono de actualización junto a la barra de direcciones y seleccionando Vaciar caché y Recarga dura

Solo asegúrate de que las herramientas de desarrollo de Chrome estén abiertas. (Presione F12) Por cierto ... Este truco solo funciona en Chrome para Windows, Ubuntu y Mac OS

Nicole Rivers
fuente
2
FYI, intenté todo esto, y absolutamente nada de eso funcionó. En mi máquina (con la configuración predeterminada para Mountain Lion), F12 muestra el tablero de instrumentos.
Aubrey Goodman
2
¿Cómo es mucho mejor que la respuesta aceptada? Puede recargar normalmente con la respuesta aceptada.
SSH Este
No, no puedes. Al menos no puedo. ninguna de las respuestas funcionó para mí, todavía aparece una alerta que se elimina en mi archivo js local pero todavía está en el archivo js en caché en Chrome.
Burak Karakuş
1
Funciona para mi. Asegúrese de que las herramientas de desarrollo estén abiertas, de lo contrario, el clic derecho no mostrará el menú.
Venryx
Veo la opción, pero en mi caso, el script no se actualizó.
Ilia Koulikov
25

Mantenga presionada la tecla Mayús mientras hace clic en el botón de recarga.

StilesCrisis
fuente
12

agregue algo parecido script.js?a=[random Number]con el número aleatorio generado por PHP.

¿Has probado expire = 0, el pragma "no-cache" y "cache-control = NO-CACHE"? (No sé lo que dicen sobre los guiones).

Registros de EGO
fuente
2
Me topé con esta pregunta y estaba hojeando las respuestas. Esta es una idea terrible, porque: 1) generar el número aleatorio en cada solicitud hará que los navegadores vuelvan a descargar el archivo en cada visita. Desea un valor de tiempo de compilación , de modo que los navegadores solo regeneren el valor cuando realice cambios en el sitio. Dado que PHP se interpreta en tiempo de ejecución, es posible que deba hacerlo en el momento de la implementación. y 2) generar un número aleatorio significa que a veces (con la probabilidad de que aumente con el tiempo), el navegador obtendrá alguna copia antigua en caché aleatoria. Si debe hacerlo a la hora solicitada, use una marca de tiempo.
JakeRobb
Estoy haciendo esto y usando el número de versión de compilación, con un tiempo de espera decente (1 día) en el valor de caché del encabezado
Worthy7
11

Algunas ideas

  1. Cuando actualice su página en Chrome, haga CTRL + F5 para realizar una actualización completa.
  2. Incluso si establece la caducidad en 0, todavía se almacenará en caché durante la sesión. Tendrá que cerrar y volver a abrir su navegador nuevamente.
  3. Cuando guarde los archivos en el servidor, asegúrese de que las marcas de tiempo se actualicen. Chrome primero emitirá un HEADcomando en lugar de un GET completo para ver si necesita descargar el archivo completo nuevamente, y el servidor usa la marca de tiempo para ver.

Si desea deshabilitar el almacenamiento en caché en su servidor, puede hacer algo como:

Header set Expires "Thu, 19 Nov 1981 08:52:00 GM"
Header set Cache-Control "no-store, no-cache, must-revalidate, post-check=0, pre-check=0"
Header set Pragma "no-cache"

En .htaccess

Mike Christensen
fuente
Tenía esto pero el pre-check = 0, post-check = 0 es la adición que marcó la diferencia para mí.
TadLewis
7

Pasos rápidos:

1) Abra el panel de herramientas de desarrollador yendo al menú de Chrome -> Herramientas -> Herramientas de desarrollador

2) Haga clic en el icono de configuración en el lado derecho (¡es un engranaje!)

3) Marque la casilla "Desactivar caché (cuando DevTools esté abierto)"

4) Ahora, mientras el tablero está arriba, solo presiona actualizar y JS no se almacenará en caché.

StackG
fuente
1
Sin embargo, no ayuda depurar usando WebStorm. Entonces, DevTools está abierto. WebStrom no puede adjuntar un depurador.
Alexander Volkov
5

El problema es que Chrome debe tener must-revalidateen el encabezado Cache-Control` para volver a verificar los archivos para ver si es necesario volver a buscarlos.

Siempre puede SHIFT-F5 y forzar a Chrome a actualizar, pero si desea solucionar este problema en el servidor, incluya este encabezado de respuesta:

Cache-Control: must-revalidate

Esto le dice a Chrome que verifique con el servidor y vea si hay un archivo más nuevo. SI hay un archivo más nuevo, lo recibirá en la respuesta. De lo contrario, recibirá una respuesta 304 y la garantía de que el que está en la caché está actualizado.

Si NO configura este encabezado, en ausencia de cualquier otra configuración que invalide el archivo, Chrome nunca verificará con el servidor para ver si hay una versión más nueva.

Aquí hay una publicación de blog que analiza el tema más a fondo.

AgilePro
fuente
1
Creo que debería ser en Cache-Control: must-revalidatelugar de Cache-Control: must-validate. No creo que este último sea válido.
László Monda
3

Al realizar actualizaciones en mis aplicaciones web, usaré un controlador para devolver un solo archivo JS para evitar los golpes masivos en mi servidor, o agregarles una pequeña cadena de consulta:

<script type="text/javascript" src="/mine/myscript?20111205"></script>
Ryan Ternier
fuente
2
Si bien esto parece una práctica ingeniosa, es posible que tenga problemas con algunos servidores proxy que dejarán de almacenarse en caché cuando encuentren una cadena de consulta: developers.google.com/speed/docs/best-practices/…
Francois Bourgeois
2
Entonces, ¿qué deberías hacer en su lugar?
BlueSky
1
<Files *>
Header set Cache-Control: "no-cache, private, pre-check=0, post-check=0, max-age=0"
Header set Expires: 0
Header set Pragma: no-cache
</Files>
Alfabravo
fuente
1

Sé que esta es una pregunta "antigua". Pero los dolores de cabeza con el almacenamiento en caché nunca lo son. Después de un montón de pruebas y errores, descubrí que uno de nuestros proveedores de alojamiento web tenía a través de CPanel esta aplicación llamada Cachewall. Acabo de hacer clic en Habilitar modo de desarrollo y ... ¡voilà! Detuvo el dolor sufrido durante mucho tiempo :) Espero que esto ayude a alguien más ... R

Ramon Araujo
fuente
0

Obtuve el mismo archivo CSS cuando navego por el sitio web (en el servidor de la empresa de alojamiento con dominio real) y no pude obtener la versión actualizada en Chrome. Pude obtener la versión actualizada del archivo cuando lo examiné en Firefox. Ninguna de estas respuestas funcionó para mí. También tengo los archivos del sitio web en mi máquina y navego por el sitio con localhost usando mi servidor apache local. Apagué mi servidor apache y pude obtener el archivo actualizado. De alguna manera, mi servidor local de Apache estaba jugando con el caché de Chrome. Espero que esto ayude a alguien, ya que fue muy difícil para mí arreglar esto.

Alp Hancıoğlu
fuente
0
  1. Abrir herramientas de desarrollador

    • Cualquiera de F12
    • O ...-> More Tools->Developer Tools
  2. Hacer clic Empty Cache and Hard Reload

    • Haga clic con el botón derecho en el icono de actualización (justo a la izquierda de la barra de direcciones URL)
    • O haga clic con el botón izquierdo en el icono de actualización y manténgalo presionado durante 1 segundo
Xin
fuente