How to disable the cache in Chrome while developing

I normally use Chrome when I develop websites and was about to switch browsers until I learned how to disable the cache in Chrome while developing.

I was so close to switching browsers that I actually wrote a small rant about it here.

Since finding this little trick, Chrome and I are friends again 🙂

There are ways to manually clear your cache, but I do not necessarily want to do that.  I usually just want to disable it while I develop.  This tutorial shows you how to do just that.

In order to disable the cache while developing, just follow the three easy steps below and you will avoid the headaches that I was having.

How to disable the cache in Chrome while developing

Step 1

While using Chrome to view the website you want to edit, right click anywhere on the page and select “Inspect”.

A window that looks like the image below will appear.  By default, the “Elements” section is selected.

Step 2

The fourth tab (heading) from the left, on the newly opened window is “Network”.  Go ahead and select “Network”.

Your web-page should now look something like the image below.

Step 3

The final step is to click on the check box next to “Disable cache”.  Your web-page should now look like the image below.

That’s it folks, that’s all there is to it.  From here forward, when you are developing, just open the developer tools by right clicking and selecting “Inspect”.  The cache for Chrome will be disabled.

I normally keep the developer tools open while I develop so this works great for me.

Did this save your sanity? Leave a comment below and tell me about it.