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


151

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

Я пытался:

  1. CTRL / F5
  2. В Visual Studio 2012 перейдите в свойства проекта, вкладка «Веб». Выберите «Запустить внешнюю программу» в разделе «Действие запуска». Вставьте или выберите путь к Google Chrome (у меня есть C: \ Users \ xxx \ AppData \ Local \ Google \ Chrome \ Application \ chrome.exe) В поле Аргументы командной строки введите -incognito.
  3. Воспользовавшись инструментами разработчика Chrome, нажмите на иконку «gear», отметьте «Disable Cache».

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

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

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


4
f12 -> сеть -> щелчок правой кнопкой мыши -> очистить кеш браузера (мне это не нравится, поэтому я использую firefox с firebug)
спасибо

Я тоже это попробовал. Это не похоже на работу.
duyn9uyen

Вы пытались обновить его после всех щелчков правой и правой кнопки?
Спасибо

Да. Я также внес изменения в мой файл .aspx. Он взял изменения и встроенные изменения CSS, но не изменения в файле .css.
duyn9uyen

на той же вкладке сети вы можете увидеть запись вашего .cssфайла - я не знаю asp, поэтому не могу быть уверен, но на моем python-фляге код состояния кэшированных записей на сервере dev равняется 304, а для повторно загруженных файлов - 200 Проверьте свой код состояния и запросите время, чтобы увидеть, если это проблема на стороне сервера.
Спасибо

Ответы:


148

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

Такие как src="/css/styles.css?v={random number/string}"

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

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


17
просто не используйте это на производстве, иначе вы потеряете возможности кэширования вашего css. Что хорошо.
Барт Каликсто

3
Что если вы используете одностраничное приложение и вам нужно сказать приложению перезагрузить CSS, потому что версия изменилась?
Натан С. Треш

10
@ NathanC.Tresch вы меняете версию при изменении версии вместо того, чтобы делать случайную / временную строку, которая меняется каждый раз. Наилучшим подходом будет использование контрольной суммы самого файла CSS.
Барт Каликсто

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

@randy Я привел пример использования php, в котором вы отображаете текущую метку времени в качестве параметра запроса. Вы можете исследовать, как сделать нечто подобное, используя любой язык, который у вас есть на сервере. Вы также можете сделать это через шаг grunt / gulp, если он у вас есть.
Ансон

208

Чтобы заставить chrome перезаписать 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) перед выполнением перезагрузки.


26
И тут я нажимал CTRL + F5 как сумасшедший ... Спасибо.
Аликс Аксель


3
@ duyn9uyen Хорошая мысль! Похоже, они снова меняют поведение. Это добавлено в версию Chrome для Windows, пока не доступно на Mac.
Барт Каликсто

4
Ctrl + R также работает в Firefox. Спасибо за избавление от случайного URL и других вещей.
Зеешанеф

30
CTRL + R не работает для меня, но CTRL + SHIFT + R делает это
Пол Слокум

139

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

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


ОБНОВЛЕНИЕ: Теперь этот параметр был перемещен. Его можно найти на вкладке «Сеть», это флажок «Отключить кэш». введите описание изображения здесь


15
ИМХО, это лучшее решение: вам не нужно возиться со своим собственным кодом, чтобы предоставить случайное значение вашему CSS-URL.
Гийом

2
Отличный ответ! ... работал как шарм!
Ани

1
Я также нашел, что это лучшее решение.
Джо Хуанг,

3
Это было перенесено в более поздние версии Chrome: перейдите на вкладку Сеть и отметьте «Отключить кэш» в заголовке.
Джейсон Клеменс

Методы Ctrl + Shift + R и Shift + F5 у меня не работают - думаю, что-то изменилось в Chrome в последнее время. Этот метод все еще прекрасно работает. @JasonClemens: опция «Отключить кеш» есть как на вкладке «Сеть», так и в настройках.
Амос М. Карпентер

11

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

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

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

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

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


1
Это должен быть принятый ответ. Решение @anson не сработало для меня.
Пьеррик Мартелье

8

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


6

Нажмите SHIFT+ F5.

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


Спасибо. Несмотря на то, что ctrl-r был популярным ответом в этой теме, у меня работал только shift-f5 (Chromium 55).
user2662680

5

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

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

Вот и все!


4

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

+ SHIFT+R

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


3

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

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

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


3

Я использую Edge Version 81.0.416.64 (Официальная сборка) (64-разрядная версия) и основана на проекте с открытым исходным кодом Chromium.

Нажмите, F12чтобы войти в Dev Tools.
Нажмите вкладку «Сеть» и «
Проверка».

введите описание изображения здесь


2

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

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

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


2

Для macOS Chrome:

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

1

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


1

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

1

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

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

1

Все еще проблема.

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

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

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

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

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

Пример:

<link href="https://stackoverflow.com/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

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


0

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

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


0

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

  1. Перейти к «Инструменты»

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

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

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

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


0

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

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

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



0

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



-1

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

От cPanel перейдите в «ИНСТРУМЕНТЫ УЛУЧШЕНИЯ САЙТА» и нажмите «SuperCacher». На следующей странице нажмите кнопку «Очистить кэш».


Этот ответ не имеет ничего общего ни с Visual Studio, ни с браузером Chrome. Также этот вопрос был задан 4 года назад, и уже было принято решение. Пожалуйста, постарайтесь не «задевать» вопросы наверх, предоставляя ответы на них, если только вопрос не был помечен как решенный, или вы не нашли новое и улучшенное решение проблемы. Ознакомьтесь с документацией по написанию отличных ответов, чтобы узнать, как сделать так, чтобы ваши ответы
Обсидиановый возраст

Привет Обсидиан. Мои извинения. Это первый раз, когда я разместил здесь. Я искал долго и упорно для решения этой проблемы. Принятый ответ не работал для меня. Когда я действительно нашел решение (через свое собственное исследование), я хотел «заплатить вперед», помогая всем, кто сталкивается с этой проблемой - даже если ему четыре года. Я не уверен, почему мои действия здесь дали бы пощечину, так как это кажется мне законным. Тем не менее, я буду уверен, что буду осторожен в будущем (на самом деле - я не имею в виду это изворотливо). Спасибо -Дон.
Дон
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.