Manage clearing / refreshing cache in Chrome when reloading page

Web developers are constantly clicking the refresh button in their browser to see their latest changes. It almost becomes like a nervous tick, clicking that refresh to get that fix. And it's frustrating when changes on the backend don't result in the reward-inducing changes in the page loaded by the browser.

Web page caching explained

There's two levels of caching, and we deal with them in different places. First, there's flushing any cached resources in the browser, whether in the browser's memory or in files. And then there's requesting non-cached resources from the web server.

The more common cache we want to clear/ignore is in the browser. Normally, when you load or reload a page, any cached "resources" (images, CSS, and even html) will be used instead of re-downloading them from the server over the slow internet. Normally, this speeds up page loading greatly, but when developing we will make changes to those resources and want to view the new versions.

There are four (4) ways to cause a page to be loaded or reloaded in the browser and each way can affect both the browser and the server's caching behavior.

1. Type or paste a url into the omnibar and press enter. Doing this will request any files/resources if they are newer than the locally cached copies, meaning it will still use any cached (and unmodified on the server) html and other code, but the server should send and display anything that changed since last time. Chrome should send Cache-Control: max-age=0 in this case.

2. A page can often be reloading by clicking a self-linking link, usually the title of the content. This simulates a user browsing from another page to this page. There should be no cache-control request header, but there can be a If-Modified-Since to use existing cached resources and request resources which are newer than what's cached.

3. Regular reload by clicking the reload button or by key combo (command-R for OS X Chrome). This will tell the server to send any files newer than what the browser last cached (specified by If-Modified-Since request header) and also send a Cache-Control heder of max-age=0. This means the server shouldn't return any cached content effectively (anything older than right now).

4. Finally, we can request the browser to not use its cache when reloading by holding the shift key while reloading, so command-shift-R instead of just command-R. This will not send the If-Modified-Since header but also will send cache-control: no-cache. A header of 'no-cache' will tell the web server it should check its "origin server" for fresh content instead of simply using content cached at the web server. This is for caching/proxying web servers. Reloading with the shift key will not send the If-Modified-Since header since we want only the server's content. Pragma: no-cache is also sent but this is redundant.