Search code examples
javascriptcssbrowserxampp

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.

Solution

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

    enter image description here
    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.