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.
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.
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!
Press SHIFT+F5.
It is working for me with Chrome version 54.
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.
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
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
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.
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:
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.
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);
I solved by this simple trick.
<script type="text/javascript">
var style = 'assets/css/style.css?'+Math.random();;
</script>
<script type="text/javascript">
document.write('<link href="'+style+'" rel="stylesheet">');
</script>
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:
<link href="/styles/template_<%
Response.Write( System.DateTime.UtcNow.ToString("ddmmyyhhmmss")); %>"
type="text/css" />
(No styles folder it's just a name part of the pattern)
Output code as:
<link href="/styles/template_285316115328"
rel="stylesheet" type="text/css">
Redirect as:
(R:1 = template)
/template.css
Only the explanation is long.
Hold down Ctrl and click the Reload button. Or, Hold down Ctrl and press F5. just open the Chrome Dev Tools by pressing F12. Once the chrome dev tools are open, just right click on the refresh button and a menu will drop down.
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.
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.
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!
Ctrl + F5
Shift + F5
Both work
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.
One option would be to add your working directory to your Chrome "workspace" 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 "Sources" tab of Devtools:
Click on the "Filesystem" tab in the file browser sidebar, then click the +Plus sign button to "Add folder to workspace" - 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 "Filesystem" 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.
Chrome/firefox/safari/IE will reload the entire page by these shortcuts
Ctrl + R (OR) Ctrl + F5
Hope it may helps you!.
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.
I'm trying to make a web application using asp.net 4.0 and VS 2012 and for some reason my style sheet declarations are stock to the first version of the site were they weren't inside a folder. now that they are inside a folder, the declarations are still rendering and pushing to the browser as:
<link href="global.css" rel="stylesheet" type="text/css" />
Whereas they should be (and are inside VS):
<link href="style/global.css" rel="stylesheet" type="text/css" />
I really don't know whats going on, am I doing something wrong? I have built, rebuilt, and clean the solution as well as pressing the refresh button (the button, f5, control f5 in IE9, Firefox, and chrome) fifty times.
I had a similar issue. It was a browser caching issue. In IE go to Tools | Internet Options | General Tab. Click on Browsing history "Settings". Set it to "Check for new version of stored pages" to "Every time I visit the page".
This may be due to caching in the browser. What I do when developing web sites is disable the browser cache. Then every time it will load the modified files.
In Google chrome you can use Incognito Window when testing your changes.
Just before I thought I would restart, I tried renaming the style sheet. This solved it for me. Appears to be some caching problem indeed.
In both chrome and Firefox, the browser doesn't load the full stylesheet after a change is made. I have to refresh the browser twice. The styles are all in one stylesheet, so this makes no sense to me.
The main culprit is that ul elements set to display:none are over-ridden by the user agent styles of ul,menu display block. However, if I refresh again, then my entire stylesheet loads. All my files and folders are stored on the work server. Is it a caching problem?
To prevent caching of css files you can append a querystring. I do this when we update our main website.
<link rel="stylesheet" type="text/css" href="http://mysite.com/all.css?v=1.3">
I increment this whenever we do a release. If you are just testing your web server you can put in some dynamic code that generates the current time.
In Chrome, you can disable the cache when you're developing. Open the developer tools (F12, or Ctrl-Shift-J), click on the Gear at the very bottom right, and check "Disable cache".
So here's an interesting conundrum.
I have a page, default.aspx. It has a LINK tag to a stylesheet, located in the CSS subfolder:
<link type="text/css" rel="Stylesheet" href="Css/Logon.css" media="all" />
The folder structure is as follows:
[Root]
[CSS]
[Images]
[Logon]
No big surprises. (Our default.aspx page is our logon page. Again, no big surprises.)
Here's the problem. If you launch the page in IIS, the page renders beautifully. CSS loads, fonts appear, everything is positioned appropriately, and lions are laying down with lambs.
If you view the page in WebDev, the stylesheet isn't loaded. Since it specifies all the images, fonts, and positioning, everything is black on white, in Times New Roman, slammed left against the window border. Dogs are chasing cats in circles and causing traffic accidents. Chaos ensues.
Why? How do I fix it? What information do I need to provide to reach a happy conclusion?
P.S. I am aware of the URL differences between running it in IIS and Webdev, but the differences don't seem to make much sense to me, due to one simple fact: the path to the style sheet is relative to the location of the default.aspx page. The stylesheet isn't being loaded at all. I can see this because there's no font styling at all.
My recommendation would be to use Firefox to load the page. With the Firebug add-on installed you can view the requests for the CSS files in the Net panel. This will allow you to at least see the path that is being used for the CSS file.
If you have not used the network monitoring feature in Firebug before you may want to go here:
http://getfirebug.com/network
We eventually discovered the cause of this problem using Fiddler: HTTP 401 (Unauthorized). A little more research uncovered that we needed to add explicit <location/> entries for the stylesheet, and all the images it referenced, to our web.config file.
When I make any changes to my CSS file, the changes are not reflected in the browser. How can I fix this?
The fix is called "hard refresh"
http://en.wikipedia.org/wiki/Wikipedia:Bypass_your_cache
In most Windows and Linux browsers: Hold down Ctrl and press F5.
In Apple Safari:
Hold down ⇧ Shift and click the Reload toolbar button.
In Chrome and Firefox for Mac:
Hold down both ⌘ Cmd+⇧ Shift and press R.
Try opening the style sheet itself (by entering its address into the browser's address bar) and pressing F5. If it still doesn't refresh, your problem lies elsewhere.
If you update a style sheet and want to make sure it gets refreshed in every visitor's cache, a very popular method to do that is to add a version number as a GET parameter. That way, the style sheet gets refreshed when necessary, but not more often than that.
<link rel="stylesheet" type="text/css" href="styles.css?version=51">
A good way to force your CSS to reload is to:
<link href='styles.css?version=1' rel='stylesheet'></link>
And then just increment the version number as you change your CSS. The browser will then obey. I believe Stack Overflow uses this technique.
I always use Ctrl+Shift+F5 out of habit, it should force a full-refresh including by-passing any http proxies you may be going through.
I had this issue. Turns out I completely forgot I had CloudFlare setup on the domain I was live testing on.
CloudFlare caches your JavaScript and CSS. Turned on development mode and BAM!
Do Shift+F5 in Windows. The cache really frustrates in this kind of stuff
This sounds like your browser is caching your css. If you are using Firefox, try loading your page using Shift-Reload.
Having this problem before I found out my own lazy solution (based on other people suggestions). It should be helpful if your <head> contents go through php interpreter.
To force downloading file every time you make changes to it, you could add file byte size of this file after question mark sign at the end.
<link rel="stylesheet" type="text/css" href="styles.css?<?=filesize('styles.css');?>">
EDIT: As suggested in comments, filemtime() is actually a better solution as long as your files have properly updated modify time (I, myself, have experienced such issues in the past, while working with remote files):
<link rel="stylesheet" type="text/css" href="styles.css?<?=filemtime('styles.css');?>">
The Ctrl + F5 solusion didn't work for me in Chrome.
But I found How to Clear Chrome Cache for Specific Website Only (3 Steps):
As the page is loaded, open Chrome Developer Tools (Right-Click > Inspect) or (Menu > More Tools > Developer Tools)
Next, go to the Refresh button in Chrome browser, and Right-Click the Refresh button.
Select "Empty Cache and Hard Refresh".
Since I found this thread having the same problem, 10 YEARS later, I'll add my own solution too. I use PHP most of the time, and rather than requiring the user to press unusual buttons to refresh the page, or myself to remember to bump a version number embedded in a link, I used the filemtime() function to get the modification time of the css file (as a unix timestamp), and then use THAT number as the parameter.
$FILE_TIME = filemtime("main.css");
$CSS_LINK = "main.css?version=$FILE_TIME";
While results in a URL like:
http://example.com/blah/main.css?version=1602937140
This entirely disables caching, since every time the page is refreshed, it will believe it needs to grab the CSS file again, changed or not... but that's far less frustrating than forgetting to manually update this trick and wasting time wondering why it isn't right. You can always remove it from a production server.
If you are using plain HTML, you could probably engineer a javascript wrapper or some such, but that's probably more trouble than it's worth.
Have you tried renaming the new version of your CSS to CSSv2.css and then directing your page to use that? If that solves the stale-file issue, then you're just experiencing non-refreshing files. If not, you've got bigger issues.
If you're using ASP.NET web forms, make sure that you are using the right theme:
I just spent about an hour trying to solve this!
Is this a local custom CSS file? Is this your website? Maybe you should clear your cache.
Also the last CSS declaration takes precedence.
I faced the same problem. Renaming the file worked for me.
The reason this occurs is because the file is stored in the "cache" of the browser – so there is no need for the browser to request the sheet again. This occurs for most files that your HTML links to – whether they're CDNs or on your server, for example, a stylesheet. A hard refresh will reload the page and send new GET requests to the server (and to external b if needed).
You can also empty the caches in most browsers with the following keyboard shortcuts.
Safari: Cmd+Alt+e
Chrome and Edge: Shift+Cmd+Delete (Mac) and Ctrl+Shift+Del (Windows)