Как заставить браузер Chrome перезагружать файл .css при отладке в Visual Studio?

В настоящее время я редактирую файл .css внутри Visual Studio 2012 (в режиме отладки). Я использую Chrome в качестве браузера. Когда я вношу изменения в файл .css моего приложения внутри Visual Studio и сохраняю, обновление страницы не будет загружаться с обновленным изменением в моем файле .css. Я думаю, что .css файл все еще кэшируется.

Я пробовал:

  • CTRL/F5
  • В Visual Studio 2012, Перейти к свойствам проекта, вкладке "Веб" Выберите "Запустить внешнюю программу" в разделе "Действие" Вставьте или найдите путь для Google Chrome (Mine - C:\Users\xxx\AppData\Local\Google\Chrome\Application\chrome.exe) В поле аргументов командной строки введите -incognito
  • Используемые инструменты разработчика Chrome, щелкните значок "шестерня", отметьте "Отключить кеш".

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

Есть ли способ заставить Chrome всегда перезагружать все изменения css и перезагружать файл .css?

Обновление:
1. Изменения в стиле строки в моем .aspx файле собираются при обновлении. Но изменений в .css файле нет. 2. Это приложение ASP.NET MVC4, поэтому я нажимаю на гиперссылку, которая делает GET. Выполняя это, я не вижу нового запроса для таблицы стилей. Но нажав F5, файл .css перезагружается, а код состояния (на вкладке сети) - 200.

ОТВЕТЫ

Ответ 1

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

Например, src="/css/styles.css?v={random number/string}"

Если вы используете php или другой серверный язык, вы можете сделать это автоматически с помощью time(). Таким образом, это будет styles.css?v=<?=time();?>

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

Ответ 2

Чтобы заставить chrome загрузить css и js:

Вариант Windows 1: CTRL + SHIFT + R
Вариант Windows 2: SHIFT + F5

OS X: ⌘ + SHIFT + R

Обновлено как указано @PaulSlocum в комментариях (и многие подтверждены)

Оригинальный ответ:

Изменено поведение Chrome. CTRL + R сделает это.

В OS X: ⌘ + R

Если у вас возникли проблемы с перезагрузкой файлов css/js, откройте инспектор (CTRL + SHIFT + C) до выполняя перезагрузку.

Ответ 3

Самый простой способ, который я нашел, - в настройках Chrome DevTools. Нажмите на значок шестеренки (или 3 вертикальных точки в более поздних версиях) в правом верхнем углу DevTools, чтобы открыть диалоговое окно "Настройки". Там поставьте галочку в поле "Отключить кеш (в то время как DevTools открыт)"

Ответ 4

Вы имеете дело с проблемой кеша браузера.

Отключить кеш на самой странице. Это не сохранит файл поддержки в браузере/кеше.

<meta http-equiv="cache-control" content="max-age=0" />
<meta http-equiv="cache-control" content="no-cache" />
<meta http-equiv="expires" content="0" />
<meta http-equiv="expires" content="Tue, 01 Jan 1990 12:00:00 GMT" />

Этот код вам нужно/нужно вставить в тег head страницы, которую вы отлаживаете, или в теге head master page вашего сайта

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

Я уверен, что это будет делать:)

Ответ 5

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

Ответ 6

Нажмите SHIFT + F5.

Он работает для меня с Chrome версии 54.

Ответ 7

С macOS я могу заставить Chrome перезагрузить файл CSS, выполнив

⌘ + SHIFT + R

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

Ответ 8

Текущая версия Chrome (55.x) не перезагружает все ресурсы при перезагрузке страницы (Command + R) - и это не полезно для отладки файла .css.

Command + R отлично работает, если вы хотите отлаживать только файлы .html,.php,.etc и быстрее, потому что работает с локальными/кэшированными ресурсами (.css,.js). Для ручного удаления кеша браузера для каждой итерации отладки не удобно.

Процедура принудительного перезагрузки файла .css на Mac (ярлык клавиатуры /Chrome ): Команда + Shift + R

Ответ 9

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

  • Поднимите консоль разработчика Chrome, нажав F12
  • Щелкните правой кнопкой мыши по кнопке перезагрузки в верхней части браузера и выберите "Empty Cache and Hard Reload".

Вот так!

Ответ 10

Я знаю, это старый вопрос, но если кто-то все еще смотрит, как перезагрузить только один внешний файл css/js, самый простой способ теперь в Chrome:

  • Перейдите на вкладку Сеть в DevTools
  • Щелкните правой кнопкой мыши ресурс и выберите "Повторить XHR", чтобы повторить запрос.

Убедитесь, что опция Отключить кеш выбрана для принудительной перезагрузки.

Ответ 11

Почему необходимо обновить всю страницу? Просто обновите только файлы css без перезагрузки страницы. Это очень полезно, когда, например, вам приходится ждать длинного ответа от БД. После того, как вы получите данные из БД и заполните страницу, отредактируйте свои css файлы и перезагрузите их в Chrome (или в Firefox). Для этого вам необходимо установить расширение CSS Reloader. Также доступна версия Firefox.

Ответ 12

Вы можете скопировать этот script в консоль Chrome, и это заставит ваши скрипты CSS перезагружаться каждые 3 секунды. Иногда я считаю это полезным, когда я улучшаю стили CSS.

var nodes = document.querySelectorAll('link');
[].forEach.call(nodes, function (node) {
    node.href += '?___ref=0';
});
var i = 0;
setInterval(function () {
    i++;

    [].forEach.call(nodes, function (node) {
        node.href = node.href.replace(/\?\_\_\_ref=[0-9]+/, '?___ref=' + i);
    });
    console.log('refreshed: ' + i);
},3000);

Ответ 13

Для macOS Chrome:

  • Откройте инструменты для разработчиков cmd + alt + i
  • Нажмите три точки в правом верхнем углу инструментов разработчиков.
  • Нажмите настройки
  • Прокрутите вниз до Network
  • Включить Disable cache (while DevTools is open) см. снимок экрана: введите описание изображения здесь

Ответ 14

Еще проблема.

Использование таких параметров, как "..css? something = random-value", ничего не меняет в моем опыте поддержки клиентов. Только изменения имени работают.

Другой способ переименования файла. Я использую URL Rewrite в IIS. Иногда Helicon Isapi Rewrite.

Добавить новое правило.

+ Name: lame-chrome-fix.
+ Pattern: styles/(\w+)_(\d+)
+ Rewrite URL: /{R:1}.css

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

Пример:

<link href="/styles/template_<% 
Response.Write( System.DateTime.UtcNow.ToString("ddmmyyhhmmss")); %>" 
type="text/css" />

(Нет стилей, это просто часть имени шаблона)

Выходной код как:

<link href="/styles/template_285316115328" 
rel="stylesheet" type="text/css">

Перенаправить как:

(R: 1 = шаблон)

/template.css

Только объяснение длинное.

Ответ 15

Просто возникла эта проблема, когда один из пользователей Chrome (на Mac) внезапно прекратил загрузку файла CSS. CMD + R вообще не работал. Мне не нравятся приведенные выше предложения, которые вынуждают постоянную перезагрузку производственной системы.

Сработало изменение имени файла CSS в файле HTML (и, конечно, переименование файла CSS). Это вынудило Chrome пойти получить последний файл CSS.

Ответ 16

Если вы используете Sublime Text 3, использование системы сборки для открытия файла открывает самую последнюю версию и обеспечивает удобный способ загрузки через [CTRL + B] Чтобы настроить систему сборки, которая открывает файл в chrome:

  • Перейдите в раздел "Инструменты"

  • Наведите указатель мыши на "сборку". Внизу приведенного списка нажмите "Новая система сборки..."

  • В новом системном файле сборки введите это:

    {"cmd": [ "C:\\Program Files (x86)\\Google\\Chrome\\Application\\chrome.exe", "$file"]}

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

Ответ 17

Я решил этот простой трюк.

<script type="text/javascript">
  var style = 'assets/css/style.css?'+Math.random();;
</script>

<script type="text/javascript">
  document.write('<link href="'+style+'" rel="stylesheet">');
</script>

Ответ 18

Самый простой способ достичь вашей цели - открыть новое окно инкогнито в вашем хромовом или частном окне в firefox, которое по умолчанию будет не кешем.

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

Если вы используете IE, тогда бог может помочь вам!

Ответ 19

Ctrl + F5

Shift + F5

Оба работают

Ответ 20

Если вы используете SiteGround в качестве вашей хостинговой компании, и ни одно из других решений не работает, попробуйте следующее:

Из cPanel перейдите к разделу "САМОУПРАВЛЕНИЕ ИНСТРУМЕНТОВ САЙТА" и нажмите "SuperCacher". На следующей странице нажмите кнопку "Очистить кеш".

Ответ 21

Самый простой способ для Safari 11.0 macOS SIERRA 10.12.6: Reload Page From Origin, вы можете использовать справку, чтобы узнать, где находится в меню, или вы можете использовать опцию быстрого доступа (alt) + команду + R.

Ответ 22

Chrome/firefox/safari/IE перезагрузит всю страницу этими ярлыками

Ctrl + R (OR) Ctrl + F5

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