6

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.

22

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

  • 2
    This worked for me. Not sure why it hasn't been accepted as the answer. – trubliphone Dec 15 '16 at 10:11
  • 2
    I'm having a weird issue with chrome caching css even with this ticked, any ideas? – SuperUberDuper Mar 22 '18 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 '18 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 '18 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 '19 at 20:47
4

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?

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

  • 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 – AkatsukiDiablo Sep 15 '17 at 14:37
-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....

-3

Ctrl+F5 or Ctrl+R. Also you could press F12, go into the network tab, reload with ctrl+F5/R and check that you get http status 200 instead of 304.

  • 1
    Even if the webpage itself (html file, to be exact) returns 200 instead of 304, the problem is that it treats the JS and CSS files as separate file and load the cached version of that, and I have no ways to force downloading the JS and CSS files again. – cytsunny Aug 1 '16 at 9:12

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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