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

Answer 1

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.

Answer 2

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.