Отключение кеша Chrome для разработки сайтов

1607

Я изменяю внешний вид сайта (CSS-модификации), но не вижу результата в Chrome из-за раздражающего постоянного кэша. Я пытался Shift+ обновить, но это не работает.

Как я могу временно отключить кеш или обновить страницу так, чтобы я мог видеть изменения?

tomermes
источник
185
Это, наверное, самая страшная ошибка Chrome. Я потратил слишком много времени на размышления о том, почему все идет не так, только чтобы обнаружить, что, несмотря на полную перезагрузку с помощью ^ F5, он использует устаревший час ресурс.
Гленн Мейнард
45
Браузеры должны кешироваться. Помните, что ваши пользователи также будут кешировать, и поэтому могут не видеть изменений, которые вы вносите после запуска сайта. Чтобы избежать этого, нужно создать версию ваших файлов. my_css.css? версия = something_unique. Если браузер не видел версию раньше, он загружает файл снова. Что-то может быть, например, последней измененной датой.
user984003
34
@ user984003 Ctrl+Shift+Rили Shift+Rнужно очистить кеш ...
Адонис К. Какоулидис
19
@ user984003 Нет, если я скажу им не кэшировать. Да, номер версии с очисткой кеша отлично подходит для финальной версии, так как это то, что используют пользователи, но когда я создаю новый сайт и хочу видеть постепенные изменения, я не изменяю номер версии каждый раз , Поэтому я и разрабатываю с Firefox - у него самые надежные опции отключения кэша!
Andrewb
11
@ user984003 да, браузеры должны кэшироваться ... при просмотре. При разработке вам нужно больше контролировать это.
ahnbizcad

Ответы:

1976

Chrome DevTools может отключить кэш.

  1. Щелкните правой кнопкой мыши и выберите, Inspect Elementчтобы открыть DevTools. Или используйте одно из следующих сочетаний клавиш :
    • F12
    • Command+ Option+ iна Mac
    • Control+ Shift+ iв Windows или Linux
  2. Нажмите Network на панели инструментов, чтобы открыть панель сети.
  3. Проверьте на Disable cacheфлажок в верхней части.

снимок экрана панели инструментов разработки

Имейте в виду, что, как говорится в твите от @ChromiumDev , этот параметр активен только при открытых devtools .

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

Если вы не хотите использовать Disable cacheфлажок, длительное нажатие на кнопку обновления с Devtools открытым появится меню с опциями Hard Reloadили Empty Cache and Hard Reloadкоторые должны иметь такой же эффект. Читайте о разнице между вариантами . Доступны следующие ярлыки:

  • Command+ Option+ Rна Mac
  • Control+ Shift+ Rв Windows или Linux

долгое нажатие

Стив
источник
255
По моему опыту, этот параметр (и все параметры на этой панели) вступают в силу только тогда, когда инструменты разработчика открыты.
Иоганн
28
@ Стив Это не работает для меня. Я не получаю никаких изменений, хотя у меня Chrome 19.0.1084.52, и я установил флажок, чтобы отключить кэширование. Я пытался с открытой панелью разработчика. Я пытался с этим закрыто. Я даже попытался перезагрузить браузер, а затем перезагрузить компьютер. Кажется, он продолжает давать мне кешированную версию страницы. Что мне делать? Chrome вызывал у меня подобные проблемы, поэтому я удалил все, что связано с Google, с моего компьютера, а затем снова установил Chrome. Это исправило большинство вещей, таких как «вкладка истории загрузки навсегда». Я думаю, это все еще не работает.
Tgwizman
11
Я обнаружил, что это не работает при обновлении текущей страницы после изменения настроек. Только когда я ушел, а потом вернулся, он начал работать.
Мэтт Гибсон
3
... или вы можете просто отладить в режиме инкогнито! (который не кэширует никаких файлов)
Kwame
5
эта настройка - самая большая ложь в истории веб-разработки. перезагрузил мой компьютер, и chrome все еще показывает неправильные результаты, в то время как Firefox отображает последние css :(
Claudiu Creanga
247

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

Очистка кэша слишком раздражает, когда необходимо очищать кэш 30 раз в час ... поэтому я установил расширение Chrome под названием Classic Cache Killer, которое очищает кэш при каждой загрузке страницы.

Ссылка на Chrome Store (бесплатно) (теперь без вредоносных программ!)

Теперь мой макет json, javascript, css, html и data обновляется каждый раз при каждой загрузке страницы .

Мне никогда не придется беспокоиться, если мне нужно очистить кэш.

Я нашел около 20 очистителей кеша для Chrome, но этот казался легким и без усилий. В обновлении Cache Killer теперь может оставаться «всегда включенным».

Примечание: я не знаю автора плагина. Я просто нашел это полезным.

Дано
источник
4
Да, опция Chrome Dev Tools не работает для меня. Но кеш-убийца работает как шарм. Время перезагрузки значительно медленнее, например, в 4-5 раз, но фактическая подача нового контента, очевидно, намного быстрее.
Брайс Джонсон
2
Clear Cache и Disable Cache работают только при работе на localhost, на моем Mac. Для онлайн-контента я обновляюсь и обновляюсь в надежде увидеть какие-либо изменения. Это расширение является спасателем.
Sbpro
2
Я обнаружил, что использование Disable Cache вызывает проблемы с локальным хранилищем, особенно angular-storage с Auth0. Cache Killer работает отлично и не вызывает проблем с локальным хранилищем.
Trevorc
5
Удалено из магазина расширений Chrome из-за вредоносного ПО :( Альтернативы?
Семен Выскубов,
3
Закончил писать свой, работает так же, но может переключаться на вкладку. Лицензия MIT и никаких вредоносных программ, я обещаю 😎! github.com/themichaelyang/cache-clearer
Майкл Ян
199

Изображение меню перезагрузки

  1. Поднимите консоль разработчика Chrome, нажав F12и затем (с открытой консолью):

  2. Щелкните правой кнопкой мыши (или удерживайте нажатой левую кнопку) на кнопке перезагрузки в верхней части браузера и выберите «Очистить кэш и полная перезагрузка».

Это будет выходить за пределы «Жесткой перезагрузки», чтобы полностью очистить кэш, гарантируя, что все, что загружено с помощью JavaScript и т. Д., Также будет избегать использования кеша. Вам не нужно возиться с настройками или чем-то еще, это быстрое решение с одним выстрелом.

JackArbiter
источник
7
ну, это определенно не работает на Mac, хотя, я нажал эту кнопку перезагрузки с различными комбинациями клавиш;)
MJB
1
что такое Hard reload?
ManirajSS
@ManirajSS: он перезагрузит все и не будет использовать кеш, но не будет повторно загружать вещи, загруженные javascript после загрузки страницы. Я не уверен, почему кто-либо когда-либо использовал бы это, но я предполагаю, что Вы могли бы придумать несколько угловых случаев, где это было бы полезно.
JackArbiter
2
Также он не очистит кэш для фреймов внутри страницы.
Пабло Мешер
7
Не уверен, как долго это было правдой, но начиная с Chrome 41, нажмите и удерживайте кнопку перезагрузки, работающую в OS X, при условии, что у вас открыто окно инструментов разработчика.
Тим Китинг
47

Есть еще два варианта отключить кэширование страниц в Chrome для хорошего :

1. Отключить Chrome Cache в реестре

Открыть реестр (Пуск -> Команда -> Regedit)

Ищи: HKEY_CLASSES_ROOT\ChromeHTML\shell\open\command

Измените деталь после ... chrom.exe "на это значение: –disable-application-cache –media-cache-size=1 –disk-cache-size=1 — "%1"

Пример: "C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" -disable-application-cache –media-cache-size=1 –disk-cache-size=1 — "%1"

ВАЖНЫЙ:

  • есть пробел и дефис после ... chrome.exe "

  • оставьте путь к chrome.exe как есть

  • Если вы копируете строку, обязательно проверьте, являются ли кавычки фактическими кавычками.

2. Отключите кэш Chrome, изменив свойства ярлыка

Щелкните правой кнопкой мыши значок Chrome и выберите «Свойства» в контекстном меню. Добавьте следующее значение в путь: –disk-cache-size=1

Пример: "C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" –disk-cache-size=1

ВАЖНЫЙ:

  • есть пробел и дефис после ... chrome.exe "

  • оставьте путь к chrome.exe как есть

danielson317
источник
1
используйте теги кода, чтобы сделать ваш ответ более читабельным. Я думаю, что это может быть одним из лучших ответов.
ThorSummoner
3
Хороший ответ. Хотя для большинства людей отключение кэша - это временная вещь во время разработки. Его постоянное отключение значительно замедлит работу в обычном режиме и является плохим гражданством в Интернете, поскольку создает ненужную нагрузку на веб-серверы, которые вы посещаете.
danielson317
3
Я не согласен с плохой интернет-гражданственностью, мы говорим здесь о создании ярлыка для работы разработчиков. Так что это определенно лучший ответ ИМХО. Просто маленькая вещь. Каждый раз, когда я копирую это в Windows с этой SO-страницы в какой-нибудь ярлык Chrome, некоторые символы не отображаются правильно. Это правильные: "C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --disable-application-cache --media-cache-size=1 --disk-cache-size=1Кроме того, что такое символ прямо перед "%1"? Это я не знаю.
peter.petrov
32

Если вы не хотите редактировать настройки Chrome, вы можете использовать режим инкогнито для тех же результатов.

Карл Моррисон
источник
22

В дополнение к параметру отключения кэша (доступ к которому можно получить с помощью кнопки в правом нижнем углу окна инструментов разработчика - Инструменты | Инструменты разработчика или Ctrl+ Shift+ I), на сетевой панели инструментов разработчика теперь можно щелкнуть правой кнопкой мыши. и выберите «Очистить кэш» из всплывающего меню.

Тим Китинг
источник
22
  1. F12 открыть Chrome DevTools
  2. F1 открыть настройки DevTools
  3. Установите флажок Отключить кэш (пока открыт DevTools), как показано ниже:

Это в настоящее время на вкладке Preferences, которая по умолчанию. Возможно, вам придется прокрутить вниз. Этот флажок был перемещен по крайней мере пару раз, так как этот вопрос был задан. Последний раз я проверял, это было в средней колонке внизу. Если он открыт на более тонком экране и в разделе «Установки» есть 2 столбца, он может находиться справа вверху. Не стесняйтесь обновлять этот пост, если он изменится или прокомментируйте, и я обновлю пост.

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

Тони Л.
источник
2
Это делает то же самое, что и проверка «Отключить кэш» непосредственно в F12 Chrome Devtools, и он будет сброшен при перезапуске Chrome.
Богдан Вербенец
18

Вместо нажатия "F5" просто нажмите:

"Ctrl + F5"

Арванд
источник
6
Это также работает в Firefox (не потому, что это актуально для этого вопроса, но кто-то может найти его полезным)
Дональд Дак
17

В Канарском канале (и, возможно, последует канал dev и stable), это можно найти в качестве второго общего параметра слева в разделе «Общие».

Отключить кэш в Chrome Canary Channel

Кроме того, всегда есть возможность переключиться в режим инкогнито с помощью Ctrl + Shift + N. Даже если это, к сожалению, также завершает ваш сеанс.

борец
источник
4
По моему опыту, это работает только при открытых инструментах разработчика. Я был озадачен, почему кеш все еще держался на страницах, пока не понял, что закрыл инструменты разработки. Странно, что настройка не отменяет все.
Мбокил
Режим инкогнито, к сожалению, кеширует некоторые изображения и файлы.
GobSmack
16

Использование Ctrl+ Shift+ Rдля обновления было хорошим , но не получило все , что нужно. некоторые вещи не обновляются, такие как данные, хранящиеся в js и css. нашел решение: панель инструментов Google для веб-разработчиков Chrome . После установки панели инструментов выберите параметры и «сброс страницы».

tomermes
источник
2
+1. Тем не менее, все еще не идеально: для разработки на локальном компьютере кеш совершенно не нужен и будет создавать проблемы, поэтому мне все равно будет интересна функция отключения, как у firebug.
c089
15

Чтобы быть понятным, флажок отключить кэш в Chrome (v17 здесь, но с v15 я считаю) не в пользовательском интерфейсе основных настроек. Это в пользовательском интерфейсе настроек инструментов разработчика.

  1. В меню значков гаечного ключа окна браузера (меню prefs) выберите «Инструменты» → «Инструменты разработчика».

  2. В появившемся пользовательском интерфейсе инструментов разработчика щелкните значок шестеренки внизу справа.

  3. Установите флажок «Отключить кэш» в разделе «Сеть».

каменщик
источник
14

Отключить кеш в Chrome работает только при открытых инструментах разработчика

jamiethepiper
источник
может быть, это ошибка или, может быть, она предназначена только для разработчиков - хотя я и подумал, что не разработчики хотели бы также использовать параметр отключения кэша ¯ \ _ (ツ) _ / ¯
jamiethepiper
14

Пока ошибка не устранена, вы можете использовать плагин Clear Cache Chrome, а также установить для него комбинацию клавиш.

После установки щелкните правой кнопкой мыши и перейдите к параметрам:

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

Проверьте Automatically reload active tab after clearing data:

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

Выберите Everythingдля периода времени:

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

И тогда вы можете перейти в Меню => Инструменты => Расширения:

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

Нажмите на сочетание клавиш внизу:

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

И установите сочетание клавиш, например Ctrl+ Shift+ R:

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

Разван Флавий Панда
источник
9

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

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

Вы можете отключить кэш в UNIX с помощью --disk-cache-dir = / dev / null.

Поскольку это происходит неожиданно, возможны сбои, но если они произойдут, это явно укажет на более серьезную ошибку, которая должна быть исправлена ​​в любом случае.

Кевин Чедвик
источник
8

Это может помочь кому-то.

Я установил свой Nginx для сумасшедшего кеширования. Таким образом, отключение кеша в сетевых инструментах и ​​явная очистка кеша не работают.

Очень простой, но скучный обходной путь, я просто открываю новую вкладку Incognito. Удивительно, но все время работает!

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

KhoPhi
источник
6

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

javascript:(function(){var idx = location.href.indexOf('?');var d = new Date();var str = location.href.substr(0,idx) + '?version=' + d.getTime();location.href=str; void 0;})();
mbokil
источник
5

Меня просто поймали, но не обязательно из-за Chrome.

Я использую JQuery для выполнения запросов AJAX. У меня был атрибут кеша установлен в true в запросе:

   $.ajax({
        type: 'GET',
        cache: true,
        ....

Установка значения false исправила мою проблему, но это не идеально.

Я понятия не имею, где хранятся эти данные, но я знаю, что Chrome никогда не попадает на сервер для запроса.

DynamicDan
источник
5

Теперь есть лучший и быстрый способ (версия Chrome 59.xx):

Щелкните правой кнопкой мыши значок перезагрузки (слева от поля url), и вы получите раскрывающееся меню, выберите третий вариант: «Очистить кэш и выполнить полную перезагрузку».

Эта опция доступна только тогда, когда инструменты разработчика открыты. (Обратите внимание на разницу с вариантом 2: «Жесткая перезагрузка» -cmd-shift-R). Здесь нет кеша!

Luftwaffle
источник
3

В интернет-магазине Chrome доступно расширение Chrome под названием Clear Cache .

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

Очень очень хорошо!

Вы также можете определить сочетание клавиш для этого в настройках!

Еще один способ - запустить окно Chrome в режиме инкогнито. Здесь кеш также должен быть полностью отключен.

Крис
источник
Не могу найти опцию, чтобы определить, на каком домене это делает. Не очень хорошо выглядит. Как насчет chrome.google.com/webstore/detail/cache-killer/… ..?
nkkollaw
перейдите к значку clearcache в браузере, щелкните правой кнопкой мыши, параметры, а затем под куки. Там есть маленький значок настроек.
Крис
2

Еще один вариант отключения кэша предоставлен моим третьим инспектором размера страницы Chrome, который отключает кэш точно так же, как это делает Devtools.

Кроме того, расширение быстро и удобно сообщает о размере страницы, использовании кэша, сетевых запросах и времени загрузки веб-страницы. Плюс его открытый исходный код на Github .

Снимок экрана - инспектор размера страницы

Томи Микельссон
источник
2

Не уверен, что вы используете, но если вы используете ASP.Net, вы можете сделать следующее, что работает как шарм:

<link href="@Url.Content("~/Content/Site.css")?time=@DateTime.Now" rel="stylesheet" />

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

штейн
источник
абсолютно. Я использовал эту условную компиляцию, поэтому она не появляется в тестовой и выпускной сборках.
Си МакSharpface
Еще лучше использовать время модификации CSS-файлов в качестве значения переменной. Это решение может быть использовано и в производственной среде. Это просто работает :) Не уверен, как это делается в ASP, но в PHP что-то вроде этого <link href = "style.css? Time = <? Php echo fileminfo ('style.css');?>" Rel = "stylesheet" >
Оливер Маннер
2

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

  • Control Shift R,
  • Отключить кеш в F12
  • Управление F5.

Затем я обнаружил, что использование манифеста .appcache для сайтов без https не рекомендуется . Я удалил свой файл site.appcache и его ссылку в теге html, и теперь я вижу последнюю версию каждой страницы!

Оле Э.Х. Дюфур
источник
2

Если вы используете ServiceWorkers (например, для прогрессивных веб-приложений), вам, вероятно, потребуется проверить «Обновление при перезагрузке» в разделе «Приложения»> «Работники сервиса» в инструментах разработчика.

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

боб
источник
1

Начиная с версии 50 (если я правильно помню), опция «Отключить кеш» была удалена из настроек Devtool. Перейдите на вкладку «Сеть» и там есть опция «Отключить кеш».

boi_echos
источник
0

Эй, если ваш сайт использует PHP, поместите следующий небольшой фрагмент PHP в начале вашей HTML-страницы:

   //dev versioning - stop caching
   $rand = rand(1, 99999999);

Теперь везде, где вы загружаете ресурсы, такие как CSS- или JS-файлы, в сценарий или элемент ссылки, вы добавляете сгенерированное случайное значение к URL-адресу запроса после добавления '?' на URI через PHP:

    echo $rand;

Это оно! Там не будет браузер, который кэширует ваш сайт больше - независимо от того, какой тип.

Конечно, удалите ваш код перед публикацией или просто установите $ rand в пустую строку, чтобы снова разрешить кэширование.

Торстен Бартел
источник
0

Я использовал другие опции, описанные выше, но я считаю, что лучше всего добавить следующий параметр при запуске chrome.exe.

"C: \ Program Files (x86) \ Google \ Chrome \ Application \ chrome.exe" --disk-cache-size = 1 -media-cache = 1

Я считаю, что отключение медиа-кеша - хорошая идея, но для полноты картины.

На самом деле я хочу, чтобы опция полностью отключала кеш, чтобы использовать память для ввода-вывода вместо моего диска (что также увеличило бы время загрузки в 10 раз!), Но я не думаю, что chrome или какой-либо браузер в этом отношении имеет такую ​​возможность ,

Ahmed
источник
0

Как я могу временно отключить кеш или обновить страницу так, чтобы я мог видеть изменения?

Непонятно, на какой «кеш» вы ссылаетесь. Есть несколько различных методов, которые браузер может постоянно кэшировать. Веб-хранилище - одно из них, Cache-Controlдругое.

Некоторые браузеры также Cacheиспользуют, совместно с сервисными рабочими , для создания Progressive Web Apps (PWA), обеспечивающих автономную поддержку.

Очистить кеш для PWA

self.caches.keys().then(keys => { keys.forEach(key => console.log(key)) })

чтобы вывести список ключей кеша, запустите:

self.caches.delete('my-site-cache')

удалить ключ кеша по имени (т.е. my-site-cache). Затем обновите страницу.

Если после обновления вы видите какие-либо связанные с работником ошибки в консоли, вам также может понадобиться отменить регистрацию зарегистрированных работников:

navigator.serviceWorker.getRegistrations()
  .then(registrations => {
    registrations.forEach(registration => {
      registration.unregister()
    }) 
  })
Джош Хабдас
источник
0

Убийца кэша Chrome - безусловно лучший вариант. Поскольку URL-адрес магазина для установки кэша-убийцы недоступен, вы можете скачать файл CRX здесь:

https://www.crx4chrome.com/extensions/jpfbieopdmepaolggioebjmedmclkbap/

Как только файл расширения будет загружен, откройте Chrome -> Другие инструменты -> Расширения, затем перетащите файл CRX из проводника или с рабочего стола (в зависимости от места, где вы загрузили файл) в окно Chrome, чтобы установить расширение.

BernieSF
источник
0

Я использую (в Windows) Ctrl + Shift + Delete, и когда появляется диалоговое окно Chrome, нажмите клавишу ввода. Это можно настроить с тем, что необходимо очищать каждый раз, когда вы выполняете эту последовательность. Не нужно иметь dev. инструменты открываются в этом случае.

Сантон
источник
0

Я был в ситуации, когда браузер загружал данные кеша с диска, даже когда я проверял отключенный кеш (я использовал Chrome). Все мои CSS и JS загружались с сервера, но не с веб-страницы. Это происходило как на моем местном, так и на Производственном.

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

Я использовал ASP.Net, так что вот мой пример:

//Controller function
public ActionResult Index()
    {
        return View();
    }
//Link
@Html.Action("Index", "Home", new { ts = DateTime.Now.Ticks.ToString()})

В результате будет сгенерирована ссылка, например: http://www.myweb.com/Home/Index?ts=636558555408282209

Это моя ситуация и решение. Надеюсь, это может кому-нибудь помочь.

Jansen
источник