Почему сервер игнорирует изменения в файлах кода, даже если кеш отключен?

14

Я тестирую html / js-код на своем локальном хосте (Windows 7, Chrome v79.0.3945.130 (64-битная версия)), и около 50% изменений временного кода не отражаются в браузере (я вижу это с помощью Dev Tools / Sources ).
В интернете есть масса советов, но ни один из них не работает:

  • Щелкните правой кнопкой мыши по перезагрузке и выберите «Очистить кэш и полная перезагрузка» - не помогает в 30% случаев.
  • Отключить кэш на вкладке Сеть в Chrome Dev Tools - не помогает.
  • Добавить <meta http-equiv="Cache-control" content="no-cache">в шапку - не помогает.
  • Заменить <script src="common.js"></script>на <script src="common.js?blabla"></script>- помогает в 60% случаев, но вам нужно делать это после каждого изменения - огромной рутины. Кроме того, он не работает с изменениями HTML.
  • Скопируйте файл в новый файл (например, index.html to index2.html) и замените имя файла в коде - всегда работает, но это еще большая работа.

Точно такая же проблема присутствует, когда я фиксирую код в github.io

Пожалуйста, помогите мне сделать так, чтобы сайт немедленно отражал изменения кода.


Изменить: я создал файл index3.html и поместил туда только "Привет мир". Открыл файл в браузере. Изменено на «hello world2» - браузер обновил контент. Изменено на «hello world3» - браузер по-прежнему отображал «hello world2» даже после нескольких перезагрузок и «Пустого кэша и полной перезагрузки». Я изменил на "привет мир4" - браузер все еще показывал "привет мир2". В течение 4 часов я сменил на «hello world5» - браузер по-прежнему показывает «hello world2». Этот файл я редактировал с помощью основного блокнота.


Edit2: Люди продолжают спрашивать, какой сервер я использую. Это выглядит как часть проблемы. К сожалению, я не знаю и не знаю, что именно мне нужно сделать, чтобы проверить это. Вот все, что я узнал до сих пор:

  • У меня есть inetpub/wwwrootкаталог, куда я помещаю html & js файлы, а затем открываю index.html в браузере по адресу http://localhost/.
  • Моя сетевая панель в Devs Tools выглядит следующим образом: ссылка на изображение .
  • Настройка сервера была очень быстрой и не требовала никакого дополнительного программного обеспечения для установки. Т.е. я не использую node.js.
  • Там есть iisstart.htm, inetpub/wwwrootи когда я http://localhost/iisstart.htmего открываю, там написано IIS7.
klm123
источник
Я иногда нахожу отключение кеша в chrome dev tools + обновление + включение кеша снова + обновление иногда исправляет проблему? Может быть стоит выстрел ...
Ник Парсонс
2
какой тип сервера вы используете?
Джехт
@Jhecht как мне это проверить?
klm123
1
Из того, что я вижу в ответах, вы, вероятно, будете обходить это параметром. И это, вероятно, будет работать. Тем не менее, обычно это не требуется, если вы отключаете кеш в инструментах Chrome Dev. Так что я догадывался, что здесь задействован еще один кеш. Между вами и сервером может быть любое количество дополнительных технологий кеширования. Несколько примеров: кэширование на стороне сервера (например, Varnish), кэширование CDN (например, Cloudflare), локальные прокси от маршрутизаторов / брандмауэров (например, squid-cache) и подобные вещи. Я бы тоже проверил.
Джи DWork
1
@ klm123, не зная, о каком веб-сервере идет речь, невозможно сказать, как изменить или проверить конфигурацию кэша для него. Если у вас нет представления о вашем веб-сервере, один из возможных способов проверить это - на вкладке «Сеть» devTools: проверить заголовки ответа загруженного файла index.htmlна что-то вроде заголовка X-Powered-Byили, Serverкоторый может дать подсказку на веб-сервере. Поиск в Google по пути inetpub/wwwrootк файлу сильно указывает на сервер IIS.
acran

Ответы:

6

Использование параметра - правильный путь! Здесь вы можете добавить номер версии, который вы изменяете только при больших изменениях вручную, и для отладки вы можете установить его в Date.time (), поэтому в вашем теге <head> это заставляет все кэшированные версии перезаписываться, так как параметр всегда новый один:

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

Надеюсь это поможет!

lehm.ro
источник
Я думаю, я могу сделать это. Но разве это не то же самое, что мой четвертый вариант? добавить «? blabla» после имени файла. Это не работает довольно часто - это либо одно и то же имя файла на вкладке «Источники», либо добавляется blabla, но содержимое файла остается тем же.
klm123
Это не тоже самое. После того, как параметр используется дважды (что никогда не случится с Date.time (), он может отобразить кэшированную версию. Blabla остается такой же после того, как дважды его использовать, а не вообще)
lehm.ro
Параметр не используется дважды. Я редактирую код, затем изменяю параметр, затем проверяю исходный код в браузере, и он старый.
klm123
Вы пробовали мой подход?
lehm.ro
Ваш подход помогает, спасибо. Но это не решает мою проблему. То, что вы написали, не соответствует действительности в моей ситуации. «вынуждает перезаписывать все кэшированные версии, поскольку параметр всегда является новым», изменение параметра на новое не приводит к надежной перезагрузке моего кэша. Также это не может помочь с изменениями в index.html.
klm123
3

На сервере Windows IIS7, работающем под управлением Windows 7, чтобы предотвратить кэширование вашего содержимого, необходимо внести некоторые изменения в один из ваших файлов конфигурации, который называется web.config. Файлы конфигурации для IIS 7 и более поздних версий находятся %WinDir%\System32\Inetsrv\Config folderтам, где%WinDir% находится папка , в которой установлена Windows (обычно C:/Windows).

Создайте резервную копию вашего web.config файла перед редактированием, чтобы вы могли выполнить откат к нему, если изменения, внесенные в файл, повредят его.

В вашем web.configфайле просто добавьте следующее, чтобы предотвратить кеширование вашего 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>

Получил путь к web.configфайлу отсюда: Windows Doc: Справочник по настройке

Получил конфигурацию для кеша выше отсюда: Как отключить кеширование одностраничного HTML-файла приложения, обслуживаемого через IIS?

AndrewL64
источник
По указанному пути нет файла web.config. Я создал его и поместил ваш код там. Но мне пришлось заменить index.html на полный путь projectName/index.html, который я скопировал из URL в своем браузере http:/localhost/projectName/index.html. Результат - не влияет на проблему кеширования.
klm123
@ kim123 Можете ли вы попробовать добавить web.configфайл в корневую папку вашего сайта (папку, в которой находится ваш сайт) и изменить путь обратно на just index.htmlи посмотреть, работает ли он.
AndrewL64
я сделал. это не помогает
klm123
1

У меня была такая же проблема, и это мой контрольный список:

  1. Проверьте web.config (кеширование и кеш клиента, политика кеша ядра и т. Д.) Или .htaccess (заголовочный набор Cache-Control).
  2. Если вы используете динамические языки, такие как ASP, PHP, возможно, существует внутренняя настройка кэша. В одном случае я нашел <%Response.Expires=1440%>во многих строках ASP-код, и он преодолевал все остальные настройки! В phpsession_cache_expire может сделать то же самое.
  3. Если вы используете IIS, проверьте сервер > заголовки HTTP-ответа, чтобы убедиться, что в кэшировании нет ничего одинакового для отдельных веб-сайтов, перечисленных под именем сервера.
  4. проверьте http-equiv="Cache-control"заголовки html (вы прошли этот тест!).

Наконец, я должен сказать, что во всех вышеперечисленных ситуациях проверка отключения кэша на вкладке newtwork в консоли Chrome всегда позволяла мне просматривать свежую версию страниц, однако это полезно только для целей отладки, и посетители этого не делают!

Али Шейхпур
источник
1. Где я могу найти web.config и .htaccess? 2. Я использую только html и js. 3. Заголовки HTTP-ответов выглядят так: imgur.com/leYpdej
klm123
Если вы используете IIS, web.congfig находится в корне от wwwroot. Также есть файл Machine.config на уровне сервера, который вы можете изменить из консоли IIS прямо здесь: stackoverflow.com/questions/2325473/where-is-machine-config . Если вы используете сервер apache для Windows, пожалуйста, найдите Windows .htaccess @ klm123
Али Шейхпур
0

В конкретном случае с использованием Google Chrome попробуйте следующее: Откройте Инструменты разработчика -> Перейдите на вкладку «Сеть». Установите флажок «Отключить кэш», после чего обновите страницу.

ПРИМЕЧАНИЕ: для того, чтобы это работало каждый раз, окно Dev Tools ДОЛЖНО всегда оставаться открытым.

введите описание изображения здесь

Однако для того, чтобы распространять изменения среди своих пользователей без необходимости их жесткого обновления страницы и т. Д., Необходимо добавлять версии файлов в конце каждого ссылочного файла для файлов, которые часто изменяются (как вы указали). Например:

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

v=20b379f72a37 конце добавляется автоматически сгенерированный файловый хэш содержимого файла.

Мартин Шишков
источник
Это пункт 2 в моем списке.
klm123
Вы уверены, что окно Dev Tools остается открытым?
Мартин Шишков
окно инструментов разработки открыто, флажок установлен [но я обычно смотрю на вкладку источников], и я даже делаю жесткое обновление.
klm123
0

Это длинный путь - но какой редактор / IDE вы используете? Кроме того, какие изменения вы вносите в ваш index.html?

Не могли бы вы привести примеры таких правок, которые не отображаются при сохранении и попытке загрузить файл?

Я хотел бы попытаться воспроизвести вашу проблему. Из того, что люди предлагают, не похоже, что проблема в самом коде. Я подозреваю, что это экологическая проблема, но мне нужно больше информации от вас, чтобы подтвердить мои подозрения.

foreza
источник
Я использую код Microsoft Visual Studio. Пример: замените <script src = "common.js"> </ script> на <script src = "common.js? Blabla">. Пример 2: добавить новую кнопку, добавить новый div, добавить вызов функции onload. Это похоже на любые правки.
klm123
Смотрите правки в конце моего поста с вопросом.
klm123
0

То, что вы пишете в HTML мета, является рекомендацией для браузеров, а не строгой инструкцией. Если в браузере включено строгое кэширование, это не поможет.

Решения хорошо описаны: https://curtistimson.co.uk/post/front-end-dev/what-is-cache-busting/

Я предпочитаю на стороне сервера добавлять в скрипты версию с датой последнего обновления самого файла.

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

Где 1579780745150 - Unix Timestamp обновляет сам файл myScript.js . Работает только со своими файлами, но внешние не нужны. Чаще всего в названии файла указывается версия.

Александр Смитюх
источник
Если вам нужен код бэкэнда. Скажи мне, какую платформу ты использовал.
Александр Смитюх
0

Это, вероятно, действительно расстраивает, и не похоже, что вы делаете что-то не так.

Возможно, проблема в том, что что-то между вашим браузером и файлом сценария, который вы вызываете, выполняет некоторое кэширование.

Чтобы определить, что это, позвольте мне спросить, как вы просматриваете локальный URL-адрес?

Примеры:

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

Если вы работаете, file://path/to/file.htmlэто означает, что вы не просматриваете веб-сервер / прокси. Если это так, http://[something]/file.htmlто вы используете какой-то веб-сервер, и это, вероятно, виновник. Ищите какие-то настройки, где вы можете отключить кеширование.

Если вы не используете веб-сервер и буквально просматриваете локальный html-файл без веб-сервера, то я бы предположил, что виновником является браузер. Если это так, я бы предложил отключить кеширование в браузере, как предложил Мартин Шишков .

Декан домохозяин
источник
это http://localhost/ProjectName/index.htmlгде этот параметр , где вы можете отключить кэширование может быть?
klm123
Похоже на скриншот, который вы опубликовали в другом месте, вы используете IIS (также называемый Microsoft Internet Information Services). Быстрое решение состоит в том, чтобы просто дважды щелкнуть ваш HTML-файл, чтобы загрузить его в браузер, который будет использовать file://path/to/projectName/index.html. Это удалит веб-сервер из уравнения. Чтобы продолжить использование IIS и просто исправить кэш, обратитесь к этой статье: support.microsoft.com/en-us/help/247404/…
Декан Домохозяин
0

Chrome делает это, когда файл не слишком сильно изменился, не зная, что это значит, он будет использовать «скомпилированную» версию кэша. Для html это означает разобранный дон. Для предварительно скомпилированного кода JS и т. Д.

Обычно есть способы решения этой проблемы, многие фреймворки используют хеш внутри имен файлов, например:, main.md5hash.jsпотому что изменение имени файла делает недействительным любой кеш.

Тогда вы останетесь с HTML, возможно, не обновляется. И чтобы быть ясным, я не уверен, вы всегда можете добавить комментарий со случайным блобом ... как свидание.

Akxe
источник
0

Основываясь на обновлениях вашего ответа, я бы сказал, что ваша проблема вызвана тем, что IIS v7 использует вашу память ПК для кэширования, а не локального жесткого диска, поэтому Hard reloadи все остальные методы, похоже, не работают должным образом.

Я мог бы придумать 3 решения:

1. Исправление проблемы с кешем IIS: (не проверено из-за того, что у меня нет компьютера с IIS)

  1. В меню « Пуск» выберите « Администрирование» , а затем - « Диспетчер служб IIS». (см. изображения )
  2. В дереве зрения на левой стороне , найти приложение.
  3. Выберите пункт меню « Кэширование вывода» .
  4. Нажмите « Добавить правило кэширования», затем введите файлы extension, для которых вы хотите отключить кеширование, т. .aspxЕ. .Css, .js и т. Д.
  5. Теперь вы можете отменить выбор кэширования в пользовательском режиме или установить флажок, чтобы предотвратить все кэширование. Это должно выглядеть примерно так:

введите описание изображения здесь

Источник решения - узнайте больше о IIS 7 Cache


2. Использование некоторых альтернатив IIS Существует немало, но я бы порекомендовал (исходя из моего опыта) WAMP или XAMPP. Оба предоставят вам лучшую «среду разработки» и оба будут поддерживать Windows 7. Кроме того, если вы знакомы с VS Code вы можете просто использовать расширение Live Server .


3. Используйте режим Chrome Incognito во время разработки. (Не уверен, что это работает для IIS7)

awran5
источник
Добавить правило кэширования / предотвратить все кэширование - не помогает [пробовал с html]. Режим инкогнито - не помогает.
klm123
Вы пробовали с .jsфайлами? это зависит от того, какие изменения вы делаете.
awran5