410

I recently discovered this new feature in Chrome:

reload options

I can figure out the difference between option 1 and option 3, and that option 2 is probably something in between, but I can't find any more precise information anywhere.

Does anybody know the precise behavior of each of the 3 options?

8
  • 20
    Could you explain "this feature"? Specifically: how do you access it? I tried all kinds of right-clicks, control-clicks, ... but couldn't get it. What version is this? Feb 20, 2013 at 16:25
  • 98
    @JoachimSauer Haha that's my little secret... Seriously it's extremely well hidden: you have to press the refresh button without releasing it immediately while the developer console is active samuelrossille.com/home/blog-chrome-reload-options.html Feb 20, 2013 at 16:46
  • 16
    Also appears by right-clicking the reload icon (while Devtools is open)
    – Costa
    Jan 22, 2014 at 4:36
  • 7
    Does this work for OSX Chrome? I can't seem to get it open via Dev Tools and right click/click + hold
    – nitsujri
    Mar 25, 2014 at 2:15
  • 6
    I just found these features in year 2016 by accident...
    – Edwin Yip
    Jan 19, 2016 at 13:23

4 Answers 4

516

Normal reload

The same thing as pressing F5. This will use the cache but revalidate everything during page load, looking for "304 Not Modified" responses. If the browser can avoid re-downloading cached JavaScript files, images, text files, etc. then it will.


Hard reload

Don't use anything in the cache when making the request. (which is equal to SHIFT+F5 No need to open Developer console) Force the browser do re-download every JavaScript file, image, text file, etc.


Empty Cache and Hard Reload

Obviously, if the cache is empty then it will have to do a hard reload. This will again force the browser to re-download everything. However, if the page makes any after-the-fact downloads via JavaScript that weren't part of page load, then these might still use the cache, which is where emptying the cache helps because it makes sure that even these won't use cached files.


Note: This feature is only available when the developer tools are open.

24
  • 57
    Does anyone know if the third option just empties the cache for the current site, vs emptying the entire cache?
    – Grinn
    Apr 18, 2013 at 0:35
  • 16
    @Grinn: Actually, now that I think of it, it's probably the entire cache. The point of that feature is to clear after-the-fact downloads, which aren't restricted to just one "site". Apr 18, 2013 at 20:39
  • 18
    I'm unclear on what is considered an "after-the-fact download via Javascript"? Can someone provide a concrete example?
    – Costa
    Jan 22, 2014 at 4:39
  • 6
    @Costa You can download stuff that is not initially specified in the DOM. For example by adding a new <script> tag to your DOM, or by using RequireJS etc. Any AMD-based library (such as RequireJS) basically loads its scripts lazily. In that case, you have to empty the cache to make sure that really everything gets a hard reload.
    – Domi
    Apr 9, 2014 at 20:28
  • 17
    It should be noted that this only works if the developer tools are open (F12) It would be nice if this was a setting that could always be available regardless if the dev tools are open or not.
    – scunliffe
    Feb 24, 2015 at 17:51
5

This also works in Mac OS X. Open developer tools, and then, on the reload button, either 1. secondary click (right click for right-handed mouse), or 2. long click, aka long press to see the menu.

In addition to this answer, hard reload often causes proxies, content delivery networks and other remote caches to be refreshed.

enter image description here

4
  • “hard reload often causes proxies, content delivery networks and other remote caches to be refreshed.” → Can you back it up? Do you have any citation explaining why this would be the case? I would expect the Hard Reload to just reload all local cache, and would have no additional effect on remote servers. May 28, 2018 at 14:32
  • I think browsers send a Cache-Control: no-cache header. squid-web-proxy-cache.1019090.n4.nabble.com/… Does yours?
    – dcorking
    Jun 3, 2018 at 12:16
  • 6
    I did some testing… Going to the URL or using Normal Reload sent 3 cache-related headers: Cache-Control: max-age=0, If-Modified-Since, If-None-Match. However, doing Hard Reload (with or without emptying cache), only 2 cache-related headers were sent: Cache-Control: no-cache and Pragma: no-cache. So, yeah, the browser indeed sends a header asking servers for a fresh version; it's then up to servers (including proxies) to change behavior based on that. Jun 4, 2018 at 13:22
  • Great! You can edit that into my answer, or write your own answer. @DenilsonSáMaia
    – dcorking
    Jun 4, 2018 at 14:09
1

The following method let you clear cache only for the troubled URL. It helped me when I was stuck with http to https redirection cache.

  1. Open Chrome developer tools, in Windows I use F12
  2. Check Preserve log to save the log before redirection
  3. Right click the redirected URL and Clear browser cache

This will clear only the troubled cache without affecting normal cache.

1

Here's a reference to the spec - the browser performs one of these actions when a reload is triggered:

A 'normal reload' performs either a 'Specific end-to-end revalidation' or 'Unspecified end-to-end revalidation', as defined by the HTTP spec, i.e. cache is used, but revalidation occurs, either with a cache-validating conditional ('specific') or none ('unspecified'). In both cases, the revalidation occurs since max-age header is set to 0 by the browser.

A 'hard reload', on the other hand, seems to trigger an 'End-to-end reload' - no cached copies are allowed to be used. In this case, reload is forced by the browser setting Pragma: no-cache.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.