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

Question

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

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

Answer 1

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

Answer 2

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

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

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

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

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

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

Answer 3

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

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

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

Answer 4

Есть еще два варианта отключить кэширование страниц в 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 как есть

Answer 5

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

Answer 6

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

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

Answer 7

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

Answer 8

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

"Ctrl + F5"

Answer 9

В Канарском канале (и, возможно, последуют Dev и стабильный канал), это можно найти в качестве второго общего параметра слева в разделе "Общие".

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

Answer 10

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

Answer 11

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

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

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

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

Answer 12

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

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

http://j.mp/15ZdA6f

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

http://j.mp/15ZdGLh

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

http://j.mp/15ZdPy7

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

http://j.mp/15ZehfX

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

http://j.mp/15Zepft

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

http://j.mp/15Zev6M

Answer 13

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

Answer 14

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

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

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

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

Answer 15

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

Вкладка сети с отключенным кешем

Вы можете видеть, что все ресурсы (я отфильтровал ресурсы JS) были получены из сети и не загружены из кеша диска / памяти.

Отключить кеш не выбран

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

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

Ограничения

1. Вы должны оставить DevTools Open и Disable Cache Selected
2. Когда вы отключаете кеш, он отключается для всех ресурсов на этой вкладке. Это замедляет работу и неэффективно, если вы хотите отключить кеш только для 1-2 ресурсов.

Использование расширения Requestly Chrome для отключения кеша для определенных ресурсов (JS/CSS/Images и т. Д.)

Недавно я наткнулся на https://medium.com/weekly-webtips/how-to-disable-caching-of-particular-js-css-file-84a93d005172, который помог мне понять, как можно отключить кеш для определенных ресурсов.

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

       URL Contains mywebsite.com/myresource.js
Add param cb rq_rand(4)

rq_rand(4) заменяется 4-значным случайным числом при выполнении запроса.

Правило параметра запроса запроса для добавления случайного параметра

После добавления правила файлы JS / CSS не кешируются

Здесь вы можете видеть, что "Отключить кэш" не выбрано, и все же ресурсы не загружаются из кеша из-за случайного параметра (cb - Читать как Cache buster) в URL-адресе.

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

Как получить Правило

Вот ссылка, по которой вы можете просмотреть и загрузить правило, если вы установили Requestly - https://app.requestly.io/rules/#sharedList/1600501411585-disable-cache-stackru

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

Answer 16

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

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

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

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

Answer 17

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

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

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

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

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

Answer 18

Как насчет букмарклета, который меняет имя страницы, чтобы предотвратить кеширование страницы. В 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;})();

Answer 19

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

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

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

Answer 20

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

Answer 21

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

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

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

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

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

Answer 22

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

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

Answer 23

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

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

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

Answer 24

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

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

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

Answer 25

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

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

Некоторые браузеры также имеют Cache используется совместно с Service Workers для создания 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()
    }) 
  })

Answer 26

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

Answer 27

Я сделал расширение Chrome, которое отключает кеш браузера для определенных веб-сайтов.

Посмотрите — это называется . Вот как это выглядит в действии:

С его помощью вы сможете сразу увидеть свои изменения , не полагаясь на случайное нажатие Ctrl+обновить.

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

Cache DisablerЭто открытый исходный кодCache Disabler, , любые отзывы приветствуются!

Answer 28

Проблема с "надоедливым" кешем вообще кроется во фреймворке :). Посмотрим подробности. Большинство фреймворков использует в .htaccess (os equivalnent) derective, перенаправляя все запросы на "index" фреймворков,

НО это в то же время ИСКЛЮЧИТЬ файлы и каталоги, запрошенные приложением напрямую.

(например, типичные директивы для .htaccess:

          RewriteCond %{REQUEST_FILENAME} !-d
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-l
    RewriteRule ^(.+)$ index.php?url=$1 [QSA,L]

)

Таким образом, ВСЕ файлы .js, .css как графические не обрабатываются "индексом" фреймворка.

И эти файлы обычно чаще всего изменяются во время разработки.

Поэтому директиву управления кешем нельзя помещать в "индекс" фреймворка.

Он должен быть помещен в .htaccess.

Fe для использования в процессе разработки:

        Header set Cache-Control "no-store, no-cache, must-revalidate"
  Header set Pragma "no-cache"

(Или для последовательных рабочих версий используйте директиву «Etag» - подробнее см. В справке HTTP. Обратите внимание, что ETag не предназначен для разработки.

В .htaccess нет прямого способа сгенерировать случайное число (или быстро меняющуюся последовательность, такую ​​как дата UTC) для использования в ETag, потому что, как я упоминал ранее, это не то, для чего это предусмотрено).

Надеюсь, это поможет и сэкономит время.

Answer 29

Я был в ситуации, когда браузер загружал данные кеша с диска, даже когда я проверял отключенный кеш (я использовал 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

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

Answer 30

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

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

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

    echo $rand;

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

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