loading...

Using "Reload" options in Chrome

praneetnadkar profile image Praneet Nadkar ・2 min read

One of the most popular browsers with the best debugging tools is Google Chrome. When working with CSS or JS, the dev tools in chrome are of great help. Chrome definitely makes the dev work easier. On the same lines, while working on the front end things and editing CSS or JS, refreshing is one of the things we are ought to do.

Let us explore what chrome offers on this little but very important thing.

Whenever you are working chrome, try this:

  1. Press F12 and open the developer tools.
  2. On the refresh button, on the top left of the browser window, do a right click.
  3. You will see three options. Reload options

Normal Reload

This is as good as clicking the refresh button or pressing F5.
This will use the cache but re-validate everything during page load. The browser will avoid re-downloading cached JavaScript files, images, text files, etc.

Hard Reload

In this option, the browser will not use anything from the cache when making the request. This can also be done using Ctrl+Shift+R option we don't need to open the Developer Console for this. This forces the browser do re-download every JavaScript file, image, text file, etc. Here the cache will still remain as is.

Empty Cache and Hard Reload

Use this option if the cache is to be emptied and we want the page to be hard reloaded. Note that here, the browser's cache will not be cleared, it is the page cache which will be cleared. This will force the browser to re-download everything with respect to the page.
This is the best option to use if you really want to reload a web page completely.

Posted on by:

praneetnadkar profile

Praneet Nadkar

@praneetnadkar

Developer. Foodie. Working on .Net tech stack, GraphQL, Azure and AWS.

Discussion

pic
Editor guide