Menu
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.
757
It works, all the time, for everyone. But, if you're not using it, and you just need to reload that one CSS or JS file occasionally in your own browser... just open it in its own tab and hit SHIFT-reload (or CTRL-F5)!
The easiest solution is the hard reload your browser. Users can hard reload their browser by pressing ctrl + F5 or ctrl + shift + R after opening the application window.
To ensure you see the latest version of a site you need to clear the cache memory. This is done by doing a force refresh by pressing both control and F5 buttons simultaneously on your keyboard (depending on your browser). Most times a simple force cache refresh won't work and you need to clear the cache by hand.
Hold down Ctrl and click the Reload button. Or, Hold down Ctrl and press F5. just open the Chrome Dev Tools by pressing F12. Once the chrome dev tools are open, just right click on the refresh button and a menu will drop down.
The reload() method reloads the current document. The reload() method does the same as the reload button in your browser.
a. In almost all cases, static assets like images, JS, and CSS, do not change on a per-user basis. Thus they can be easily cached on the browser and on intermediate proxies and can be cached for a very long duration. Google generally recommends a time longer than 6 months or even a year for such content.
Pressing Ctrl + F5 (or Ctrl + Shift + R) to force a cache reload. I believe Macs use Cmd + Shift + R.
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'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.
Type about:config into the URL bar then find the entry titled network.http.use-cache. Set this to false.
121
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.
39
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
