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


1607

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?


185
Este es probablemente el peor error de Chrome. He perdido demasiado tiempo preguntándome por qué las cosas estaban saliendo mal, solo para descubrir que, a pesar de haber forzado una recarga completa con ^ F5, está utilizando un recurso obsoleto de una hora de antigüedad.
Glenn Maynard

45
Se supone que los navegadores deben almacenar en caché. Recuerde, sus usuarios también se almacenarán en caché, por lo que es posible que no vean los cambios que realice después de que su sitio esté en producción. La forma de evitar esto es versionar sus archivos. my_css.css? version = something_unique. Si el navegador no ha visto la versión antes, vuelve a descargar el archivo. algo_unique podría, por ejemplo, ser la última fecha de modificación.
user984003

34
@ user984003 Ctrl+Shift+Ro Shift+Rdebería vaciar el caché ...
Adonis K. Kakoulidis

19
@ user984003 No si les digo que no almacenen en caché. Sí, un número de versión de memoria caché es ideal para la versión final, ya que eso es lo que los usuarios están usando, pero cuando estoy construyendo un nuevo sitio y quiero ver cambios incrementales a medida que avanzo, no estoy cambiando el número de versión cada vez . Por eso desarrollo con Firefox: ¡tiene las opciones de desactivación de caché más confiables!
andrewb

11
@ user984003 sí, se supone que los navegadores deben almacenar en caché ... al navegar. Cuando se desarrolla, necesita más control sobre eso.
ahnbizcad

Respuestas:


1976

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.

captura de pantalla del panel de herramientas de desarrollo

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

pulsación larga


255
Desde mi experiencia, esta configuración (y todas las configuraciones en ese panel) solo surten efecto cuando las herramientas de desarrollo están abiertas.
Johann

28
@ Steve Esto no funciona para mí. No recibo ningún cambio, aunque tengo Chrome 19.0.1084.52, y marqué la casilla para deshabilitar el almacenamiento en caché. Lo intenté con el panel de desarrollo abierto. Lo intenté con el cerrado. Incluso intenté reiniciar mi navegador y luego reiniciar mi computadora. Todavía parece seguir dándome una versión en caché de la página. ¿Qué tengo que hacer? Chrome me ha dado problemas como este antes, así que eliminé todo lo relacionado con Google de mi computadora, luego instalé Chrome nuevamente. Solucionó la mayoría de las cosas, como la "pestaña de historial de carga permanente". Supongo que todavía no funciona.
Tgwizman

11
Descubrí que esto no funcionaba al actualizar la página actual después de cambiar la configuración. Solo cuando me alejé y luego volví, comenzó a funcionar.
Matt Gibson el

3
... o simplemente puedes depurar en modo incógnito! (que no almacena en caché ningún archivo)
Kwame

55
esa configuración es la mayor mentira en la historia del desarrollo web. reinicié mi computadora y Chrome aún muestra resultados incorrectos mientras Firefox muestra css actualizado :(
Claudiu Creanga

247

ingrese la descripción de la imagen aquí

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.


44
Sí, la opción de Herramientas de desarrollo de Chrome no parece funcionar para mí. Pero el asesino de caché funciona a las mil maravillas. El tiempo de recarga es significativamente más lento, como 4-5x, pero la publicación real del nuevo contenido es obviamente mucho más rápida.
Bryce Johnson el

2
Clear Cache y Disable Cache solo funcionan cuando se trabaja en localhost, en mi mac. Para el contenido en línea, soy refrescante y refrescante con la esperanza de ver cualquier cambio. Esta extensión es un salvavidas.
Sbpro

2
Descubrí que el uso de Disable Cache causa problemas con el almacenamiento local, específicamente el almacenamiento angular con Auth0. Cache Killer funciona perfectamente y no causa problemas con el almacenamiento local.
trevorc

55
Eliminado de Chrome Extensions Store debido a malware :( ¿Alternativas?
Semyon Vyskubov

3
Terminé escribiendo el mío, funciona igual pero puede alternar por pestaña. Licencia MIT y sin malware, lo prometo 😎! github.com/themichaelyang/cache-clearer
Michael Yang

199

Imagen del menú de recarga

  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.


77
bueno, definitivamente no funciona en Mac, he hecho clic en el botón de recarga con varias combinaciones de teclas;)
MJB

1
¿Qué es la recarga dura?
ManirajSS

@ManirajSS: volverá a cargar todo y evitará usar el caché, pero no volverá a descargar cosas descargadas por javascript después de cargar la página. No estoy seguro de por qué alguien lo usaría, pero supongo que podrías encontrar algunos casos en los que sería útil.
JackArbiter

2
Tampoco borrará el caché para iframes dentro de la página.
Pablo Mescher

77
No estoy seguro de cuánto tiempo ha sido cierto, pero a partir de Chrome 41, haga clic y mantenga presionado el botón de recarga en OS X, siempre que tenga abierta la ventana de herramientas del desarrollador.
Tim Keating

47

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á


1
use etiquetas de código para que su respuesta sea más legible. Creo que esta puede ser una de las mejores respuestas.
ThorSummoner

3
Buena respuesta. Aunque para la mayoría de las personas, deshabilitar el caché es solo algo temporal durante el desarrollo. Deshabilitarlo de forma permanente ralentizará significativamente una experiencia de navegación normal y es una mala ciudadanía de Internet, ya que pone una carga innecesaria en los servidores web que visita.
danielson317

3
No estoy de acuerdo con la mala ciudadanía de Internet, estamos hablando de crear un atajo para el trabajo de desarrollo. Así que esta es definitivamente la mejor respuesta en mi humilde opinión. Solo una pequeña cosa. Cada vez que copio esto en Windows desde esta página SO en algún acceso directo de Chrome, algunos de los caracteres no salen bien. Estos son los correctos: "C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --disable-application-cache --media-cache-size=1 --disk-cache-size=1Además, ¿cuál es el char justo antes "%1"? Eso no lo se.
peter.petrov

32

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


22

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.


22
  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é.

ingrese la descripción de la imagen aquí


2
Esto hace lo mismo que marcar "Deshabilitar caché" directamente en F12 Chrome Devtools y se restablecerá cuando reinicie Chrome.
Bogdan Verbenets

18

En lugar de presionar "F5" Simplemente presiona:

"Ctrl + F5"


66
También funciona en Firefox (no porque sea relevante para esta pregunta, pero alguien podría encontrarlo útil)
Donald Duck

17

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".

Deshabilitar caché en Chrome Canary Channel

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.


44
En mi experiencia, esto solo funciona mientras las herramientas de desarrollo están abiertas. Me sorprendió por qué el caché aún se mantenía en las páginas hasta que me di cuenta de que había cerrado las herramientas de desarrollo. Es extraño que la configuración no anule todo.
mbokil

Desafortunadamente, el modo de incógnito almacena en caché algunas imágenes y archivos.
GobSmack

16

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".


2
+1. Sin embargo, aún no es perfecto: para desarrollar en una computadora local, la memoria caché es completamente innecesaria y presentará problemas, por lo que todavía estaría interesado en una función de desactivación como Firebug.
c089

15

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.


14

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


tal vez sea un error o tal vez solo esté destinado a desarrolladores; dicho esto, habría pensado que a los no desarrolladores también les gustaría usar la opción de deshabilitar caché ¯ \ _ (ツ) _ / ¯
jamiethepiper

14

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:

ingrese la descripción de la imagen aquí

Comprobar Automatically reload active tab after clearing data:

ingrese la descripción de la imagen aquí

Seleccione Everythingpara Período de tiempo:

ingrese la descripción de la imagen aquí

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

ingrese la descripción de la imagen aquí

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

ingrese la descripción de la imagen aquí

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

ingrese la descripción de la imagen aquí


9

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.


8

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.


6

¿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;})();

5

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.


5

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í!


3

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.


No puedo encontrar la opción para definir en qué dominio lo hace. No se ve muy bien. ¿Qué tal chrome.google.com/webstore/detail/cache-killer/… ..?
nkkollaw

vaya al icono de clearcache en el navegador, haga clic derecho, opciones y luego debajo de cookies. Hay un pequeño ícono de configuración.
Chris

2

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 .

Captura de pantalla - Inspector de tamaño de página


2

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")?time=@DateTime.Now" 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é.


absolutamente. Usé esto y una compilación condicional, por lo que no aparece en las compilaciones de prueba y lanzamiento.
Cee McSharpface

Aún mejor es usar el tiempo de modificación de los archivos CSS como un valor variable. Esa solución también se puede utilizar en el entorno de producción. Simplemente funciona :) No estoy seguro de cómo se hace en ASP, pero en PHP algo como esto <link href = "style.css? Time = <? Php echo fileminfo ('style.css');?>" Rel = "stylesheet" >
Oliver Manner

2

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!


2

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.

ingrese la descripción de la imagen aquí


1

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é".


0

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.


0

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 .


0

¿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()
    }) 
  })

0

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.


0

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.


0

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.

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.