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

Question

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    CTRL   F5  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 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   Update  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

User · Answer

Just had this problem where one person running Chrome (on a Mac) suddenly stopped loading the CSS file. CMD + R did NOT work at all. I don't like the suggestions above that force a permanent reload on the production system.

What worked was changing the name of the CSS file in the HTML file (and renaming the CSS file of course). This forced Chrome to go get the latest CSS file.

User · Answer

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

User · Answer

I know it s an old question  but if anyone is still looking how to reload just a single external css js file  the easiest way now in Chrome is    Go to Network tab in DevTools  Right click on the resource and select Replay XHR to repeat the request   Make sure that the Disable cache option is selected to force the reload

User · Answer

i had faced same problem here  but I sure my resolution is better than all above examples just do this    Pull up the Chrome developer console by pressing F12 Right click on the reload button at the top of the browser and select  Empty Cache and Hard Reload     That s it

User · Answer

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  lt   time     gt   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

User · Answer

Why is it needed to refresh the whole page  Just refresh only css files without reloading the page  It is very helpful when  for example  you have to wait a long response from DB  Once you  get data from DB and populate the page  then edit your css files and reload them in Chrome  or in Firefox   To do that you need to install CSS Reloader extension  Firefox version is also available

User · Answer

Easiest way on Safari 11 0 macOS SIERRA 10 12 6  Reload Page From Origin  you can use help to find out where in the menu it is located  or you can use the shortcut option alt    command   R

User · Answer

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

User · Answer

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    lt meta http-equiv  cache-control  content  max-age 0    gt   lt meta http-equiv  cache-control  content  no-cache    gt   lt meta http-equiv  expires  content  0    gt   lt meta http-equiv  expires  content  Tue  01 Jan 1990 12 00 00 GMT    gt    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

User · Answer

One option would be to add your working directory to your Chrome  quot workspace quot  which allows Chrome to map local files to those on the page  It will then detect changes in the local files  and update the page in real-time  This can be done from the  quot Sources quot  tab of Devtools   Click on the  quot Filesystem quot  tab in the file browser sidebar  then click the  Plus sign button to  quot Add folder to workspace quot  - you will be prompted with a banner at the top of the screen to allow or deny local file access   Once allowed  the folder will appear in the  quot Filesystem quot  tab on the left  Chrome will now attempt to associate each file in the filesystem tab with a file in the page  Sometimes you will need to reload the page once for this to function correctly  Once this is done  Chrome should have no trouble picking up local changes  in fact you won t even need to reload to get the changes in many cases  and you can make edits to the local files directly from Devtools  which is extremely useful for CSS  it even comments out CSS lines when you toggle the checkboxes in the Styles tab   More information on Workspaces in Chrome

User · Answer

Ctrl   F5  Shift   F5  Both work

User · Answer

You can copy paste this script into Chrome console and it forces your CSS scripts to reload every 3 seconds  Sometimes I find it useful when I m improving CSS styles   var nodes   document querySelectorAll  link       forEach call nodes  function  node        node href         ref 0       var i   0  setInterval function          i            forEach call nodes  function  node            node href   node href replace          ref  0-9          ref     i               console log  refreshed      i     3000

User · Answer

Press SHIFT F5   It is working for me with Chrome version 54

User · Answer

Chrome firefox safari IE will reload the entire  page by these shortcuts  Ctrl   R   OR  Ctrl   F5   Hope it may helps you

User · Answer

I solved by this simple trick     lt script type  text javascript  gt    var style    assets css style css   Math random      lt  script gt    lt script type  text javascript  gt    document write   lt link href    style    rel  stylesheet  gt      lt  script gt

User · Answer

Still an issue    Using parameters like    css something random-value  changes nothing in my customer-support experience  Only name changes works    Another take on the file renaming  I use URL Rewrite in IIS  Sometimes Helicon s Isapi Rewrite    Add new rule     Name  lame-chrome-fix    Pattern  styles   w     d     Rewrite URL    R 1  css   Note  I reserve the use of undercase to separate the name from the random number  Could be anything else    Example    lt link href   styles template  lt    Response Write  System DateTime UtcNow ToString  ddmmyyhhmmss       gt    type  text css    gt     No styles folder it s just a name part of the pattern   Output code as    lt link href   styles template 285316115328   rel  stylesheet  type  text css  gt    Redirect as    R 1   template    template css  Only the explanation is long

User · Answer

If you are using SiteGround as your hosting company and none of the other solutions have worked  try this   From the cPanel  go to  SITE IMPROVEMENT TOOLS  and click  SuperCacher   On the following page  click the  Flush Cache  button

User · Answer

If you are using Sublime Text 3  using a build system to open the file opens the most current version and provides a convenient way to load it via  CTRL   B  To set up a build system that opens the file in chrome    Go to  Tools  Hover your mouse over  build system   At the bottom of the list brought up  click  New Build System     In the new build system file type this     cmd      C   Program Files  x86   Google  Chrome  Application  chrome exe     file         provided the path stated above in the first set of quotes is the path to where chrome is located on your computer  if it isn t simply find the location of chrome and replace the path in the first set of quotes with the path to chrome on your computer

User · Answer

Current version of Chrome  55 x  does not reload all resources when you reload the page  Command   R  - and that is not useful for debugging the  css file   Command   R works fine if you want to debug only the  html   php   etc files  and is faster because works with local cached resources   css   js   To manually delete browser s cache for each debug iteration is not convenient   Procedure to force reload  css file on Mac  Keyboard Shortcut   Chrome    Command   Shift   R

User · Answer

The most simplest way to achieve your goal is to open a new incognito window in your chrome or private window in firefox which will by default  not cache   You can use this for development purposes so that you don t have to inject some random cache preventing code in your project   If you are using IE then may god help you

User · Answer

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

User · Answer

For macOS Chrome    Open developers tools cmd alt i Click three dots on the top right corner in developers tools Click settings Scroll down to Network  Enable Disable cache  while DevTools is open  see screenshot

User · Answer

I m using Edge Version 81 0 416 64  Official build   64-bit  and its based on the Chromium open source project   Press F12 to get into Dev Tools  Click Network Tab Check Disable cache

User · Answer

With macOS I can force Chrome to reload the CSS file in by doing      SHIFT   R  Found this answer buried in the comments here but it deserved more exposure

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

Examples related to css

Examples related to visual-studio

Examples related to google-chrome

Examples related to caching