Как отключить кеш браузера

Обновлено: 17.12.2024

В последнее время я совместно с Software Niagara провожу еженедельное мероприятие под довольно многословным названием "Сделай что-нибудь во благо". Давая небольшой обзор HTML, его происхождения и того, как он связан с CSS и JavaScript, я немного запутался, отвечая на вопросы о том, что я делал с Chrome DevTools. С этой целью я думаю, что сделаю небольшую серию статей о том, что вы можете сделать с помощью инструментов разработчика в Chrome.

Кэширование: хорошее, плохое и неприятное

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

Для тех, кто не знаком с кэшированием в браузере, вот краткое описание того, как оно работает. Браузер делает запрос на сервер и получает некоторые данные. Возможно, эти данные представляют собой HTML, таблицу стилей, какой-то javascript или изображение. Сервер может пометить ответ заголовком управления кешем, который, по сути, представляет собой некоторые метаданные о том, как долго эта информация действительна. Затем, когда веб-страница снова использует содержимое по тому же URL-адресу, браузер проверяет локальную копию, смотрит на дату истечения срока ее действия, и, если срок ее действия не истек, просто использует эту локальную копию и больше не запрашивает данные у сервера. .

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

Так в чем же проблема? Во время разработки содержимое, которое обычно не меняется от запроса к запросу, например файлы JavaScript и CSS, быстро меняется. Это мешает настройкам кэширования браузера по умолчанию. Как правило, вы увидите, как это выглядит как момент, когда вы думаете: «Какого черта? Я думал, что изменил это!» Затем, когда вы обновляете окно браузера во второй раз, оно ведет себя так, как ожидалось. Однако изменить настройки кэширования с сервера сложно, и вы хотите оставить кэширование включенным в рабочей среде, чтобы получить его преимущества. Итак, как мы можем избежать перенастройки наших веб-серверов только для разработки? Отключив кеширование в браузере. Вот как…

Сетевая панель Chrome

В Chrome откройте инструменты разработчика. Найдите его в разделе «Меню» > «Дополнительные инструменты» > «Инструменты разработчика». Для ярлыков используйте Cmd + Opt + I на Mac или F12 на Windows.

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

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

Меню разработки Safari

Если вы еще не включили меню «Разработка» в Safari, при открытом Safari используйте меню, чтобы перейти в «Safari» > «Настройки…». В окне настроек выберите вкладку «Дополнительно». Внизу есть флажок, чтобы включить меню «Разработка».

Чтобы отключить кэширование в Safari, выберите пункт меню в разделе «Разработка» > «Отключить кэширование».

Параметры панели инструментов Firefox

Откройте инструменты разработчика, нажав Cmd + Alt + I на Mac или Ctrl + Alt + Shift + I в Windows.

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

В разделе Дополнительные настройки выберите Отключить кэш (при открытом наборе инструментов). Подобно Chrome, Firefox отключает кеширование только тогда, когда открыты инструменты разработчика, так что это ничего не изменит для вашего обычного просмотра.

Решенные проблемы с кэшированием

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

Николай Беринг

Николас Беринг — разработчик программного обеспечения-самоучка.В настоящее время он работает в MedStack, разделяя свое время между облачной инфраструктурой, операциями и разработкой приложений.

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

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

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

Браузеры должны кешировать. Помните, что ваши пользователи также будут кэшироваться, поэтому они могут не увидеть изменений, внесенных вами после того, как ваш сайт будет запущен в работу. Чтобы избежать этого, используйте версии ваших файлов. my_css.css?версия=что-то_уникальное. Если браузер ранее не видел эту версию, он снова загружает файл. something_unique может, например, быть датой последнего изменения.

@user984003 Нет, если я скажу им не кэшировать. Да, номер версии с очисткой кеша отлично подходит для окончательного выпуска, поскольку именно его используют пользователи, но когда я создаю новый сайт и хочу видеть постепенные изменения по ходу работы, я не меняю номер версии каждый раз. . Вот почему я разрабатываю с помощью Firefox — у него самые надежные возможности отключения кеша!

@user984003 да, браузеры должны кэшировать. при просмотре. При разработке вам нужно больше контролировать это.

33 Ответа 33

Инструменты разработчика Chrome могут отключить кеш.

Нажмите правой кнопкой мыши и выберите "Проверить элемент", чтобы открыть DevTools. Или используйте одно из следующих сочетаний клавиш:

F12
Control + Shift + i
Command + Shift + i

Нажмите «Сеть» на панели инструментов, чтобы открыть панель сети.
Установите флажок "Отключить кеш" вверху.

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

Если вы не хотите использовать флажок «Отключить кеш», длительное нажатие на кнопку обновления при открытом DevTools отобразит меню с параметрами «Аппаратная перезагрузка» или «Очистить кеш и жесткая перезагрузка», которые должны иметь аналогичный эффект. Прочтите о разнице между вариантами, чтобы узнать, какой вариант выбрать. Доступны следующие сочетания клавиш:

Я даже не использую этот браузер в обычном режиме, только в целях тестирования, а размер каталога "Chrome" в "AppData\Local\Google" составляет около 500 МБ.

Можно ли отключить кеш страниц в Chrome?

13 ответов 13

Вы можете регулярно очищать кеш.

Настройки > Дополнительные > Конфиденциальность и безопасность > Очистить данные просмотра

Дополнительные инструменты > Очистить данные просмотра

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

Самый простой способ отключить кеширование браузера в Google Chrome — просто использовать его режим «Окно инкогнито», аналогичный режиму InPrivate в IE. Нажмите CTRL + SHIFT + N, чтобы открыть соответствующую вкладку.

У Chrome больше нет скрытых функций. Новый способ очистки кеша: «Настройки» -> «Дополнительно» -> «Конфиденциальность и безопасность» -> «Очистить данные браузера».

Только что узнал об этом решении. Вы запускаете Chrome под Windows с параметром --disk-cache-dir=null и наслаждаетесь. Работает также в системе *nix с /dev/null .

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

Это почти сработало для меня, за исключением того, что мне пришлось использовать nul вместо null . null только что переместил кеш в папку с именем null.

Могу подтвердить, что это очень хорошо работает для автоматизированных сценариев! Как сказал @blade, мне также пришлось использовать nul, чтобы это сработало!

Вы можете ограничить размер кэша диска очень небольшим числом (скажем, 1 байтом) с помощью опции:

Где 'N' – максимальный размер кеша в байтах

Возможно, для аналогичной цели пригодится и другой параметр: --media-cache-size=1

Я попробовал --disk-cache-size=1 в моем Chromium 17.0.963.1 (под Linux), и это дало эффект: размер каталога кеша значительно уменьшился!

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

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

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

Временная очистка

Если вы нажмете + +, автоматически откроется экран очистки кеша.

Другой вариант – нажать F12, чтобы открыть панель разработчика, а затем нажать на шестеренку в углу

Самый эффективный способ отключить кеширование в Chrome – указать для него несуществующий каталог кеша. Ответ Д.Янкова помогает, но полное решение выглядит так:

Необходимо указать оба каталога кеша, чтобы исключить кэширование Chrome. В Windows используйте приведенную выше строку (если у вас нет диска z:) или используйте любой другой несуществующий диск. В Linux/MacOS вместо "z:\" будет работать /dev/null.

Строку выше необходимо добавить в свойства ярлыка Chrome. Чтобы найти ярлык в Windows, нажмите кнопку «Пуск», щелкните окно поиска и введите Chrome (не нажимайте Enter). Дождитесь появления ярлыка для Chrome. Щелкните его правой кнопкой мыши и выберите "Свойства".

Ниже показано видео, демонстрирующее, как отключить кеширование в Google Chrome:

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

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

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

1) Как очистить кэш браузера в Google Chrome:

Вот как надежно заставить Chrome очищать кеш и поддерживать его очистку при доступе к сайту или веб-приложению:

Откройте Google Chrome и перейдите на страницу, которую хотите протестировать.
Нажмите F12 или откройте инструменты разработчика в настройках Chrome ("Настройки" > "Дополнительные инструменты" > "Инструменты разработчика").
Нажмите на шестеренку в правом верхнем углу всплывающего окна.
Установите флажок "Отключить кэш (при открытом DevTools)".
Закройте настройки инструментов разработки, но оставьте сами инструменты разработки открытыми.
Обновите страницу.
Вы можете открепить инструменты разработки в нижней части браузера, щелкнув прямоугольный значок справа от значка шестеренки, если вам нужно больше места для просмотра страницы внутри.

2) Как очистить локальное хранилище и данные сеанса в Google Chrome:

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

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

Вот как очистить локальное хранилище от устаревших данных:

Вот анимированный gif, показывающий, как выполнить описанные выше шаги:

Наша рекомендация для ваших разработчиков:

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

Scorchsoft – это агентство по разработке, которое специализируется на проектах Protal, SaaS и мобильных приложениях. Если вы хотите узнать о нас больше, изучите наш веб-сайт или, если вам нужна помощь в реализации вашего проекта, запросите бесплатное предложение.

Читайте также: