Active1 year, 6 months ago
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.
Force DOM redraw/refresh on Chrome/Mac. Ask Question 197. This is the one that worked for me while trying to force Chrome to recalculate values for myElement.getBoundingClientRect(), which were being cached, likely for optimization / performance purposes. I simply added a zero millisecond timeout for the function that adds the new.
I have tried:
- CTRL / F5
- In Visual Studio 2012,Go to project properties, Web tabChoose Start External Program in the Start Action sectionPaste or browse to the path for Google Chrome (Mine is C:UsersxxxAppDataLocalGoogleChromeApplicationchrome.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.
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.
duyn9uyen
duyn9uyenduyn9uyen3,2851111 gold badges3131 silver badges4444 bronze badges
22 Answers
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).
ansonanson3,51322 gold badges1818 silver badges2525 bronze badges
To force chrome to reaload css and js:
Windows option 1: CTRL + SHIFT + R
Windows option 2: SHIFT + F5
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.
Bart CalixtoBart Calixto13.3k99 gold badges6464 silver badges105105 bronze badges
[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'.
Deepak JoyDeepak Joy3,22644 gold badges1818 silver badges2727 bronze badges
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.
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 siteThis 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 :)
MarmiKMarmiK4,73344 gold badges2929 silver badges4242 bronze badges
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.
gustavHgustavH
Press SHIFT+F5.
It is working for me with Chrome version 54.
zx48517.3k1313 gold badges3232 silver badges4848 bronze badges
user2580062user2580062
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!
Optimaz IDOptimaz ID
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.
Community♦
AlexGAlexG5,17033 gold badges3030 silver badges4545 bronze badges
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
Logic IndustryLogic Industry
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.
ivanhoeivanhoe3,04211 gold badge1616 silver badges1919 bronze badges
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:
10.5k1111 gold badges7070 silver badges8282 bronze badges
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.
Evgeni NabokovEvgeni Nabokov1,16811 gold badge1717 silver badges2929 bronze badges
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.
Martin VsetickaMartin Vseticka18.2k2020 gold badges102102 silver badges176176 bronze badges
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.
Note: I reserve the use of undercase to separate the name from the random number. Could be anything else.
Example:
(No styles folder it's just a name part of the pattern)
Output code as:
Redirect as:
(R:1 = template)
/template.css
Only the explanation is long.
Jan AndersenJan Andersen
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.
RichardRichard
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:
**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.
Shlok NatarajanShlok Natarajan
Shahid ChaudharyShahid Chaudhary43211 gold badge88 silver badges1919 bronze badges
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!
AnarachAnarach24322 gold badges88 silver badges2929 bronze badges
ɢʀᴜɴᴛ19.3k1313 gold badges4848 silver badges6767 bronze badges
Ashwin BalaniAshwin Balani
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.
DonDon
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.
Rodolfo PertuzRodolfo Pertuz
Chrome/firefox/safari/IE
will reload the entire page by these shortcutsCtrl + R (OR) Ctrl + F5
Hope it may helps you!.
Lead DeveloperLead Developer
Not the answer you're looking for? Browse other questions tagged cssvisual-studiogoogle-chromecaching or ask your own question.
Active1 year, 6 months ago
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 tabChoose Start External Program in the Start Action sectionPaste or browse to the path for Google Chrome (Mine is C:UsersxxxAppDataLocalGoogleChromeApplicationchrome.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.
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.
duyn9uyen
duyn9uyenduyn9uyen3,2851111 gold badges3131 silver badges4444 bronze badges
22 Answers
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).
ansonanson3,51322 gold badges1818 silver badges2525 bronze badges
To force chrome to reaload css and js:
Windows option 1: CTRL + SHIFT + R
Windows option 2: SHIFT + F5
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.
Bart CalixtoBart Calixto13.3k99 gold badges6464 silver badges105105 bronze badges
[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'.
Deepak JoyDeepak Joy3,22644 gold badges1818 silver badges2727 bronze badges
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.
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 siteThis 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 :)
MarmiKMarmiK4,73344 gold badges2929 silver badges4242 bronze badges
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.
gustavHgustavH
Press SHIFT+F5.
It is working for me with Chrome version 54.
zx48517.3k1313 gold badges3232 silver badges4848 bronze badges
user2580062user2580062
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!
Optimaz IDOptimaz ID
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.
Community♦
AlexGAlexG5,17033 gold badges3030 silver badges4545 bronze badges
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
Logic IndustryLogic Industry
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.
ivanhoeivanhoe3,04211 gold badge1616 silver badges1919 bronze badges
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:
10.5k1111 gold badges7070 silver badges8282 bronze badges
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.
Evgeni NabokovEvgeni Nabokov1,16811 gold badge1717 silver badges2929 bronze badges
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.
Martin VsetickaMartin Vseticka18.2k2020 gold badges102102 silver badges176176 bronze badges
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.
Note: I reserve the use of undercase to separate the name from the random number. Could be anything else.
Example:
(No styles folder it's just a name part of the pattern)
Output code as:
Redirect as:
(R:1 = template)
/template.css
Only the explanation is long.
Jan AndersenJan Andersen
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.
RichardRichard
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:
**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.
Shlok NatarajanShlok Natarajan
Shahid ChaudharyShahid Chaudhary
43211 gold badge88 silver badges1919 bronze badges
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!
AnarachAnarach24322 gold badges88 silver badges2929 bronze badges
ɢʀᴜɴᴛ19.3k1313 gold badges4848 silver badges6767 bronze badges
Ashwin BalaniAshwin Balani
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.
DonDon
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.
Rodolfo PertuzRodolfo Pertuz
Chrome/firefox/safari/IE
will reload the entire page by these shortcutsCtrl + R (OR) Ctrl + F5
Hope it may helps you!.
Lead DeveloperLead Developer