How to force Chrome browser to reload .css file while debugging in Visual Studio?
To force chrome to reaload css and js:
Windows option 1: CTRL + SHIFT + R
Windows option 2: SHIFT + F5
OS X: ⌘ + SHIFT + R
Updated as stated by @PaulSlocum in the comments (and many confirmed)
Original answer:
Chrome changed behavior. Ctrl + R will do it.
On OS X: ⌘ + R
If you have problems reloading css/js files, open the inspector (CTRL + SHIFT + C) before doing the reload.
There are much more complicated solutions, but a very easy, simple one is just to add a random query string to your CSS include.
Such as src="/css/styles.css?v={random number/string}"
If you're using php or another server-side language, you can do this automatically with time()
. So it would be styles.css?v=<?=time();?>
This way, the query string will be new every single time. Like I said, there are much more complicated solutions that are more dynamic, but in testing purposes this method is top (IMO).
[READ THE UPDATE BELOW]
Easiest way I've found is in Chrome DevTools settings. Click on the gear icon (or 3 vertical dots, in more recent versions) in the top-right of DevTools to open the "Settings" dialog. In there, tick the box: "Disable cache (while DevTools is open)"
UPDATE: Now this setting has been moved. It can be found in the "Network" tab, it's a checkbox labeled "Disable Cache".
You are dealing with the problem of browser cache.
Disable the cache in the page itself. That will not save supporting file of page in browser/cache.
<meta http-equiv="cache-control" content="max-age=0" />
<meta http-equiv="cache-control" content="no-cache" />
<meta http-equiv="expires" content="0" />
<meta http-equiv="expires" content="Tue, 01 Jan 1990 12:00:00 GMT" />
This code you require/need to insert in head
tag of the page you are debugging, or in head
tag of master page
of your site
This will not allow browser to cache file, eventually files will not be stored in browser temporary files, so no cache, so no reloading will be required :)
I am sure this will do :)
In my case,in Chrome DevTools settings, just set "Disable cache (while DevTools is open)" doesn't work, it needs to check "Enable CSS source maps" and "Auto-reload generated CSS",which are listed in source group, to make this cache issue go away.