12

It is known that using shift+ctrl+R can be used to force chrome browser to reload the page instead of reading from cache. However, while the images are reloaded, the JS and CSS files are not loaded. Currently I have to test my page on incognito mode, close and reopen the incognito tab so as to make sure the page is not using the cached JS and CSS files.

Is there any settings or hotkey I can do this in normal mode? It is really tiring to reopen the windows every time I need to test the changes in CSS or JS files.

Improve this question

6 Answers 6

Reset to default
26

If you press 'F12' to open Chrome Dev Tools and select the network tab, you have the option to disable caching.

This only works with the Dev Tools Panel is open.

Devtools Cache

Improve this answer
6
  • 2
    This worked for me. Not sure why it hasn't been accepted as the answer.
    – trubliphone
    Dec 15, 2016 at 10:11
  • 3
    I'm having a weird issue with chrome caching css even with this ticked, any ideas?
    – SuperUberDuper
    Mar 22, 2018 at 11:54
  • 1
    Is there a way to only disable caching on resources that aren't fetched over the internet? I'm using cdn for some libraries, and my internet connection is pretty slow...
    – Nearoo
    May 18, 2018 at 12:07
  • Is there a way to disable cache for specific file types? e.g. Disable cache for .css and .js but allow cache for everything else.
    – Warwick
    Jul 22, 2018 at 10:03
  • 2
    This is the first time I've ever heard of this option, and I've been dealing with this refresh issue for years. Thank you! FYI to others...you have to widen the Dev Tools frame enough to see this option.
    – MTAdmin
    May 17, 2019 at 20:47
12

There are a couple of ways to Hard reload a website in chrome. All of them require us to open chrome Developer tools.

Through short cut key combination

  1. Make sure that chrome Developer Tools window is opened (by pressing F12)
  2. Press Ctrl + Shift + R

By setting property in Network tab

  1. Make sure that chrome Developer Tools window is opened (by pressing F12)
  2. Head over to Network tab
  3. Tick Disable cache checkbox

By long pressing Reload button

  1. Make sure that chrome Developer Tools window is opened (by pressing F12)
  2. Point to "Refresh button" in top left and long press left mouse button
  3. A dropdown will then appear where we will get different options as shown in this image:

How to make Chrome reload all JS and CSS file of a page?

Improve this answer
3

Doing a hard reload should also do the trick as well. The answer above didn't always work for me, so doing the hard reload made it work for me.

See how to here

Improve this answer
1
  • 2
    I forgot to mention that you have the dev tools open in chrome to be able to press and hold down the refresh button for those options
    – Anthony
    Sep 15, 2017 at 14:37
0

Beware if you are using Chromium Embedded Framework as your http server. For me, when I run on Windows, CEF does not appear to do any caching on the server end (so devtools disable cache works for me). But when I run on Macintosh, no matter what I do on the client side (reload page, devtools disable cache), it serves the same file until I restart the CEF server. This is probably because I have something configured differently with CEF on the Macintosh side, but I don't remember making such changes.

Improve this answer
0

Hold down Ctrl and click the Reload button. Or, Hold down Ctrl and press F5. just open the Chrome Dev Tools by pressing F12. Once the chrome dev tools are open, just right click on the refresh button and a menu will drop down.

Improve this answer
-2

You should try Ctrl+R or Ctrl+F5, or Go to Network Conditions tab in DevTools (Shortcut is Ctrl+Shift+I) and tick Disable Cache....

Improve this answer
0

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .