Остановите Chrome, кэширующий мои файлы JS


136

Я внесу изменения в мои файлы JS, но в браузере это не изменится, мне придется каждый раз переименовывать файлы, чтобы они перезагружались. Есть ли какая-то команда .htaccess, которую я могу добавить или что-то, чтобы остановить кеширование?

Это даже кеширование моего html-страниц жесткого ядра. Мне нужно снова открыть весь браузер, чтобы увидеть изменения. Может ли быть проблема с сервером?


Вызывает ли включение заголовка ETag на вашем веб-сервере кеширование в Chrome, но правильно ли извлекает новую копию файла после его изменения?
Разработчик Вебс

Ответы:


200

Вы можете нажать значок настроек в правом верхнем углу ...| Больше инструментов | Инструменты разработчика | Сеть | Отключить кеш (пока открыт DevTools)

Для Windows это F12или в CTRL + SHIFT + Iто время как на Mac CMD + SHIFT + Iоткрывается DevTools.

Новый путь для обновления Chrome сентябрь 2018:

Нажмите значок настроек в правом верхнем углу ...| Настройки | Предпочтения | Инструменты разработчика | Сеть | Отключить кеш (пока открыт DevTools)


4
Крупный сбой в Chrome - кеширование ... даже когда страница помечена как No cache .... Ну, по крайней мере, это работает, пользователи могут страдать, но, по крайней мере, я могу развиваться
Роберт Ноак,

4
Обратите внимание, что «Настройки» больше не в правом нижнем углу! Нажмите на меню из трех точек в правом верхнем углу, чтобы перейти к настройкам.
yizzlez

4
Расположение: верхний правый угол | "..." | настройки | Предпочтения | Сеть | "Отключение кэш-памяти (в то время как Devtools открыта).
atom88

1
Это ОЧЕНЬ ПЛОХАЯ ПРАКТИКА !!! Нет, у вас не должно быть временного взлома для вашего использования .... у вас должно быть ПОСТОЯННОЕ решение для ВСЕХ ваших пользователей. Лучший способ - это случайная строка запроса в конце src. src = "someJs.js? someRandomStringCreatedByInlineJsOrServerRenderedCode", что сделало бы его так, чтобы у него всегда была свежая версия. хорошей случайной строкой было бы взять сегодняшнюю дату / время и добавить ее туда. вам, возможно, придется превратить его в строку, так как он, вероятно, будет объектом даты. Это действительно очень плохо, что это был выбранный ответ и проголосовал так сильно.

1
Начиная с Chrome 61.0.3163.100, кажется, что опция теперь находится в разделе Дополнительные инструменты / Условия сети. Опция «Инструменты разработчика» больше не существует.
Илья Куликов

61

Более быстрый способ сделать это - щелкнуть правой кнопкой мыши значок обновления рядом с адресной строкой и выбрать « Очистить кэш» и «Жесткая перезагрузка».

Просто убедитесь, что инструменты разработчика Chrome открыты. (Нажмите F12) Кстати ... Этот прием работает только в Chrome для Windows, Ubuntu и Mac OS


2
К вашему сведению, я пытался все это, и абсолютно ничего не получалось. На моей машине (с настройками по умолчанию для Mountain Lion) F12 показывает приборную панель.
Обри Гудман

2
как это намного лучше чем принятый ответ? Вы можете перезагрузить нормально с принятым ответом.
SSH это

нет, ты не можешь. по крайней мере, я не могу. ни один из ответов не сработал для меня, все еще выскакивая предупреждение, которое удалено в моем локальном файле js, но оно все еще находится в кэшированном файле js в chrome.
Бурак Каракуш

1
Работает для меня. Убедитесь, что инструменты разработки открыты, иначе щелчок правой кнопкой мыши не отобразит меню.
Venryx

Я вижу вариант, но в моем случае скрипт не обновлялся.
Илья Куликов


12

Нечто подобное script.js?a=[random Number]со случайным числом, сгенерированным PHP.

Вы пробовали expire = 0, прагму "no-cache" и "cache-control = NO-CACHE"? (Я не знаю, что они говорят о сценариях).


2
Я наткнулся на этот вопрос и пролистывал ответы. Это ужасная идея, потому что: 1) генерирование случайного числа при каждом запросе заставит браузеры перезагружать файл при каждом посещении. Вы хотите время сборки значения, так что браузеры только регенерировать значение при внесении изменений на сайт. Поскольку PHP интерпретируется во время выполнения, вам может потребоваться сделать это во время развертывания. и 2) генерирование случайного числа означает, что иногда (с вероятностью, увеличивающейся с течением времени), браузер создает некоторую случайную старую кэшированную копию. Если вы должны сделать это во время запроса, используйте отметку времени!
JakeRobb

Я делаю это и использую номер версии сборки с приличным таймаутом (1 день) для значения кэша заголовка
Worthy7

11

Несколько идей:

  1. Когда вы обновите свою страницу в Chrome, нажмите сочетание клавиш CTRL + F5, чтобы выполнить полное обновление.
  2. Даже если вы установите expires на 0, он все равно будет кэшироваться во время сеанса. Вам придется закрыть и снова открыть браузер.
  3. Убедитесь, что при сохранении файлов на сервере метки времени обновляются. Chrome сначала выдаст HEADкоманду вместо полного GET, чтобы узнать, нужно ли ему снова загружать полный файл, а сервер использует метку времени, чтобы увидеть.

Если вы хотите отключить кэширование на своем сервере, вы можете сделать что-то вроде:

Header set Expires "Thu, 19 Nov 1981 08:52:00 GM"
Header set Cache-Control "no-store, no-cache, must-revalidate, post-check=0, pre-check=0"
Header set Pragma "no-cache"

В .htaccess


Если бы это, но pre-check = 0, post-check = 0 - это дополнение, которое изменило меня.
TadLewis

7

Быстрые шаги:

1) Откройте панель инструментов разработчика, перейдя в меню Chrome -> Инструменты -> Инструменты разработчика

2) Нажмите на значок настроек с правой стороны (это винтик!)

3) Установите флажок «Отключить кэш (когда открыт DevTools)»

4) Теперь, когда панель инструментов включена, просто нажмите «Обновить», и JS не будет кэшироваться!


1
Тем не менее, это не помогает для отладки с помощью WebStorm. Тогда DevTools открыты. WebStrom не может подключить отладчик.
Александр Волков

5

Проблема в том, что Chrome должен быть must-revalidateв заголовке Cache-Control`, чтобы перепроверить файлы, чтобы увидеть, нужно ли их повторно выбирать.

Вы всегда можете SHIFT-F5 и принудительно обновить Chrome, но если вы хотите решить эту проблему на сервере, включите этот заголовок ответа:

Cache-Control: must-revalidate

Это говорит Chrome проверить с сервером и посмотреть, есть ли новый файл. Если есть более новый файл, он получит его в ответе. Если нет, он получит ответ 304 и гарантию того, что тот, что в кеше, обновлен.

Если вы НЕ установите этот заголовок, то в случае отсутствия каких-либо других настроек, которые делают файл недействительным, Chrome никогда не будет проверять сервер, чтобы узнать, есть ли более новая версия.

Вот запись в блоге, которая обсуждает проблему дальше.


1
Я думаю, что это должно быть Cache-Control: must-revalidateвместо Cache-Control: must-validate. Я не думаю, что последнее действительно.
Ласло Монда

3

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

<script type="text/javascript" src="/mine/myscript?20111205"></script>

2
Хотя это выглядит как гениальная практика, у вас могут возникнуть проблемы с некоторыми прокси, которые перестанут кэшироваться при обнаружении строки запроса: developers.google.com/speed/docs/best-practices/…
Франсуа Буржуа

2
Так что вы должны сделать вместо этого?
BlueSky

1
<Files *>
Header set Cache-Control: "no-cache, private, pre-check=0, post-check=0, max-age=0"
Header set Expires: 0
Header set Pragma: no-cache
</Files>

1

Я знаю, что это «старый» вопрос. Но головные боли при кешировании никогда не бывают. После кучи проб и ошибок я обнаружил, что один из наших провайдеров веб-хостинга через CPanel получил это приложение под названием Cachewall. Я просто нажал на Включить режим разработки и ... вуаля !!! Это сразу же остановило страдавшую боль :) Надеюсь, это поможет кому-то еще ... R


0

Я получал тот же файл css при просмотре веб-сайта (на сервере хостинговой компании с реальным доменом), и мне не удалось получить обновленную версию на Chrome. Мне удалось получить обновленную версию файла, когда я просматривал его в Firefox. Ни один из этих ответов не работал для меня. У меня также есть файлы веб-сайта на моей машине, и я просматриваю сайт с помощью localhost, используя мой локальный сервер apache. Я выключил свой сервер apache и смог получить обновленный файл. Каким-то образом мой локальный сервер Apache связывался с Chrome-кешем. Надеюсь, это кому-то поможет, так как мне было очень трудно это исправить.


0
  1. Открытые инструменты разработчика

    • Либо F12
    • Или ...-> More Tools->Developer Tools
  2. щелчок Empty Cache and Hard Reload

    • Либо щелкните правой кнопкой мыши значок обновления (просто слева от адресной строки URL)
    • Или щелкните левой кнопкой мыши значок обновления и удерживайте его в течение 1 секунды.

0

Вместо этого вы можете открыть окно инкогнито. Переключение на окно инкогнито работало для меня, когда отключение кэша в обычном окне Chrome все еще не перезагружало файл JavaScript, который я изменил со времени последнего кэша.

https://www.quora.com/Does-incognito-mode-on-Chrome-use-the-cache-that-was-previously-stored

Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.