TP Designs Blog

How to Refresh Your Browser Cache During Web Development

How to Refresh Your Browser Cache During Web Development

Internet browsers such as Google Chrome, Firefox and Microsoft Edge all have something called a “cache” that stores pages, images, scripts, styles and other files so it doesn’t need to download them every time you visit the page. This makes the websites you view load faster. Cached files are stored for a certain amount of time, depending on a lot of factors including browser settings, browser history and instructions coded in the website itself.

When in the process of reviewing changes made during the development a website it is important to see only new pages and files. Nothing should be pulled from the browser cache. In order ensure you are only viewing the newest version of all components of a webpage, it is necessary to perform a “hard refresh” on the browser before reviewing each page that has been modified.

First navigate to the page you want to review and perform a hard refresh. Use the following steps depending on what browser/operating system you are using. For most browsers, the easiest way to perform a hard refresh is to hold down Ctrl or Cmd and hit the reload button directly to the left of the URL bar.
browser reload button

Google Chrome

Windows/Linux:

  1. Hold down Ctrl and click the Reload button.
  2. Or, Hold down Ctrl and press F5.

Mac:

  1. Hold Shift and click the Reload button.
  2. Or, hold down Cmd and Shift key and then press R.

Mozilla Firefox and Related Browsers:

Windows/Linux:

  1. Hold the Ctrl key and press the F5 key.
  2. Or, hold down Ctrl and Shift and then press R.

Mac:

  1. Hold down the Shift and click the Reload button.
  2. Or, hold down Cmd and Shift and then press R.

Internet Explorer:

  1. Hold the Ctrl key and press the F5 key.
  2. Or, hold the Ctrl key and click the Refresh button.