Як змусити браузер Chrome перезавантажити .css файл під час налагодження у Visual Studio?

Зараз я редагую .css-файл всередині Visual Studio 2012 (у режимі налагодження). Я використовую Chrome як свій браузер. Коли я вношу зміни у файл .css мого додатку всередині Visual Studio і зберігаю, оновлення сторінки не завантажуватиметься оновленою зміною у моєму файлі .css. Я думаю, що .css файл все ще є кешованим.

Я намагався:

1. CTRL / F5
2. У Visual Studio 2012, перейдіть до властивостей проекту, на вкладці Веб виберіть Запуск зовнішньої програми у розділі «Початок дії» Вставте або перейдіть до шляху для Google Chrome (Моє C: \ Користувачі \ xxx \ AppData \ Local \ Google \ Chrome \ Application \ chrome.exe) У поле аргументів командного рядка поставте -incognito
3. Використовували інструменти для розробників Chrome, натискайте на піктограму "шестірні", натискаєте "Відключити кеш".

Здається, нічого не працює, якщо я вручну не припиняю налагодження, (закриваю з Chrome), не перезавантажую програму (у налагодженні).

Чи є спосіб змусити Chrome завжди перезавантажувати всі зміни css та перезавантажувати .css файл?

Оновлення:
1. Зміни стилю в моєму .aspx-файлі з’являються під час оновлення. Але змін у файлі .css не відбувається. 2. Це додаток ASP.NET MVC4, тому я натискаю на гіперпосилання, яке робить GET. З цим я не бачу нового запиту на таблицю стилів. Але натиснувши F5, .css файл перезавантажується і код статусу (на вкладці мережі) дорівнює 200.

Є набагато складніші рішення, але дуже легкий, простий - просто додати рядок випадкових запитів до вашої CSS.

Як от src="/css/styles.css?v={random number/string}"

Якщо ви використовуєте php або іншу мову на стороні сервера, ви можете це зробити автоматично time(). Так було бstyles.css?v=<?=time();?>

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

Щоб змусити хром перезавантажувати css та js:

Варіант Windows 1: CTRL+ SHIFT+ R
Опція Windows 2: SHIFT+F5

ОС X: ⌘+ SHIFT+R

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

Оригінальна відповідь:

Chrome змінив поведінку. Ctrl+ Rзробимо це.

В ОС X: ⌘+R

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

[ЧИТАТИ ОНОВЛЕННЯ ВНУТРІ]

Найпростіший спосіб, який я знайшов, - це в налаштуваннях Chrome DevTools. Натисніть на значок шестірні (або 3 вертикальних точки в останніх версіях) у верхньому правому куті DevTools, щоб відкрити діалогове вікно "Налаштування". Там встановіть прапорець "Вимкнути кеш (поки DevTools відкритий)"

ОНОВЛЕННЯ: Тепер це налаштування переміщено. Його можна знайти на вкладці «Мережа», це прапорець із написом «Вимкнути кеш».

Ви маєте справу з проблемою кешу браузера.

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

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

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

Я впевнений, що це зробить :)

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

Натисніть SHIFT+F5 .

Для мене це працює з версією Chrome 54.

я зіткнувся з такою ж проблемою тут! але я впевнений, моя роздільна здатність краща за всі наведені вище приклади, просто зробіть це,

1. Підтягніть консоль розробника Chrome, натиснувши F12
2. Клацніть правою кнопкою миші на кнопку перезавантажити у верхній частині браузера та виберіть "Порожній кеш і жорстке перезавантаження".

Це все!

За допомогою macOS я можу змусити Chrome перезавантажувати файл CSS, виконуючи ці дії

⌘+ SHIFT+R

Цю відповідь знайшли в коментарях тут, але вона заслуговує на більшу експозицію.

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

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

Порядок примусового перезавантаження .css-файлу на Mac (ярлик клавіатури / Chrome): Command + Shift + R

Я використовую Edge Version 81.0.416.64 (Official build) (64-розрядна версія) та її основу на проекті з відкритим кодом Chromium.

Натисніть, F12щоб перейти до Dev Tools.
Клацніть На вкладці Мережа
перевірити відключити кеш

Я знаю, що це давнє запитання, але якщо хтось ще шукає, як перезавантажити лише один зовнішній файл css / js, зараз найпростішим способом у Chrome є:

1. Перейдіть на вкладку Мережа в DevTools
2. Клацніть правою кнопкою миші на ресурсі та виберіть Replay XHR, щоб повторити запит

Переконайтесь, що вибрано параметр « Вимкнути кеш» , щоб примусити перезавантажити.

Для Chrome macOS:

1. Відкрити інструменти для розробників cmd+ alt+i
2. Клацніть три крапки у верхньому правому куті в інструментах для розробників
3. Клацніть налаштування
4. Прокрутіть униз до Network
5. Увімкнути Disable cache (while DevTools is open)перегляд екрана:

Чому потрібно оновити всю сторінку? Просто оновіть лише файли 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);

Я вирішився цим простим трюком.

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

Все ж таки проблема.

Використання таких параметрів як "..css? Щось = випадкове значення" нічого не змінює в моєму досвіді підтримки клієнтів. Працює лише зміна імені.

Ще одне перейменування файлу. Я використовую Перезапис URL-адрес у 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

Тільки пояснення довге.

Просто виникла ця проблема, коли одна людина, що працює під керуванням 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 на вашому комп’ютері.

Найпростіший спосіб досягти поставленої мети - це відкрити нове вікно анонімного перегляду у вашому хромі або приватне вікно у firefox, яке за замовчуванням не кешуватиметься.

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

Якщо ви використовуєте IE, то, можливо, вам допоможе Бог!

Ctrl + F5

Shift + F5

Обидва працюють

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

Chrome/firefox/safari/IE перезавантажить всю сторінку цими ярликами

Ctrl+ R (АБО) Ctrl+F5

Сподіваюся, це може допомогти вам!

Якщо ви використовуєте SiteGround в якості своєї хостингової компанії, і жодне з інших рішень не спрацювало, спробуйте:

Від cPanel перейдіть до "ІНСТРУМЕНТІВ УДОБРЕННЯ САЙТА" та натисніть "SuperCacher". На наступній сторінці натисніть кнопку «Скинути кеш-пам'ять».