duyn9uyen duyn9uyen - 1 year ago 136
CSS Question

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

I'm currently editing a .css file inside of Visual Studio 2012 (in debug mode). I'm using Chrome as my browser. When I make changes to my application's .css file inside of Visual Studio and save, refreshing the page will not load with the updated change in my .css file. I think the .css file is still cached.

I have tried:

  1. CTRL / F5

  2. In Visual Studio 2012,
    Go to project properties, Web tab
    Choose Start External Program in the Start Action section
    Paste or browse to the path for Google Chrome (Mine is C:\Users\xxx\AppData\Local\Google\Chrome\Application\chrome.exe)
    In the Command line arguments box put -incognito

  3. Used the Chrome developer tools, click on the "gear" icon, checked "Disable Cache."

Nothing seems to work unless I manually stop debugging, (close out of Chrome), restart the application (in debug).

Is there any way to force Chrome to always reload all css changes and reload the .css file?


1. In-line style changes in my .aspx file are picked up when I refresh. But changes in a .css file does not.
2. It is an ASP.NET MVC4 app so I click on a hyperlink, which does a GET. Doing that, I don't see a new request for the stylesheet. But clicking F5, the .css file is reloaded and the Status code (on the network tab) is 200.

Answer Source

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).