Browser cache is useful for web browsing , but a real pain point for developers. Modern day browsers cache a lot of front end resources like javascript, images, CSS, and more.
Why? They primarily do this to increase the website performance. That works out great but if a new feature or image or css is issued, then you don't, by default, see it in your browser.
How to solve it? 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 hard refresh on various browsers?
Chrome:
Quick hard refresh can be done by using the following short cut keys
Windows:
- Hold down Ctrl and click the F5 button.
- Or 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:
- 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.