Force browser to refresh CSS, JavaScript, etc
I'm developing a website based on WordPress source code through XAMPP. Sometimes I change the CSS code, scripts 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 it 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 noticing the previous modifications.
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
.
If you want to avoid that on client side you can add something like ?v=1.x
to css file link, when the file content is changed. for example if there was <link rel="stylesheet" type="text/css" href="css-file-name.css">
you can change it to <link rel="stylesheet" type="text/css" href="css-file-name.css?v=1.1">
this will bypass caching.
If you can write php, you can write:
<script src="foo.js<?php echo '?'.mt_rand(); ?>" ></script>
<link rel="stylesheet" type="text/css" href="foo.css<?php echo '?'.mt_rand(); ?>" />
<img src="foo.png<?php echo '?'.mt_rand(); ?>" />
It will always refresh!
EDIT: Of course, it's not really practical for a whole website, since you would not add this manually for everything.