When designing websites and sharing development links with clients, we often run into styling issues where things don’t quite look how they should. Occasionally this is server caching, but most often when we see one thing and the client sees another, it’s due to their web browser caching an old version of the stylesheet (or other files) and loading that instead of the current version.
Browsers do this all the time to speed up your web experience, and it’s usually not a problem. But when we update a file today, and you’re looking at a website with a file from a few days ago, it often leads to problems. Thankfully there are a few quick ways around browser caching problems.
Force Refresh
Force refreshing clears the browser’s cache for a specific page and forces it to load the most recent version.
Chrome – Windows
- Hold down Ctrl and click the Reload button.
- Or hold down Ctrl and press F5.
- Or open the Chrome Dev Tools by pressing F12. Once the Chrome Dev Tools are open, right click on the refresh button and a menu will drop down. This menu gives you the option of doing a hard refresh, and also clearing the cache and do a hard refresh automatically. (Image)
Chrome – Mac
- Hold ⇧ (Shift) and click the Reload button.
- Or hold down ⌘ Cmd and ⇧ Shift key and then press R.
Mozilla Firefox – Windows
- Hold the Ctrl key and press the F5 key.
- Or hold down Ctrl and ⇧ Shift and then press R.
Mozilla Firefox – Mac
- Hold down the ⇧ Shift and click the Reload button.
- Or hold down ⌘ Cmd and ⇧ Shift and then press R.
Microsoft Edge
- Windows: hold Ctrl + Shift + R on your keyboard, or hold Ctrl while clicking the Refresh button.
- Mac: hold Cmd + Shift + R on your keyboard, or hold the shift key while clicking the Refresh button.
Using Internet Explorer? Please download Chrome or Firefox for the best modern browsing experience. On mobile or using Safari? Start with clearing your cache using the steps below.
Clear Your Cache / Browsing History
Clearing your local browser cache will almost always solve any lingering display issues, but take note that this will effect all of your website browsing, not just development sites. Saved information will be cleared such as shopping carts and login details.
Firefox and Chrome
- Press Ctrl + Shift + Delete (Windows) or Cmd + Shift + Delete (Mac) to open the appropriate window.
Safari (Mac)
- Press Opt+Cmd+E
- In some cases, you may need to activate Developer mode and follow these additional steps.
Safari (iOS)
- Go to Settings
- Scroll down to the option for Safari
- Scroll down and select Clear Cookies and Data
- A pop-up will come up verifying that you want to clear the Cookies and Data. Select Clear.
- The button for Clear Cookies and Data should turn gray.
Microsoft Edge
- Click on the three dots menu button located in the upper right corner.
- Cick Settings and then click on Privacy, search, and services in the sidebar menu.
- Under “Clear browsing data” heading, click on the “Choose what to clear” button.
- Check the boxes next to “Cookies and other site data” and “cached images and files.”
- Click on the “Clear now” button.
Incognito / Private Mode
Most browsers offer a “Private” mode that disallows all tracking and cookies, and also uses all-new content instead of cached data. We often use this mode for testing internally, and recommend our clients use it as well.
Chrome
- Select New incognito window or press CTRL + SHIFT + N (Windows) or CMD + SHIFT + N (Mac)
Firefox
- Select New Private Window or press CTRL + SHIFT + P (Windows) or CMD + SHIFT + P (Mac)
Safari
- Choose File > New Private Window or press CTRL + SHIFT + N (Windows) or CMD + SHIFT + N (Mac)
Safari (iOS)
- On your iPhone, iPad, or iPod touch, open Safari, then tap
- While Private Browsing is on, Safari appears black or dark instead of white or gray.
Microsoft Edge
- Click on the three dots button in the upper right corner and select New InPrivate window, or press CTRL + SHIFT + N (Windows) or CMD + SHIFT + N (Mac)
Resources
