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

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

Я пробовал:

  1. сочетания клавиш ctrl / f5 в
  2. В Visual Studio 2012 В, Зайти в свойства проекта, вкладка веб Выберите Запустить внешнюю программу в раздел начать действие Вставьте или перейдите к пути для Google Chrome (мой C:UsersxxxAppDataLocalGoogleChromeApplicationchrome - ... исполняемый) В поле аргументы командной строки поместите-incognito
  3. использовал инструменты разработчика Chrome, нажмите на значок "шестеренка", отметьте "отключить кэш"."

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

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

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

22 ответов


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

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

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

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


чтобы принудить chrome к reaload css и js:

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

OS X: + SHIFT + R

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


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

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

на OS X: + R

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


[ПРОЧИТАЙТЕ ОБНОВЛЕНИЕ НИЖЕ]

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


UPDATE: теперь этот параметр был перемещен. Его можно найти на вкладке "Сеть", это флажок с надписью"отключить кэш". enter image description here


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

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

<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 вашего сайта

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

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


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


пресс SHIFT+Ф5.

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


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

  1. потяните консоль разработчика Chrome, нажав F12
  2. щелкните правой кнопкой мыши на кнопке перезагрузки в верхней части браузера и выберите "пустой кэш и жесткая перезагрузка."

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

+ SHIFT + R

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


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

Command + R отлично работает, если вы хотите отлаживать только .формат HTML. ,РНР. ,etc файлы, и быстрее, потому что работает с локальными / кэшированными ресурсами (.стиль CSS. ,в JS). Вручную удалять кэш браузера для каждой итерации отладки не удобно.

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


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

  1. на сеть в DevTools
  2. Правой Кнопкой Мыши на ресурсе и выберите воспроизвести XHR повторить запрос

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


для macOS Chrome:

  1. открыть инструменты разработчика cmd+alt+Я
  2. нажмите три точки в правом верхнем углу в developers tools
  3. Нажмите кнопку Настройки
  4. прокрутите вниз, чтобы Network
  5. включить Disable cache (while DevTools is open) см. скриншот: enter image description here

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


вы можете скопировать вставить этот скрипт в консоль 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);

еще вопрос.

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

еще один взять на переименование файла. Я использую перезапись URL в IIS. Иногда переписывают Isapi Геликона.

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

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

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

пример:

<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 = шаблон)

/шаблон.в CSS

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


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

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


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

  1. перейти к 'Tools'

  2. наведите курсор мыши на 'build system'. В нижней части приведенного списка нажмите "новая система сборки"...'

  3. в новом типе файла системы сборки это:

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

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


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

<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>

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

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

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


Ctrl + Ф5

Shift + Ф5

работы


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

из cPanel перейдите в раздел " инструменты улучшения сайта "и нажмите "Суперкэшер"."На следующей странице нажмите кнопку" Очистить кэш".


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


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

Ctrl + R (или) Ctrl + Ф5

надеюсь, что это может помочь вам!.