css - refrescar - no guardar cache html5
¿Cómo forzar al navegador Chrome a volver a cargar el archivo.css mientras se depura en Visual Studio? (22)
Actualmente estoy editando un archivo .css dentro de Visual Studio 2012 (en modo de depuración). Estoy usando Chrome como mi navegador. Cuando realizo cambios en el archivo .css de mi aplicación dentro de Visual Studio y lo guardo, actualizar la página no se cargará con el cambio actualizado en mi archivo .css. Creo que el archivo .css todavía está en la memoria caché.
Yo he tratado:
- CTRL / F5
- En Visual Studio 2012, vaya a Propiedades del proyecto, pestaña Web Elija Comenzar programa externo en la sección Acción de inicio Pegar o explorar la ruta de Google Chrome (Mine is C: / Users / xxx / AppData / Local / Google / Chrome / Application / chrome.exe) En el cuadro Argumentos de línea de comando, poner -incognito
- Usó las herramientas para desarrolladores de Chrome, hizo clic en el icono "engranaje", marcó "Desactivar caché".
Nada parece funcionar a menos que detenga manualmente la depuración (cierre de Chrome) y reinicie la aplicación (en depuración).
¿Hay alguna manera de forzar a Chrome a que recargue siempre todos los cambios css y vuelva a cargar el archivo .css?
Actualizar:
1. Los cambios en el estilo en línea en mi archivo .aspx se recogen cuando actualizo. Pero los cambios en un archivo .css no lo hacen. 2. Es una aplicación ASP.NET MVC4, así que hago clic en un hipervínculo, que hace un GET. Al hacer eso, no veo una nueva solicitud para la hoja de estilo. Pero al hacer clic en F5, se vuelve a cargar el archivo .css y el código de estado (en la pestaña de red) es 200.
¡Me había enfrentado el mismo problema aquí! pero estoy seguro, mi resolución es mejor que todos los ejemplos anteriores, simplemente haz esto,
- Tire de la consola del desarrollador de Chrome presionando F12
- Haga clic derecho en el botón de recarga en la parte superior del navegador y seleccione "Vaciar caché y recargar con cuidado".
Eso es todo!
¿Por qué es necesario actualizar toda la página? Solo actualice los archivos css sin volver a cargar la página. Es muy útil cuando, por ejemplo, tiene que esperar una respuesta larga de DB. Una vez que obtenga datos de DB y complete la página, edite sus archivos css y vuelva a cargarlos en Chrome (o en Firefox). Para hacer eso, necesitas instalar la extensión CSS Reloader . La versión de Firefox también está disponible.
Acabo de tener este problema cuando una persona que ejecuta Chrome (en una Mac) de repente dejó de cargar el archivo CSS. CMD + R NO funcionó en absoluto. No me gustan las sugerencias anteriores que fuerzan una recarga permanente en el sistema de producción.
Lo que funcionó fue cambiar el nombre del archivo CSS en el archivo HTML (y cambiar el nombre del archivo CSS, por supuesto). Esto obligó a Chrome a obtener el último archivo CSS.
Con macOS puedo obligar a Chrome a volver a cargar el archivo CSS haciendo
⌘ + MAYÚS + R
Encontré esta respuesta enterrada en los comentarios here pero merecía más exposición.
En mi caso, en la configuración de Chrome DevTools, simplemente establezca "Desactivar caché (mientras DevTools está abierto)" no funciona, debe marcar "Habilitar mapas de origen de CSS" y "Actualizar automáticamente el CSS generado", que figuran en la fuente grupo, para hacer que este problema de caché desaparezca.
Hay soluciones mucho más complicadas, pero una muy simple y sencilla es solo agregar una cadena de consulta aleatoria a su CSS.
Tales como src="/css/styles.css?v={random number/string}"
Si usa php u otro lenguaje del lado del servidor, puede hacerlo automáticamente con time() . Entonces sería styles.css?v=<?=time();?>
De esta manera, la cadena de consulta será nueva cada vez. Como dije, hay soluciones mucho más complicadas que son más dinámicas, pero en términos de prueba este método es superior (IMO).
La forma más sencilla de lograr su objetivo es abrir una nueva ventana de incógnito en su ventana privada o de Chrome en Firefox, que de forma predeterminada no será un caché.
Puede usar esto para fines de desarrollo para que no tenga que inyectar algún código de prevención de caché al azar en su proyecto.
Si usa IE, ¡que Dios lo ayude!
La manera más fácil en Safari 11.0 macOS SIERRA 10.12.6: Recargar página Desde Origin, puede usar la ayuda para averiguar en qué parte del menú se encuentra, o puede usar la opción de acceso directo (alt) + comando + R.
La versión actual de Chrome (55.x) no vuelve a cargar todos los recursos cuando recarga la página (Comando + R), y eso no es útil para depurar el archivo .css.
Command + R funciona bien si desea depurar solo los archivos .html, .php, .etc, y es más rápido porque funciona con recursos locales / en caché (.css, .js). Eliminar manualmente la memoria caché del navegador para cada iteración de depuración no es conveniente.
Procedimiento para forzar la recarga del archivo .css en Mac (Atajo de teclado / Chrome): Comando + Shift + R
Lo resolví con este simple truco.
<script type="text/javascript">
var style = ''assets/css/style.css?''+Math.random();;
</script>
<script type="text/javascript">
document.write(''<link href="''+style+''" rel="stylesheet">'');
</script>
Para forzar a Chrome a reaload css y js:
Opción de Windows 1: CTRL + MAYÚS + R
Opción 2 de Windows: MAYÚS + F5
OS X: ⌘ + MAYÚS + R
Actualizado según lo indicado por @PaulSlocum en los comentarios (y muchos confirmados)
Respuesta original:
Chrome cambió el comportamiento. Ctrl + R lo hará.
En OS X: ⌘ + R
Si tiene problemas para volver a cargar archivos css / js, abra el inspector ( CTRL + MAYÚS + C ) antes de volver a cargar.
Para macOS Chrome:
Presione MAYÚS + F5 .
Me funciona con Chrome versión 54.
Puede copiar pegar este script en la consola de Chrome y obliga a sus scripts CSS a volver a cargar cada 3 segundos. A veces me resulta útil cuando estoy mejorando los estilos CSS.
var nodes = document.querySelectorAll(''link'');
[].forEach.call(nodes, function (node) {
node.href += ''?___ref=0'';
});
var i = 0;
setInterval(function () {
i++;
[].forEach.call(nodes, function (node) {
node.href = node.href.replace(//?/_/_/_ref=[0-9]+/, ''?___ref='' + i);
});
console.log(''refreshed: '' + i);
},3000);
Sé que es una vieja pregunta, pero si alguien todavía está buscando cómo volver a cargar solo un archivo css / js externo, la forma más fácil ahora en Chrome es:
- Vaya a la pestaña Red en DevTools
- Haga clic derecho en el recurso y seleccione Reproducir XHR para repetir la solicitud
Asegúrese de que la opción Desactivar caché esté seleccionada para forzar la recarga.
Si está utilizando SiteGround como su empresa de hosting y ninguna de las otras soluciones ha funcionado, intente esto:
Desde cPanel, vaya a "HERRAMIENTAS DE MEJORAMIENTO DEL SITIO" y haga clic en "SuperCacher". En la página siguiente, haga clic en el botón "Flush Cache".
Si está utilizando Sublime Text 3, el uso de un sistema de compilación para abrir el archivo abre la versión más actual y proporciona una forma conveniente de cargarlo mediante [CTRL + B] Para configurar un sistema de compilación que abra el archivo en chrome:
Ve a ''Herramientas''
Pase el mouse sobre ''sistema de compilación''. En la parte inferior de la lista que aparece, haga clic en ''Nuevo sistema de compilación ...''
En el nuevo sistema de compilación, escriba esto:
{"cmd": [ "C://Program Files (x86)//Google//Chrome//Application//chrome.exe", "$file"]}
** siempre que la ruta indicada anteriormente en el primer conjunto de citas sea la ruta a donde se encuentra Chrome en su computadora, si no es simplemente, busque la ubicación de cromo y reemplace la ruta en el primer conjunto de citas con la ruta a Chrome en tu computadora.
Sigue siendo un problema.
Usar parámetros como "..css? Something = random-value" no cambia nada en mi experiencia de soporte al cliente. Solo los cambios de nombre funcionan.
Otra toma en el cambio de nombre del archivo. Uso URL Rewrite en IIS. A veces, el Isaip de Helicon reescribe.
Agregar nueva regla.
+ Name: lame-chrome-fix.
+ Pattern: styles/(/w+)_(/d+)
+ Rewrite URL: /{R:1}.css
Nota: reservo el uso de undercase para separar el nombre del número aleatorio. Podría ser cualquier otra cosa.
Ejemplo:
<link href="/styles/template_<%
Response.Write( System.DateTime.UtcNow.ToString("ddmmyyhhmmss")); %>"
type="text/css" />
(Carpeta sin estilos es solo un nombre que forma parte del patrón)
Código de salida como:
<link href="/styles/template_285316115328"
rel="stylesheet" type="text/css">
Redirigir como:
(R: 1 = plantilla)
/template.css
Solo la explicación es larga.
Usted está lidiando con el problema de la memoria caché del navegador.
Inhabilite la caché en la página misma. Eso no guardará el archivo de página de apoyo en el navegador / caché.
<meta http-equiv="cache-control" content="max-age=0" />
<meta http-equiv="cache-control" content="no-cache" />
<meta http-equiv="expires" content="0" />
<meta http-equiv="expires" content="Tue, 01 Jan 1990 12:00:00 GMT" />
Este código requiere / necesita insertar en la etiqueta principal de la página que está depurando, o en la etiqueta master page de su sitio
Esto no permitirá que el navegador guarde en caché el archivo, con el tiempo los archivos no se almacenarán en los archivos temporales del navegador, por lo que no habrá caché, por lo que no será necesario volver a cargar :)
Estoy seguro de que esto va a ser :)
[LEER LA ACTUALIZACIÓN A CONTINUACIÓN]
La forma más fácil que he encontrado es en la configuración de Chrome DevTools. Haga clic en el icono de engranaje (o 3 puntos verticales, en versiones más recientes) en la esquina superior derecha de DevTools para abrir el cuadro de diálogo "Configuración". Allí, marque la casilla: "Deshabilitar el caché (mientras DevTools está abierto)"
ACTUALIZACIÓN: ahora esta configuración se ha movido. Se puede encontrar en la pestaña "Red", es una casilla de verificación con la etiqueta "Desactivar caché".
Chrome/firefox/safari/IE volverá a cargar la página completa con estos accesos directos
Ctrl + R (OR) Ctrl + F5
Espero que te ayude !.
Ctrl + F5
Shift + F5
Ambos trabajan