¿Cómo forzar al navegador Chrome a recargar el archivo .css mientras se depura en Visual Studio?

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, la actualización de la página no se cargará con el cambio actualizado en mi archivo .css. Creo que el archivo .css todavía está en caché.

Yo he tratado:

1. CTRL / F5
2. En Visual Studio 2012, vaya a las propiedades del proyecto, pestaña Web Elija Iniciar programa externo en la sección Iniciar acción Pegar o busque la ruta de Google Chrome (el mío es C: \ Users \ xxx \ AppData \ Local \ Google \ Chrome \ Application \ chrome.exe) En el cuadro Argumentos de la línea de comando pon -incognito
3. Utilizó las herramientas de desarrollador de Chrome, haga clic en el icono "engranaje", marcó "Desactivar caché".

Parece que nada funciona a menos que pare manualmente la depuración (cierre Chrome), reinicie la aplicación (en depuración).

¿Hay alguna forma de obligar a Chrome a recargar siempre todos los cambios de CSS y recargar el archivo .css?

Actualización:
1. Los cambios de estilo en línea en mi archivo .aspx se recogen cuando actualizo. Pero los cambios en un archivo .css no. 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, el archivo .css se vuelve a cargar y el código de estado (en la pestaña de red) es 200.

Hay soluciones mucho más complicadas, pero una muy fácil y simple es simplemente agregar una cadena de consulta aleatoria a su CSS incluido.

Como src="/css/styles.css?v={random number/string}"

Si está utilizando php u otro lenguaje del lado del servidor, puede hacerlo automáticamente con time(). Entonces seríastyles.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 los propósitos de prueba este método es superior (IMO).

Para forzar a Chrome a cargar css y js:

Windows opción 1: CTRL+ SHIFT+ R
Windows opción 2: SHIFT+F5

OS X: ⌘+ SHIFT+R

Actualizado según lo indicado por @PaulSlocum en los comentarios (y muchos confirmados)

Respuesta original:

Chrome cambió de comportamiento. Ctrl+ Rlo hará.

En OS X: ⌘+R

Si tiene problemas para volver a cargar archivos css / js, abra el inspector ( CTRL+ SHIFT+ C) antes de realizar la recarga.

[LEA 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: "Desactivar 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 etiquetada "Deshabilitar caché".

Estás lidiando con el problema de la memoria caché del navegador.

Deshabilita el caché en la página misma. Eso no guardará el archivo de soporte de la página 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 que necesita / necesita insertar en la headetiqueta de la página que está depurando, o en la headetiqueta master pagede su sitio

Esto no permitirá que el navegador guarde en caché el archivo, eventualmente los archivos no se almacenarán en los archivos temporales del navegador, por lo que no hay memoria caché, por lo que no será necesario recargar :)

Estoy seguro de que esto hará :)

En mi caso, en la configuración de Chrome DevTools, simplemente establecer "Deshabilitar caché (mientras DevTools está abierto)" no funciona, debe marcar "Habilitar mapas fuente CSS" y "Recargar automáticamente CSS generado", que se enumeran en la fuente grupo, para hacer que este problema de caché desaparezca.

Presione SHIFT+ F5.

Me está funcionando con la versión 54 de Chrome.

¡Me había enfrentado al mismo problema aquí! pero estoy seguro, mi resolución es mejor que todos los ejemplos anteriores, solo haz esto,

1. Abra la consola del desarrollador de Chrome presionando F12
2. Haga clic derecho en el botón de recarga en la parte superior del navegador y seleccione "Vaciar caché y recargar duro".

Eso es todo!

Con macOS puedo forzar a Chrome a recargar el archivo CSS haciendo

⌘+ SHIFT+R

Encontré esta respuesta enterrada en los comentarios aquí, pero merecía más exposición.

La versión actual de Chrome (55.x) no recarga todos los recursos cuando vuelve a cargar 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 el 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 + Mayús + R

Estoy usando la versión 81.0.416.64 de Edge (compilación oficial) (64 bits) y está basada en el proyecto de código abierto Chromium.

Presione F12para acceder a Dev Tools.
Haga clic en la ficha de red
Verificar deshabilitar caché

Sé que es una pregunta antigua, pero si alguien todavía está buscando cómo volver a cargar un solo archivo css / js externo, la forma más fácil ahora en Chrome es:

1. Vaya a la pestaña Red en DevTools
2. Haga clic derecho en el recurso y seleccione Replay XHR para repetir la solicitud.

Asegúrese de que la opción Deshabilitar caché esté seleccionada para forzar la recarga.

Para macOS Chrome:

1. Herramientas para desarrolladores abiertos cmd+ alt+i
2. Haga clic en tres puntos en la esquina superior derecha en las herramientas para desarrolladores
3. Haga clic en configuración
4. Desplácese hacia abajo para Network
5. Habilitar Disable cache (while DevTools is open)ver captura de pantalla:

¿Por qué es necesario actualizar toda la página? Simplemente actualice solo 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 hacerlo, debe instalar la extensión CSS Reloader . La versión de Firefox también está disponible.

Puede copiar y pegar este script en la consola de Chrome y obliga a que sus scripts CSS se recarguen 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);

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>

Sigue siendo un problema.

El uso de parámetros como "..css? Something = random-value" no cambia nada en mi experiencia de atención al cliente. Solo los cambios de nombre funcionan.

Otra versión del cambio de nombre del archivo. Yo uso URL Rewrite en IIS. A veces, la reescritura de Isapi de Helicon.

Añadir nueva regla.

+ Name: lame-chrome-fix.
+ Pattern: styles/(\w+)_(\d+)
+ Rewrite URL: /{R:1}.css

Nota: me reservo el uso de undercase para separar el nombre del número aleatorio. Podría ser cualquier otra cosa.

Ejemplo:

<link href="https://stackoverflow.com/styles/template_<% 
Response.Write( System.DateTime.UtcNow.ToString("ddmmyyhhmmss")); %>" 
type="text/css" />

(Sin carpeta de estilos es solo una parte del nombre 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.

Acabo de tener este problema donde 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.

Si está utilizando Sublime Text 3, el uso de un sistema de compilación para abrir el archivo abre la versión más reciente y proporciona una forma conveniente de cargarlo a través de [CTRL + B] Para configurar un sistema de compilación que abra el archivo en Chrome:

1. Ir a 'Herramientas'

2. Pase el mouse sobre 'sistema de compilación'. Al final de la lista que aparece, haga clic en 'Nuevo sistema de compilación ...'

3. En el nuevo archivo de 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 comillas sea la ruta a donde se encuentra Chrome en su computadora, si no es así, simplemente busque la ubicación de Chrome y reemplace la ruta en el primer conjunto de citas con la ruta a Chrome en tu computadora.

La forma más sencilla de lograr su objetivo es abrir una nueva ventana de incógnito en su Chrome o ventana privada en Firefox que, de forma predeterminada, no se almacenará en caché.

Puede usar esto con fines de desarrollo para no tener que inyectar un código de prevención de caché aleatorio en su proyecto.

Si estás usando IE, ¡que Dios te ayude!

Ctrl + F5

Shift + F5

Ambos trabajan

La forma 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.

Chrome/firefox/safari/IE recargará toda la página con estos atajos

Ctrl+ R (OR) Ctrl+F5

Espero que te ayude!

Si está utilizando SiteGround como su empresa de alojamiento y ninguna de las otras soluciones ha funcionado, intente esto:

Desde el cPanel, vaya a "HERRAMIENTAS DE MEJORA DEL SITIO" y haga clic en "SuperCacher". En la página siguiente, haga clic en el botón "Vaciar caché".