366

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.

Anybody know the precise behavior of each of the 3 options?

Praveen Kumar Purushothaman
  • 154,660
  • 22
  • 177
  • 226
Samuel Rossille
  • 16,848
  • 18
  • 55
  • 85
  • 19
    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? – Joachim Sauer Feb 20 '13 at 16:25
  • 89
    @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* http://www.samuelrossille.com/home/blog-chrome-reload-options.html – Samuel Rossille Feb 20 '13 at 16:46
  • I'd like to add that this only works if the console is open and docked. – Josh Oct 25 '13 at 09:07
  • What an incredibly wonderful tool. Thank you for posting this. I battle with coding, clearing and refreshing daily. I typically launch an incognito window for this but this is cleaner still. – zkent Jan 12 '14 at 01:28
  • 12
    Also appears by right-clicking the reload icon (while Devtools is open) – Costa Jan 22 '14 at 04: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 '14 at 02:15
  • @nitsujri Yes, I works for me. I'm on Mac OS X 10.10 Chrome 43.0.2357.81 (64-bit) – Mint Jul 24 '15 at 04:16
  • 6
    I just found these features in year 2016 by accident... – Edwin Yip Jan 19 '16 at 13:23

4 Answers4

466

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.

Community
  • 1
  • 1
Andrew Rasmussen
  • 13,619
  • 7
  • 40
  • 77
  • 52
    Does anyone know if the third option just empties the cache for the current site, vs emptying the *entire* cache? – Grinn Apr 18 '13 at 00:35
  • @Grinn: I don't, but I'd love to. You could ask that question on Stack Overflow. – Andrew Rasmussen Apr 18 '13 at 17:22
  • 12
    @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". – Andrew Rasmussen Apr 18 '13 at 20:39
  • 15
    I'm unclear on what is considered an `"after-the-fact download via Javascript"`? Can someone provide a concrete example? – Costa Jan 22 '14 at 04:39
  • 4
    @Costa You can download stuff that is not initially specified in the DOM. For example by adding a new – Domi Apr 09 '14 at 20:28
  • 2
    @Grinn's question is important enough to ask as its own question (as suggested), so I've done so at http://stackoverflow.com/questions/23771569/does-empty-cache-and-hard-reload-empty-the-entire-cache-or-just-parts-relevant – Matthew Flaschen May 20 '14 at 23:23
  • 3
    This doesn't seem to be correct anymore. Pressing F5 / Ctrl + R / Clicking on the reload button seems to force browser to check resources again and not use cache. The only way I can get it to actually use cache is to hit enter on the link address – Shocker Nov 05 '14 at 11:41
  • 16
    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 '15 at 17:51
  • When I hit F5 (normal reload) all the files are downloading from server but not from cache with request header 'Cache-Control:no-cache', what parameters should I set? – fen1ksss Oct 08 '15 at 13:22
  • @scunliffe The shortcuts seem to work without the DevTools open (Normal Reload - Ctrl+R, Hard Reload - Ctrl + Shift + R) – nbrooks Mar 08 '17 at 22:22
  • @nbrooks The third option (empty and hard reload) is only available when the dev tools are open, and there's no keyboard shortcut – scunliffe Mar 08 '17 at 23:16
  • 2
    Is there way a user can add a keyboard shortcut to the third option? – Dimitris Damilos Aug 18 '17 at 10:45
  • @MuhammadUmer In dev tools, go to the Application tab, on the left, expand cookies and right click the domain(s) and click Clear, or select a domain and select the individual cookies on the right and press the delete key to remove them selectively. – doug65536 Aug 24 '17 at 00:51
  • 1
    I always used cmd+shift+r for had reload, but it doesn't seem to work anymore without the dev tools open. Anyone else find that? – dardub Mar 30 '18 at 20:34
  • Interestingly enough, Google's [developer site](https://developers.google.com/web/updates/2015/05/hard-reload) explicitly mentions "With DevTools opened" (as of writing) – kevlarr Jun 11 '18 at 19:41
  • @DimitrisDamilos Here's an option: in settings -> click "Disable cache (while DevTools is open)". Then you don't even need a keyboard shortcut :) – jackcogdill Jan 15 '20 at 18:02
  • Is it possible to automatically empty the cache when reloading the page if dev tools is already open? It's annoying to right click and select "Empty cache and hard reload" every time. – darKnight Aug 14 '20 at 10:11
  • Do we have references to any publication by Google that may corroborate this? – amn Oct 22 '20 at 15:47
  • I can't seem to verify that F5 or normal use of the Reload button in the toolbar causes request to be re-validated -- on my Chrome 86 all of my site's assets are served from cache _except_ the index HTML file for which at least a request is made with a 304 from server. Is this some optimization of Chrome? Why wouldn't it re-validate the rest of the things the HTML file references? The response headers in all cases are only `ETag` and `Last-Modified`. – amn Oct 22 '20 at 16:11
3

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

dcorking
  • 938
  • 1
  • 11
  • 23
  • *“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. – Denilson Sá Maia May 28 '18 at 14:32
  • I think browsers send a `Cache-Control: no-cache` header. http://squid-web-proxy-cache.1019090.n4.nabble.com/Force-cache-reload-for-object-from-browser-td1028329.html Does yours? – dcorking Jun 03 '18 at 12:16
  • 4
    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. – Denilson Sá Maia Jun 04 '18 at 13:22
  • Great! You can edit that into my answer, or write your own answer. @DenilsonSáMaia – dcorking Jun 04 '18 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.

Sohail Ahmed
  • 749
  • 1
  • 7
  • 24
0

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.

Joel H
  • 701
  • 7
  • 12