Below is a video demonstrating how to disable caching in Google Chrome:

chrome clear cache video

If you have just had some new changes made to your website it can be frustrating to open up your web browser to find that it looks exactly as it did before - nothing has changed.

Though it may seem like your developers have been lieing to you, this is actually a really common issue that is caused by your browser: For bits of your website that don't change often, your web browser will store a copy of them on your computer and only update them when it thinks they may have changed (i.e. it caches the resources). It does this to improve the speed that a website loads for you, though it can be frustrating when all you want to do is check out the latest changes that your development team have made.

If you encounter an issue where something that should have updated hasn't you'll be asked to "clear your cache", this might fix the problem, however, your cache is not the only area where your browser stores data where it can go stale. I'll help you to fix both of these issues using tools normally only accessible to developers.

1) How to clear your Browser Cache in Google Chrome:

Here is how to reliably force Chrome to clear your cache and keep it cleared as you access a site or web app:

  • Open Google Chrome and navigate to the page you want to test.
  • Press F12 or open developer tools from within Chrome's settings (Settings > More tools > Developer tools).
  • Click the cog in the top right of the pop-out box.
  • Check the "Disable Cache (while DevTools is open)" setting box.
  • Close devtools settings but keep the devtools themselves open.
  • Refresh the page.
  • You can undock the devtools from the bottom of your browser by clicking the rectangular icon to the right of the cog icon should you need more space to view the page within.

2) How to clear local storage and session data in Google Chrome:

Clearing cache will not always fix the issue. Your web browser also has storage called "local storage" which is a local database of information that complex websites and web applications can use to reduce how often they need to make calls to the server. It can store all kinds of things, like the data being viewed on-screen at any time, or the profile information. It's then up to the developer who made the site or web app to program how this is refreshed and updated. 

Sometimes this can cause issues, for example, what if they have updated the app to store data differently, but you still have the old data format stored in this local storage? This can cause things to break, even though they aren't caused by a bug in the code of the new code version. A common bug with stale storage is a loading spinner that doesn't go away.

Here is how you clear local storage of stale data:

  1. Click the three-dot menu in Chrome.
  2. Scroll to more tools.
  3. click "Developer Tools".
  4. Once opened, navigate to the "application" tab.
  5. On the left under storage, you can see the different types of storage your web browser can access. These include: Local storage, session storage, indexed DB, WebSQL and cookies.
  6. Under each of these categories, you will see the different websites that are accessed from the page you are on, and if you click on one, it will show you the data stored on the right.
  7. Right-click on each site and click "clear" or "refresh" to force this data to be cleared.
  8. Now refresh the page

Here is an animated gif showing you how to do the above steps:

Our recommendation for your developers:

Though it is acceptable for browsers to cache files, local storage is under your control and it is good practice to clear it, or at least part of it, at certain key events. For example:

  1. If you detect the loadng spinner doesn't ever go away, even with multiple page refreshes, you may force the user to log out and refresh the cache and local storage programmatically.

  2. If you detect the local storage version number differs from you web app latest version, then local storage should be automatically dropped and refreshed.

  3. You may like to always refresh the app local storage on login/logout, this way customer support reps can ask a user to log out and back in again to rule out any bugs or issues caused by the local storage being stale or corrupt.

Scorchsoft is a development agency which specialises in protal project, SaaS projects and mobile app projects. If you would like to find out more about us, then please explore our website, or if you would like help implementing your project, then please request a free quote.