¿Por qué el servidor ignora los cambios en los archivos de código aunque la memoria caché esté deshabilitada?

14

Pruebo un código html / js en mi localhost (Windows 7, Chrome v79.0.3945.130 (64 bits)) y aproximadamente el 50% de los cambios de código de tiempo no se reflejan en el navegador (lo veo con Dev Tools / Sources )
Hay un montón de consejos en Internet, pero ninguno parece funcionar:

Haga clic derecho en la recarga y elija "Vaciar caché y recarga dura" - no ayuda en el 30% de los casos.
Desactivar el caché en la pestaña Red de las Herramientas de desarrollo de Chrome, no ayuda.
Agregue <meta http-equiv="Cache-control" content="no-cache">el encabezado, no ayuda.
Reemplazar <script src="common.js"></script>por <script src="common.js?blabla"></script>: ayuda en el 60% de los casos, pero debe hacerlo después de cada cambio es una tarea enorme. Además, no funciona con cambios html.
Copie un archivo a un nuevo archivo (como index.html a index2.html) y reemplace el nombre del archivo en el código; siempre funciona, pero es una tarea aún más grande.

Exactamente el mismo problema presente cuando confirmo el código en github.io

Ayúdenme a hacerlo para que el sitio refleje los cambios en el código de inmediato.

Editar: he creado un archivo index3.html y puse solo "hola mundo" allí. Abrió el archivo en el navegador. Cambiado a "hola mundo2": el navegador actualizó el contenido. Cambiado a "hello world3": el navegador seguía mostrando "hello world2" incluso después de varias recargas y "Vaciar caché y recarga dura". Cambié a "hola mundo4", el navegador aún mostraba "hola mundo2". En 4 horas cambié a "hola mundo5", el navegador aún muestra "hola mundo2". Este archivo lo edité con el bloc de notas básico.

Edit2: La gente sigue preguntando qué servidor estoy usando. Esto parece parte del problema. Desafortunadamente, no sé y tampoco sé exactamente qué debo hacer para verificarlo. Aquí está todo lo que he descubierto hasta ahora:

Tengo un inetpub/wwwrootdirectorio donde pongo los archivos html & js y luego abro index.html en un navegador en http://localhost/.
El panel Mi red en Devs Tools tiene este aspecto: enlace de imagen .
La configuración del servidor fue muy rápida y no requirió ningún software adicional para instalar. Es decir, no estoy usando node.js.
Hay iisstart.htm en inetpub/wwwrooty cuando lo abro http://localhost/iisstart.htmdice IIS7.

— klm123
fuente

A veces encuentro que deshabilitar el caché en las herramientas de desarrollo de Chrome + actualizar + habilitar el caché de nuevo + actualizar a veces soluciona el problema. Podría valer la pena ...

— Nick Parsons

2

¿Qué tipo de servidor estás usando?

— Jhecht

@Jhecht, ¿cómo lo reviso?

— klm123

1

Por lo que veo en las respuestas, probablemente lo solucionará con un parámetro. Y eso probablemente funcionará. Sin embargo, normalmente esto no debería ser necesario cuando deshabilita el caché en las herramientas de desarrollo de Chrome. Entonces mi presentimiento sería que hay otro caché involucrado. Entre usted y el servidor podría haber cualquier cantidad de tecnología de almacenamiento en caché adicional. Algunos ejemplos: almacenamiento en caché del lado del servidor (por ejemplo, barniz), almacenamiento en caché de CDN (por ejemplo, Cloudflare), servidores proxy locales del enrutador / cortafuegos (por ejemplo, caché de calamar) y cosas similares. Yo también buscaría esos.

— Jey DWork

1

@ klm123 sin saber de qué servidor web se trata, es imposible decirle cómo cambiar o verificar la configuración de caché. Si no tiene idea de su servidor web, una forma posible de verificarlo es en la pestaña de red de devTools: revise los encabezados de respuesta de los cargados index.htmlpara algo como un encabezado X-Powered-Byo Serverque pueda dar una pista sobre el servidor web. Buscar en Google su ruta de archivo inetpub/wwwrootapunta fuertemente a un servidor IIS.

— acran

6

¡Usar un parámetro es la forma correcta! Aquí puede agregar un número de versión que solo cambia en grandes cambios manualmente y para la depuración puede establecerlo en Date.time () para que en su etiqueta <head>, esto obligue a sobrescribir todas las versiones en caché ya que el parámetro siempre es nuevo uno:

< script type="text/javascript"> 
    var script = document.createElement('script'); 
    var version = Date.time();
    script.src = "common.js?v="+version; 
    document.head.appendChild(script) 
< /script>

¡Espero que esto ayude!

— lehm.ro
fuente

Supongo que puedo hacerlo. ¿Pero no es efectivamente lo mismo que mi cuarta opción? agregar "? blabla" después del nombre del archivo. No funciona con bastante frecuencia: es el mismo nombre de archivo en la pestaña Fuentes o se agrega blabla, pero el contenido del archivo sigue siendo el mismo.

— klm123

No es lo mismo. Una vez que se usa un parámetro dos veces (lo que nunca sucederá con Date.time (), puede generar una versión en caché.? Blabla es el mismo después de usarlo dos veces que no usarlo en absoluto.

— lehm.ro

El parámetro no se usa dos veces. Edito el código, luego cambio el parámetro, luego verifico el código fuente en el navegador y es el antiguo.

— klm123

¿Has probado mi enfoque?

— lehm.ro

Su enfoque ayuda, gracias. Pero no resuelve mi problema. Lo que escribiste no es cierto en mi situación. "obliga a que todas las versiones en caché se sobrescriban ya que el parámetro siempre es nuevo", cambiar el parámetro a uno nuevo no obliga a que mi caché se vuelva a cargar de manera confiable. Además, no puede ayudar con los cambios en index.html.

— klm123

3

En el servidor IIS7 de Windows que se ejecuta en Windows 7, para evitar el almacenamiento en caché de su contenido, debe realizar algunos cambios en uno de sus archivos de configuración llamado web.config. Los archivos de configuración para IIS 7 y posteriores se encuentran en %WinDir%\System32\Inetsrv\Config folderdonde %WinDir%está la carpeta donde instaló Windows (generalmente C:/Windows).

Cree una copia de seguridad de su web.configarchivo antes de editarlo para que pueda revertirlo si los cambios que realice en el archivo lo rompen.

En su web.configarchivo, simplemente agregue lo siguiente para evitar el almacenamiento en caché de su index.html:

<?xml version="1.0" encoding="UTF-8"?>
<configuration>

  <location path="index.html">
    <system.webServer>
      <httpProtocol>
        <customHeaders>
          <add name="Cache-Control" value="no-cache" />
        </customHeaders>
      </httpProtocol>
    </system.webServer>
  </location>

</configuration>

Obtuve la ruta del web.configarchivo desde aquí: Windows Doc: Referencia de configuración

Obtuve la configuración para el caché anterior desde aquí: ¿Cómo deshabilitar el almacenamiento en caché del archivo HTML de la aplicación de una sola página servido a través de IIS?

— AndrewL64
fuente

No hay web.config en la ruta mencionada. Lo creé y puse tu código allí. Pero tuve que reemplazar index.html por una ruta completa como projectName/index.html, que copio de url en mi navegador http:/localhost/projectName/index.html. Resultado: sin efecto en el problema de almacenamiento en caché.

— klm123

@ kim123 ¿Puede intentar agregar el web.configarchivo en la carpeta raíz de su sitio (carpeta donde se encuentra su sitio) y cambiar la ruta de nuevo a solo index.htmly ver si eso funciona.

— AndrewL64

yo hice. No ayuda.

— klm123

1

Tuve el mismo problema y esta es mi lista de verificación:

Verifique web.config (caché y caché de clientes, política de caché del núcleo, etc.) o .htaccess (conjunto de encabezado Cache-Control).
Si usó lenguajes dinámicos como ASP, PHP, puede haber una configuración de caché interna. ¡En un caso encontré <%Response.Expires=1440%>muchas líneas de código ASP y estaba superando todas las demás configuraciones! En php session_cache_expiremay hace lo mismo.
Si está utilizando IIS, verifique el servidor > Encabezados de respuesta HTTP para asegurarse de que no hay nada sobre el almacenamiento en caché, también lo mismo para los sitios web individuales enumerados bajo el nombre del servidor.
verifique los http-equiv="Cache-control"encabezados html (¡pasó esta prueba!).

Finalmente, tengo que decir que en todas las situaciones anteriores, marcar Deshabilitar caché en la pestaña de red nueva en la consola de Chrome siempre funcionó para mí para ver una versión nueva de las páginas, sin embargo, esto es bueno solo para fines de depuración y los visitantes no lo harán.

— Ali Sheikhpour
fuente

1. ¿Dónde encuentro web.config y .htaccess? 2. Solo uso html y js. 3. Los encabezados de respuesta HTTP se ven así: imgur.com/leYpdej

— klm123

Si está utilizando IIS, web.congfig está en la raíz de wwwroot. Además, hay un archivo Machine.config en el nivel del servidor que puede modificar desde la consola IIS directamente desde aquí: stackoverflow.com/questions/2325473/where-is-machine-config . Si está utilizando el servidor Apache en Windows, busque Windows para encontrar .htaccess @ klm123

— Ali Sheikhpour

0

En el caso específico con el uso de Google Chrome, intente esto: Abra Dev Tools -> Ir a la pestaña 'Red'. Marque la casilla de verificación 'Desactivar caché', luego actualice la página.

NOTA: Para que esto funcione cada vez que la ventana de Dev Tools DEBE permanecer abierta en todo momento.

Sin embargo, para propagar los cambios a sus usuarios, sin tener que actualizar la página, etc., debe agregar versiones de archivo al final de cada archivo referenciado para los archivos que cambian con frecuencia (tal como lo señaló). Por ejemplo:

<link rel="stylesheet" type="text/css" href="https://cdn.sstatic.net/Sites/stackoverflow/primary.css?v=20b379f72a37" >

El v=20b379f72a37anexo al final es un hash de archivo generado automáticamente del contenido del archivo.

— Martin Shishkov
fuente

Ese es el elemento 2 en mi lista.

— klm123

¿Te estás asegurando de que la ventana Dev Tools permanezca abierta?

— Martin Shishkov

la ventana de herramientas de desarrollo está abierta, la casilla de verificación está marcada [pero generalmente miro la pestaña de fuentes] e incluso hago una actualización completa.

— klm123

0

Esta es una posibilidad remota, pero ¿qué tipo de editor / IDE está utilizando? Además, ¿qué tipo de ediciones está haciendo en su index.html?

¿Podría proporcionar algunos ejemplos de tales ediciones que no se reflejan cuando guarda e intenta cargar el archivo?

Me gustaría intentar reproducir tu problema. Por lo que la gente sugiere, no parece que el problema esté dentro del código mismo. Sospecho que es un problema ambiental, pero necesitaría más información de usted para confirmar mis sospechas.

— foreza
fuente

Yo uso el código de Microsoft Visual Studio. Ejemplo: reemplace <script src = "common.js"> </script> por <script src = "common.js? Blabla">. Ejemplo 2: agregue un nuevo botón, agregue un nuevo div, agregue la llamada a la función de carga. Por cierto, parece cualquier tipo de ediciones.

— klm123

Vea las ediciones al final de mi publicación de preguntas.

— klm123

0

Lo que escribe en HTML meta es una recomendación para los navegadores, no una instrucción estricta. Si el almacenamiento en caché estricto está habilitado en el navegador, esto no ayudará.

Las soluciones se describen bien: https://curtistimson.co.uk/post/front-end-dev/what-is-cache-busting/

Prefiero en el lado del servidor agregar a los scripts la versión con la fecha de la última actualización del archivo en sí.

<script src="/myScript.js?v=1579780745150"></script>

Donde 1579780745150 es Unix Timestamp actualiza el archivo myScript.js . Funciona solo con sus propios archivos, pero no son necesarios los externos. Lo más frecuente en el nombre del archivo es la versión.

— Aleksandr Smityukh
fuente

Si necesita el código de backend. Dime qué plataforma usaste.

— Aleksandr Smityukh

0

Esto probablemente sea realmente frustrante, y no parece que estés haciendo algo mal.

El problema es probable que algo entre su navegador y el archivo de secuencia de comandos que está llamando haga un poco de caché.

Para determinar qué es, déjame preguntarte cómo estás navegando hacia la url localhost.

Ejemplos:

file://path/to/file.html
http://localhost/file.html
http://127.0.0.1/file.html
http://[machine's-hostname]/file.html
http://[custom-domain-defined-in-hosts-file]/file.html

Si está ejecutando file://path/to/file.htmlesto significa que no está navegando a través de un servidor web / proxy. Si es http://[something]/file.htmlasí, está ejecutando algún tipo de servidor web y ese es probablemente el culpable. Busque algún tipo de configuración donde pueda desactivar el almacenamiento en caché.

Si no está utilizando un servidor web y literalmente está navegando directamente a un archivo html local sin un servidor web, entonces sugeriría que el navegador sea el culpable. Si este es el caso, sugeriría desactivar el almacenamiento en caché del navegador como sugirió Martin Shishkov .

— Dean Householder
fuente

que es http://localhost/ProjectName/index.htmldonde este entorno en el que puede desactivar el almacenamiento en caché puede ser?

— klm123

Parece que, desde la captura de pantalla que publicó en otro lugar, está utilizando IIS (también llamado Servicios de información de Internet de Microsoft). Una solución rápida es hacer doble clic en su archivo .html para cargarlo en el navegador, que utilizará un file://path/to/projectName/index.html. Eso eliminará el servidor web de la ecuación. Para continuar usando IIS y simplemente arreglar el caché, consulte este artículo: support.microsoft.com/en-us/help/247404/…

— Dean Householder

0

Chrome hace esto cuando, si el archivo no ha cambiado demasiado, no está seguro de lo que significa, utilizará la versión de caché "compilada". Para html significa árbol don analizado. Para código precompilado JS, etc.

Por lo general, hay formas de abordar esto, muchos marcos usan hash dentro de los nombres de archivo, como: main.md5hash.jsporque cambiar el nombre del archivo invalida cualquier caché.

Entonces te quedará posiblemente con html sin actualizar. Y para ser claros, no estoy seguro, siempre puedes agregar comentarios con una nota aleatoria ... como una fecha.

— Akxe
fuente

0

Según las actualizaciones de su respuesta, diría que su problema es causado por IIS v7 que utiliza la memoria de su PC para almacenar en caché, no su disco duro local, por eso Hard reloady todos los demás métodos parecen no funcionar correctamente.

Podría pensar en 3 soluciones:

1. Arreglando su problema de caché IIS: (No probado debido al hecho de que no tengo una PC con IIS)

En el menú Inicio , haga clic en Herramientas administrativas y luego haga clic en Administrador de Internet Information Services (IIS). (ver Imágenes )
En la vista de árbol en el lado izquierdo , encuentre su aplicación.
Seleccione el elemento del menú Caché de salida .
Haga clic en Agregar regla de caché y luego escriba los archivos extensionque desea deshabilitar en caché .aspx, es decir , .css, .js, etc. (¿uno en el momento, supongo?)
Ahora, puede Desmarcar el almacenamiento en caché en modo usuario o Verificar para evitar todo el almacenamiento en caché. Debería ser similar a esto:

Fuente de la solución : lea más sobre IIS 7 Cache

2. Uso de algunas alternativas a IIS Hay bastantes, pero recomendaría (según mi experiencia) WAMP o XAMPP Ambos le brindarán un mejor "entorno" de desarrollo y ambos son compatibles con Windows 7. Además, si está familiarizado con VS Code , solo puede usar la extensión Live Server .

3. Use el modo de incógnito de Chrome mientras desarrolla. (No estoy seguro si funciona para IIS7)

— awran5
fuente

Agregar regla de caché / Prevenir todo el almacenamiento en caché: no ayuda [probado con html]. Modo incógnito: no ayuda.

— klm123

¿Has probado con .jsarchivos? Depende de los cambios que realice.

— awran5