Force browser to refresh css, javascript, etc

Question

I'm developing a website based on Wordpress source code through XAMPP. Sometimes I change the CSS code, scrips or something else and I notice my browser takes time to apply the modifications. This leads me to use multiple browsers to refresh one and if doesn't apply the new styles I try the second one and it's always this.

There is some way of avoiding this problem? Sometimes I'm changing code without notice the previous modifications.

Answer 1

Make sure this isn't happening from your DNS. For example Cloudflare has it where you can turn on development mode where it forces a purge on your stylesheets and images as Cloudflare offers accelerated cache. This will disable it and force it to update everytime someone visits your site.

Answer 2

This Firefox extension was the only solution I could get to work: https://addons.mozilla.org/en-us/firefox/addon/css-reloader/

Answer 3

If you want to be sure that these files are properly refreshed by Chrome for all users, then you need to have must-revalidate in the Cache-Control header. This will make Chrome re-check files to see if they need to be re-fetched.

Recommend the following response header:

Cache-Control: must-validate

This tells Chrome to check with the server, and see if there is a newer file. If there is a newer file, it will receive it in the response. If not, it will receive a 304 response, and the assurance that the one in the cache is up to date.

If you do NOT set this header, then in the absence of any other setting that invalidates the file, Chrome will never check with the server to see if there is a newer version.

Here is a blog post that discusses the issue further.

Answer 4

General solution

Pressing Ctrl + F5 (or Ctrl + Shift + R) to force a cache reload. I believe Macs use Cmd + Shift + R.

PHP

In PHP, you can disable the cache by setting the expiration date to a time in the past with headers:

header("Expires: Tue, 01 Jan 2000 00:00:00 GMT");
header("Last-Modified: " . gmdate("D, d M Y H:i:s") . " GMT");
header("Cache-Control: no-store, no-cache, must-revalidate, max-age=0");
header("Cache-Control: post-check=0, pre-check=0", false);
header("Pragma: no-cache");

Chrome

Chrome's cache can be disabled by opening the developer tools with F12, clicking on the gear icon in the lower right corner and selecting Disable cache in the settings dialog, like this:

^{Image taken from this answer.}

Firefox

Type about:config into the URL bar then find the entry titled network.http.use-cache. Set this to false.