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


151

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.


44
f12 -> Red -> botón derecho -> caché del navegador clara (no me gusta, así que utilizo Firefox con Firebug)
thkang

Acabo de intentar eso también. No parece funcionar.
duyn9uyen

¿Intentaste actualizarlo después de todos los clics y clics serviles?
thkang

Si. También hice un cambio en mi archivo .aspx. Recogió el cambio y los cambios en línea de CSS, simplemente no los cambios en el archivo .css.
duyn9uyen

en la misma pestaña de red, es posible que vea la entrada de su .cssarchivo: no conozco asp, así que no puedo estar seguro, pero en el código de estado de las entradas en caché de mi servidor de desarrollo python frasco es 304, mientras que los archivos descargados tienen 200 Verifique su código de estado y solicite tiempo para ver si es un problema del lado del servidor.
thkang

Respuestas:


148

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


17
simplemente no use esto en producción o perderá las capacidades de almacenamiento en caché de su CSS. Lo que es algo bueno.
Bart Calixto

3
¿Qué sucede si está utilizando una aplicación de una sola página y necesita decirle a la aplicación que vuelva a cargar el CSS porque la versión ha cambiado?
Nathan C. Tresch el

10
@ NathanC.Tresch cambia la versión cuando la versión cambia en lugar de hacer una secuencia aleatoria / de tiempo que cambia cada vez. El mejor enfoque será usar la suma de comprobación del archivo css en sí.
Bart Calixto

¿Puedes aclarar esta respuesta para principiantes? ¿Cómo exactamente "agregaría una cadena de consulta aleatoria"? Los principiantes también quieren poder ver cambios en su trabajo, y la mayoría de nosotros no tenemos idea de lo que esto significa o cómo buscar una respuesta.
Randy

@randy Di un ejemplo usando php en el que representa la marca de tiempo actual como un parámetro de consulta. Puede investigar cómo hacer algo similar utilizando cualquier idioma que tenga en el backend. También puede hacerlo a través de un paso de compilación gruñido / trago, si lo tiene a su disposición.
anson

207

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.


26
Y aquí estaba presionando CTRL + F5 como loco ... Gracias.
Alix Axel


3
@ duyn9uyen Buen punto! Parece que están cambiando el comportamiento nuevamente. Esto se agrega a la versión de Windows Chrome, aún no disponible en Mac.
Bart Calixto

44
Ctrl + R también funciona en Firefox. Gracias por liberarme de Random Url y otras cosas.
Zeeshanef

30
CTRL + R no funciona para mí, pero CTRL + SHIFT + R lo hace
Paul Slocum

139

[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é". ingrese la descripción de la imagen aquí


15
Esta es la mejor solución en mi humilde opinión: no tiene que perder el tiempo con su propio código para proporcionar un valor aleatorio a su URL CSS.
Guillaume

2
Excelente respuesta! ... Funcionó como un encanto!
Ani

1
También encontré que esta es la mejor solución.
Joe Huang

3
Esto se ha movido en versiones más recientes de Chrome: vaya a la pestaña Red y marque "Deshabilitar caché" en el encabezado.
Jason Clemens

Los métodos Ctrl + Shift + R y Shift + F5 no funcionan para mí, adivinando que algo cambió en Chrome recientemente. Este método aún funciona muy bien. @JasonClemens: la opción "Desactivar caché" se encuentra tanto en la pestaña Red como en la Configuración.
Amos M. Carpenter

11

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á :)


1
Esta debería ser la respuesta aceptada. La solución de @anson no funcionó, para mí.
Pierrick Martellière

8

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.


6

Presione SHIFT+ F5.

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


Gracias. A pesar de que ctrl-r es la respuesta popular en este hilo, solo shift-f5 funcionó para mí (Chromium 55).
user2662680

5

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


4

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.


3

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


3

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é

ingrese la descripción de la imagen aquí


2

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.


2

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: ingrese la descripción de la imagen aquí

1

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


1

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);

1

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>

1

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.


0

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.


0

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.


0

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!



0

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.



-1

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


Esta respuesta no tiene nada que ver con Visual Studio ni con el navegador Chrome. Además, esta pregunta se hizo hace 4 años y ya tenía una solución aceptada. Intente evitar que las preguntas "suban" a la parte superior proporcionándoles respuestas, a menos que la pregunta no se haya marcado como resuelta o haya encontrado una solución nueva y mejorada para el problema. Consulte la documentación sobre cómo escribir excelentes respuestas para obtener algunos consejos sobre cómo hacer que sus respuestas cuenten :)
Obsidian Age

Hola obsidiana Mis disculpas. Es la primera vez que publico aquí. Busqué por mucho tiempo una solución a este problema. La respuesta aceptada no funcionó para mí. Cuando encontré una solución (a través de mi propia investigación), quise "pagarla" ayudando a cualquier otra persona que se encuentre con este problema, incluso si tiene cuatro años. No estoy seguro de por qué mi acción aquí justificaría una palmada en la muñeca, ya que me parece legítimo. Sin embargo, me aseguraré de tener cuidado en el futuro (de verdad, no lo digo de manera sarcástica). Gracias Don.
Don
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.