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



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



Я пробовал:




  1. CTRL / F5


  2. В Visual Studio 2012 В,
    Перейдите на вкладку Свойства проекта, веб
    Выберите Запустить внешнюю программу в в разделе действие при запуске
    Вставьте или перейдите к пути для Google Chrome (мой C:UsersxxxAppDataLocalGoogleChromeApplicationchrome.исполняемый)
    В поле аргументы командной строки put-incognito

  3. использовал инструменты разработчика Chrome, нажмите на значок "gear", установите флажок "Отключить кэш"."


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



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



обновление:

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

867   22  

22 ответов:

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

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

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

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

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

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

OS X: + SHIFT + R

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


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

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

на OS X: + R

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

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

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


обновление: теперь этот параметр был перемещен. Его можно найти на вкладке "Сеть", это флажок с надписью"отключить кэш". 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+F5.

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

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

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

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

+ SHIFT + R

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

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

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

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

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

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

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

для macOS Chrome:

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

зачем нужно обновить всю страницу? Просто обновите только css файлы без перезагрузки страницы. Это очень полезно, когда, например, вам приходится долго ждать ответа от БД. Как только вы получите данные из БД и заполните страницу, отредактируйте свои файлы css и перезагрузите их в Chrome (или в Firefox). Для этого вам нужно установить CSS Reloader extension. Также доступна версия 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?что-то=случайное значение" ничего не меняет в моем опыте поддержки клиентов. Работает только изменение имени.

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

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

+ 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. перейдите в раздел "Инструменты"

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

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

Shift + F5

работы

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

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

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

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

Ctrl + R (или) Ctrl + F5

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

Comments

    Ничего не найдено.