Deshabilitar el caché de Chrome para el desarrollo de sitios web

Estoy modificando la apariencia de un sitio (modificaciones CSS) pero no puedo ver el resultado en Chrome debido a la molesta caché persistente. Intenté Shift+ actualizar pero no funciona.

¿Cómo puedo desactivar el caché temporalmente o actualizar la página de alguna manera para poder ver los cambios?

Chrome DevTools puede deshabilitar el caché.

1. Haga clic derecho y elija Inspect Elementabrir DevTools. O utilice uno de los siguientes métodos abreviados de teclado :
   • F12
   • Command+ Option+i en Mac
   • Control+ Shift+ ien Windows o Linux
2. Hacer clic Network en la barra de herramientas para abrir el panel de red.
3. Marque la Disable cachecasilla de verificación en la parte superior.

Tenga en cuenta que, como dijo un tweet de @ChromiumDev , esta configuración solo está activa mientras las herramientas de desarrollo están abiertas .

Tenga en cuenta que esto dará como resultado la recarga de todos los recursos. Si desea deshabilitar el caché solo para algunos recursos, puede modificar el encabezado HTTP que su servidor envía junto con sus archivos.

Si no desea utilizar la Disable cachecasilla de verificación, presione prolongadamente el botón Actualizar con DevTools abierto para mostrar un menú con las opciones Hard Reloado Empty Cache and Hard Reloadque debería tener un efecto similar. Lea sobre la diferencia entre las opciones . Los siguientes atajos están disponibles:

• Command+ Option+R en Mac
• Control+ Shift+ Ren Windows o Linux

Borrar el caché es demasiado molesto cuando necesita borrar el caché 30 veces por hora ... así que instalé una extensión de Chrome llamada Classic Cache Killer que borra el caché en cada carga de página.

Enlace de Chrome Store (gratis) (¡Ahora sin malware!)

Ahora mi simulacro json, javascript, css, html y datos se actualiza cada vez en cada carga de página .

Yo nunca tengo que preocupar si necesito borrar mi caché.

Encontré unos 20 limpiadores de caché para Chrome, pero este parecía ligero y sin esfuerzo. En una actualización, Cache Killer ahora puede permanecer "siempre activo".

Nota: No conozco al autor del complemento de ninguna manera. Lo encontré útil.

1. Levante la consola del desarrollador de Chrome presionando F12y luego (con la consola abierta):

2. Haga clic derecho (o mantenga presionado el botón izquierdo) en el botón de recarga en la parte superior del navegador y seleccione "Vaciar caché y recargar duro".

Esto irá más allá de "Hard Reload" para vaciar el caché por completo, asegurando que todo lo descargado a través de JavaScript o etc. también evitará usar el caché. No tiene que meterse con la configuración ni nada, es una solución rápida de 1 disparo.

Hay dos opciones más para deshabilitar el almacenamiento en caché de páginas en Chrome para siempre :

1. Desactivar Chrome Cache en el Registro

Registro abierto (Inicio -> Comando -> Regedit)

Buscar: HKEY_CLASSES_ROOT\ChromeHTML\shell\open\command

Cambie la parte después de ... chrom.exe "a este valor: –disable-application-cache –media-cache-size=1 –disk-cache-size=1 — "%1"

Ejemplo: "C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" -disable-application-cache –media-cache-size=1 –disk-cache-size=1 — "%1"

IMPORTANTE:

• hay un espacio y un guión después de ... chrome.exe "

• deja la ruta a chrome.exe tal como está

• Si copia la línea, asegúrese de verificar si las citas son citas reales.

2. Desactive la memoria caché de Chrome cambiando las propiedades de acceso directo

Haga clic derecho en el icono de Chrome y seleccione "Propiedades" en el menú contextual. Agregue el siguiente valor a la ruta: –disk-cache-size=1

Ejemplo: "C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" –disk-cache-size=1

IMPORTANTE:

• hay un espacio y un guión después de ... chrome.exe "

• deja la ruta a chrome.exe tal como está

Si no desea editar la configuración de Chrome, puede usar el modo de incógnito para obtener los mismos resultados.

Además de la opción de deshabilitar la memoria caché (a la que accede mediante un botón en la esquina inferior derecha de la ventana de herramientas del desarrollador - Herramientas | Herramientas de desarrollador, o Ctrl+ Shift+ I), en el panel de red de las herramientas de desarrollador ahora puede hacer clic con el botón derecho y elija "Borrar caché" en el menú emergente.

1. F12 abrir Chrome DevTools
2. F1 abrir la configuración de DevTools
3. Marque Deshabilitar caché (mientras DevTools está abierto) como se muestra a continuación:

Actualmente se encuentra en la pestaña Preferencias, que es la predeterminada. Es posible que deba desplazarse hacia abajo. Esta casilla de verificación se ha movido al menos un par de veces desde que se hizo esta pregunta. Lo último que revisé fue en la columna central en la parte inferior. Si lo tiene abierto en una pantalla más delgada y hay 2 columnas en Preferencias, puede estar cerca de la esquina superior derecha. Siéntase libre de actualizar esta publicación si cambia o comenta y la actualizaré.

En lugar de presionar "F5" Simplemente presiona:

"Ctrl + F5"

En el Canal de Canarias (y tal vez el canal estable y el de desarrollo lo seguirán), esta se encuentra como la segunda opción general en el lado izquierdo debajo de la sección "General".

Además de eso, siempre existe la opción de cambiar al modo de incógnito a través de Ctrl + Shift + N. Aunque eso desafortunadamente también finaliza su sesión.

Usar Ctrl+ Shift+ Rpara actualizar fue bueno, pero no obtuve todo lo que necesitaba. aún algunas cosas no se actualizarán, como los datos almacenados en js y css. Encontré una solución: una barra de herramientas de Google para desarrolladores web de Chrome . Después de instalar la barra de herramientas, seleccione las opciones y "restablecer página".

Para ser claros, la casilla de verificación deshabilitar caché en Chrome (v17 aquí, pero desde v15 creo) no está en la interfaz de usuario de la configuración principal. Está en la interfaz de usuario de configuración de herramientas de desarrollador.

1. En el menú de icono de llave inglesa de la ventana del navegador (menú de preferencias) elija Herramientas → Herramientas de desarrollador

2. En la interfaz de usuario de herramientas de desarrollador que aparece, haga clic en el ícono de ajustes en la parte inferior derecha.

3. Marque la casilla de verificación 'Desactivar caché' en la sección Red.

Desactivar caché en Chrome solo funciona cuando tienes herramientas de desarrollo abiertas

Hasta que se solucione el error, puede usar Borrar caché complemento Chrome y también puede establecer un atajo de teclado para él.

Después de instalarlo, haga clic derecho y vaya a opciones:

Comprobar Automatically reload active tab after clearing data:

Seleccione Everythingpara Período de tiempo:

Y luego puedes ir a Menú => Herramientas => Extensiones:

Haga clic en los atajos de teclado en la parte inferior:

Y configure su atajo de teclado, por ejemplo Ctrl+ Shift+ R:

En realidad, si no le importa usar el ancho de banda, es más seguro por múltiples razones para deshabilitar el almacenamiento en caché y aconsejado por muchos sitios de seguridad.

Chromium no debería ser lo suficientemente arrogante como para tomar decisiones y aplicar la configuración a los usuarios.

Puede deshabilitar el caché en UNIX con --disk-cache-dir = / dev / null.

Como esto es inesperado, pueden ocurrir bloqueos, pero si lo hacen, eso claramente indicará un error más grave que debería solucionarse en cualquier caso.

Esto podría ayudar a alguien.

He manipulado mi Nginx para el almacenamiento en caché loco. Por lo tanto, deshabilitar el caché en las herramientas de red y borrar explícitamente el caché no funciona.

Una solución muy simple pero aburrida es que acabo de abrir una nueva pestaña de incógnito. Sorprendentemente funciona, todo el tiempo!

Una actualización completa en modo incógnito hace el truco cada vez que deseo volver a cargar en el mismo modo.

¿Qué tal un bookmarklet que cambia el nombre de la página para evitar que la página se almacene en caché? En Chrome, crearía un nuevo marcador y luego pegaría el código en la URL. Haga clic en el marcador y la página se volverá a cargar con la marca de tiempo para frustrar el caché.

javascript:(function(){var idx = location.href.indexOf('?');var d = new Date();var str = location.href.substr(0,idx) + '?version=' + d.getTime();location.href=str; void 0;})();

Me atraparon pero no necesariamente debido a Chrome.

Estoy usando jQuery para hacer solicitudes AJAX. Tenía el atributo de caché establecido en verdadero en la solicitud:

   $.ajax({
        type: 'GET',
        cache: true,
        ....

Establecer esto en falso solucionó mi problema, pero esto no es lo ideal.

No tengo idea de dónde se guardan estos datos, pero sí sé que Chrome nunca llegó al servidor para una solicitud.

Hay una manera mejor y más rápida ahora (Chrome versión 59.xx):

Haga clic derecho en el icono de recarga (a la izquierda del campo de URL) y obtendrá un menú desplegable, seleccione la tercera opción: 'Vaciar caché y recarga dura'.

Esta opción solo está disponible cuando las herramientas de desarrollador están abiertas. (Observe la diferencia con la opción 2: 'Hard reload' -cmd-shift-R). ¡No se está vaciando el caché aquí!

Hay una extensión de Chrome disponible en la tienda web de Chrome llamada Clear Cache .

Lo uso todos los días y creo que es una herramienta muy útil. Puede usarlo como un botón de recarga y puede borrar la memoria caché y, si lo desea, también cookies, almacenamiento local, datos de formulario, etc. También puede definir en qué dominio sucede esto. Por lo tanto, puede borrar toda esta mierda con solo el botón de recarga que de todos modos tiene que presionar: en sus dominios elegidos.

¡Muy, muy agradable!

¡También puede definir un atajo de teclado para esto en las opciones!

También otra forma es iniciar su ventana de Chrome en modo incógnito. Aquí el caché también debe estar completamente deshabilitado.

Mi tercer inspector de tamaño de página de la extensión de Chrome proporciona una opción más para deshabilitar el caché que deshabilita el caché exactamente de la misma manera que Devtools.

Además, la extensión informa rápidamente el tamaño de la página, el uso de caché, las solicitudes de red y el tiempo de carga de una página web de manera conveniente. Además de su código abierto en Github .

No estoy seguro de lo que está utilizando, pero si está utilizando ASP.Net, puede hacer lo siguiente, que funciona de maravilla:

<link href="@Url.Content("~/Content/Site.css")[email protected]" rel="stylesheet" />

Básicamente, agregará automáticamente la Fecha y Hora al final del archivo cada vez que se ejecute, lo que significa que dado que el nombre del archivo es técnicamente diferente, nunca tendrá que preocuparse de que se vuelva a almacenar en caché.

Tuve el mismo problema, intenté:

• Control Shift R,
• Deshabilitar caché en F12
• Control F5.

Luego descubrí que el uso de un manifiesto .appcache para un sitio que no es https está en desuso . ¡Eliminé mi archivo site.appcache y su referencia en la etiqueta html y ahora veo la última versión de cada página!

Si está utilizando ServiceWorkers (por ejemplo: para aplicaciones web progresivas), es probable que también deba marcar "Actualizar al recargar" en Aplicación> Trabajadores del servicio en herramientas de desarrollo.

Desde la versión 50 (si no recuerdo mal), la opción "Desactivar caché" se eliminó de la Configuración de Devtool. Vaya a la pestaña "Red" y encontrará la opción "Desactivar caché".

Hola, si su sitio está usando PHP, coloque el siguiente fragmento de PHP al comienzo de su página html:

   //dev versioning - stop caching
   $rand = rand(1, 99999999);

Ahora, en todos los lugares donde carga recursos como archivos CSS o JS en un script o elemento de enlace, agrega el valor aleatorio generado a la URL de la solicitud después de agregar '?' al URI a través de PHP:

    echo $rand;

¡Eso es! Ya no habrá un navegador que almacene en caché su sitio, independientemente de qué tipo.

Por supuesto, elimine su código antes de publicarlo o simplemente configure $ rand en una cadena vacía para permitir el almacenamiento en caché nuevamente.

He usado las otras opciones descritas anteriormente, pero creo que lo mejor es agregar el siguiente parámetro al inicio de chrome.exe.

"C: \ Archivos de programa (x86) \ Google \ Chrome \ Application \ chrome.exe" --disk-cache-size = 1 -media-cache = 1

Creo que no deshabilitar el caché de medios es una buena idea, pero está aquí por razones de integridad.

En realidad, quiero una opción para deshabilitar por completo el caché, para usar la memoria para IO en lugar de mi disco (¡lo que haría que el tiempo de carga sea 10 veces más rápido también!), Pero no creo que Chrome o cualquier navegador tenga esa opción todavía .

¿Cómo puedo desactivar el caché temporalmente o actualizar la página de alguna manera para poder ver los cambios?

No está claro a qué "caché" se refiere. Hay varios métodos diferentes que un navegador puede almacenar en caché de forma persistente. Web Storage siendo uno de ellos, Cache-Controlsiendo otro.

Algunos navegadores también tienen un Cache, usado en conjunto con Service Workers , para crear aplicaciones web progresivas (PWA) que brindan soporte fuera de línea.

Para borrar el caché para un PWA

self.caches.keys().then(keys => { keys.forEach(key => console.log(key)) })

para enumerar los nombres de las claves de caché, luego ejecute:

self.caches.delete('my-site-cache')

eliminar una clave de caché por nombre (es decir, my-site-cache). Luego actualiza la página.

Si ve algún error relacionado con los trabajadores en la consola después de actualizar, es posible que también deba cancelar el registro de los trabajadores registrados:

navigator.serviceWorker.getRegistrations()
  .then(registrations => {
    registrations.forEach(registration => {
      registration.unregister()
    }) 
  })

El asesino de caché de Chrome es, con mucho, la mejor opción. Como la URL de la tienda para instalar el asesino de caché está inactiva, puede descargar el archivo CRX aquí:

https://www.crx4chrome.com/extensions/jpfbieopdmepaolggioebjmedmclkbap/

una vez descargado el archivo de extensión, abra Chrome -> más herramientas -> extensiones, luego arrastre el archivo CRX desde el Explorador de archivos o su Escritorio (dependiendo de la ubicación donde descargó el archivo) a la ventana de Chrome para instalar la extensión.

Uso (en Windows), ctrl + shift + delete y cuando aparece el cuadro de diálogo de Chrome, presione la tecla Intro. Esto se puede configurar con lo que debe borrarse cada vez que ejecute esta secuencia. No es necesario tener dev. herramientas abiertas en este caso.

Estaba en una situación en la que el navegador cargaba los datos de la memoria caché desde el disco, incluso lo comprobé deshabilitado (estaba usando Chrome). Todos mis CSS y JS se estaban cargando desde el servidor, pero no desde la página web. Esto estaba sucediendo tanto en mi local como en producción.

Para solucionarlo, necesito poner un parámetro adicional en mi URL para forzar al navegador a obtener la página web del servidor, incluso el controlador no lo necesitaba.

Estaba usando ASP.Net, así que aquí está mi ejemplo:

//Controller function
public ActionResult Index()
    {
        return View();
    }
//Link
@Html.Action("Index", "Home", new { ts = DateTime.Now.Ticks.ToString()})

El resultado es que generará un enlace como: http://www.myweb.com/Home/Index?ts=636558555408282209

Esta es mi situación y solución. Esperemos que pueda ayudar a alguien.