Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to force Chrome browser to reload .css file while debugging in Visual Studio?

People also ask

How do I force a CSS file to reload?

In Chrome, you can do a hard reload by opening the console (F12 key) and then right-clicking on the reload button to get a menu with additional reload options.

How do I refresh CSS in Chrome?

For Windows in Chrome or Edge, the keyboard shortcut Ctrl + F5 (or Ctrl + Reload) refreshes. For Mac, hold Cmd-Shift-R or Shift-Reload.

How do you force browser to update JS and CSS files cache after deploy?

It works, all the time, for everyone. But, if you're not using it, and you just need to reload that one CSS or JS file occasionally in your own browser... just open it in its own tab and hit SHIFT-reload (or CTRL-F5)!


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". enter image description here


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.


Press SHIFT+F5.

It is working for me with Chrome version 54.