Почему браузер во время разработки не обновляет измененные стили?

Question

[inscamp]

Для ясности приведу пример.
Верстаю страницу, изменяю что-то в стилях, обновляю страницу в браузере, но ничего не меняется. Открываю в другом браузере – всё отображается в соответсвии с внесёнными изменениями, меняю URL с localhost:7777 на 127.0.0.1:7777, например,– снова всё ок. Однако это ровно до следующего изменения стилей. То есть браузер запоминает своё состояние и игнорирует всякое их изменение.

К слову, началось всё это когда я писал некое приложение на JS. И вот я взялся за Angular.js и с какого-то момента снова возникла эта проблема. Хотя почти уверен, что дело не в этом.

Браузеры: Safari, Chrome и Firefox.

Answer 1

[YemSalat]

Если работаете в Хроме (или Опере, или в Яндексе) - откройте девтулс -> настройки:


И просто держите девтулс открытым пока работаете.

Answer 2

[mayorovp]

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

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

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

Comments

[inscamp]

Странное дело. Впервые это проявило себя во время того, как я писал довольно простой JS скрипт, время от времени меняющий стили элементов. За результатом я следил просто открыв файл index.html в браузере.
Сейчас я пишу приложение на Angular.js. В качестве локального сервера – node. Проблема стала более явной. Стало быть дело в локальном сервере (как Вы сказали, отдаёт заголовок Expires) и если ничего в нём не менять, то в продакшене можно ожидать такого же поведения?
Загрязнять URL непонятными для пользователя значениями не хотелось бы, честно говоря.

[mayorovp]

inscamp: Пользователь не будет видеть этих значений - я же говорю про ресурсы (скрипты, картинки, таблицы стилей), а не про страницы.

[inscamp]

Теперь понял, спасибо.
Всё же никак не пойму в чём причина такого агрессивного хэширования ресурсов. В установках моего локального сревера по-умолчанию?

[mayorovp]

inscamp: Да, дело в настройках сервера. Сейчас даже Опера и IE следуют правилам кеширования ресурса, указанным в заголовках.

Answer 3

[Глюкъ Виртуален]

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

Answer 4

[Артур]

Как вариант обновлять комбинацией клавиш Ctrl+F5

Answer 5

[Dmitry Bay]

кэш браузера.