Browser cache is useful for web browsing, but a real pain point for developers.
Modern day browsers nowadays cache every front-end resource like javascript or CSS style sheets. They primarily do this to increase the website performance. But this can be really irritating while one is in development mode and constantly modifying the javascript or css style sheets. The only way to see the changes is by doing a hard refresh or clear the cache of the browser.
A hard refresh is a way of clearing the browser’s cache for a specific page, to force it to load the most recent version of a page. Sometimes, when changes are made to the website, they don’t register immediately due to caching. A hard refresh will usually fix this, though occasionally completely clearing the cache is necessary.
How to do a hard refresh on various browsers?
Chrome:
Quick hard refresh can be done by using the following shortcut keys
Windows/Linux:
- 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. This menu gives you the option of doing a hard refresh, or even clearing the cache and do a hard refresh automatically.
Mac:
- Hold ⇧ Shift and click the Reload button.
- Or, hold down ⌘ Cmd and ⇧ Shift key and then press R.
Mozilla Firefox and Related Browsers:
Windows/Linux:
- Hold the Ctrl key and press the F5 key.
- Or, hold down Ctrl and ⇧ Shift and then press R.
Mac:
- Hold down the ⇧ Shift and click the Reload button.
- Or, hold down ⌘ Cmd and ⇧ Shift and then press R.
Internet Explorer:
- Hold the Ctrl key and press the F5 key.
- Or, hold the Ctrl key and click the Refresh button.