I'm hosting an ASP.NET website on Local IIS (not IIS Express), and as soon as I save a change to a .css file in Visual Studio, the change immediately appears in browser windows that use that file (or after mousing over the window in Chrome), without clearing caches and refreshing.
Why do the changes appear immediately?
Opening the .css file itself (not a page using the file) in the browser shows a more expected result: saving the file in Visual Studio does not change what I see in the browser until I refresh the .css file.
As it turns out, I had Browser Link enabled in Visual Studio, and with it, CSS Auto-Sync. This opens up a port on the local machine and uses SignalR to communicate with the browser window about 400 times per second, including any CSS changes needed.
For more information, see these topics:
.net localhost website consistently making get arterySignalR/poll?transport=longPolling&connectionToken= calls
How can I disable __vwd/js/artery in VS.NET 2013?
This probably happens due to caching. when you open the css itself, it retrieves a new copy from the server, but when you open a page that uses the css file, the css file is being cached as the page's resource and the browser just shows the cached resources until you force it to reload them.
a trick i learned to fix the issue, is to link the css file to the aspx page and include a random query string to the linking, that way it tricks the browser to think that its a new resource and reload it from the server anyway.
like this:
<link href="../stylesheets/MyCSS.css?<%=DateTime.Now%>"
rel="stylesheet" type="text/css" />
we use the aspx preprocessor directive <%=DateTime.Now%> to append the current time as a query string, to ensure the link is always different.
Dont forget the question mark between the css filename and the preprocessor directive
Related
What tool/editor do you recommend to (live) test your local CSS changes against an externally hosted site?
A site lives on a domain.test (no server access), and I need to write extensive CSS overrides to reskin the entire site. All changes will be in a single CSS file with no preprocessor.
The ideal setup is using the comfort of my regular code editor (Visual Studio Code) and having the site open in a browser and have the CSS auto-refresh as I save my CSS changes in a local directory.
It's a big site, so I'm open to setting up a complex setup rather than relying on testing edits using browser inspect mode or mounting CSS files using Firefox.
:: I can inject JS script/library to the site if it helps with my setup.
Bonus: If I can do that for Vanilla JS too.
I would do it as follows with ModHeader and ScriptAutoRunner (chrome extensions).
With ModHeader replace the site's CSS and JS to local files using the "Redirect URL" function. (If necessary use ScriptAutoRunner to inject JS).
In one of these JS files create a rule to download every 2 seconds via ajax (any other way) your local files and check if there is equality with the last request or not. If the file has changed then reload the page (to update).
I know there are some tools that show CSS changes in real time without you having to reload, but I don't use them and the way I mentioned you can also make them run when the JS is updated.
I'm having some issue with a django app and it's CSS file refreshing. Basically I can see that the changes I make in my file are identified and copied in the root folder of my website, however when I open up the web browser that change is not being displayed at all:
I am using Firefox as a browser however this issue happens also on Chromium browser
If you have setup everything well in your settings.py file then your best option is to disable caching form your developer panel.
I had similar issues when I make changes in css and they are not updated when i refresh my browser. This is because the browser is keeping a cache of the css file and its not being updated for some reason.
So according to this post,you can disable caching
I have an issue where the CSS is not rendering properly when I compile the MVC project and view it on [https://localhost/MyApp.] The buttons, and background image are not showing up. It worked one time, then for some reason it stop working. Something with the pages not caching? I used firebug to check to see if the pages were missing, and no errors were found. Something in Visual Studio 2010 settings need changing or IIS?
However, when I publish it to an individual website, instead of in the (default web site) area, using [https://localhost:444] website I setup in IIS 7.5, the css seem to render fine.
What is the problem?
One common problem that occurs on MVC 4 websites is difference between release and debug when you have css bundles. It does not have to be your case, but you have the symptoms.
I will explain on an example.
If you have bundle which looks like this:
var styles = new StyleBundle("~/Content/css").Include(
"~/Content/toastr.css",
"~/Content/flags/stylesheets/flags16.css",
"~/Content/flags/stylesheets/flags32.css",
"~/Content/Site.css")
And in flags16.css you have:
background:url('flags/images/flags16.png');
Which uses file in ~Content/flags/images/flags16.png
That will work in release mode (compilation debug="false" in web.config), because all of your css files in bundle will be served as 1 file located at ~/Content/css with relative path 'flags/images/flags16.png' pointing at correct file.
However, in debug mode, ASP.NET MVC will disable minification, and if you used #Styles.Render("~/Content/css") inside your view, it will render link to every one of your files contained in a bundle, so there will be a:
<link href="/WorkOrders.Web/Content/flags/stylesheets/flags16.css" rel="stylesheet">
And from that path, relative path to image is not ok, so images in flags16.png will not be rendered.
One way to solve this, you need to move your .css file which contains references to images to the location where bundle is pointing (~/Content in this case), so it will have same path when it is served minified and raw.
UPDATE As your app is not mvc4, and you have problems when your app is not in the root of your web site (i.e. when it is in localhost/myapp) then you need to check paths in references to your pictures. It is possible that you referenced them absolutely ('/somepath/mypic.png'), and when your app is in localhost/MyApp, path needs to be localhost/MyApp/somepath/mypic.png. You can solve that by replacing path with #Url.Content(~/somepath/mypic.png), if you are using it from cshtml. If path is in css, then you need to put relative path to your pictures.
I have just been battling with the same problem - images, scripts and css not being found or rendered. (Visual Studio 2013, Windows 8.1. Project moved across from Visual Studio 2010.)
The problem was caused by a line in Web.config:
<mimeMap fileExtension=".mp4" mimeType="video/mp4" />
It seems that because the IIS Express application.host file already contained this mimeMap definition, IIS Express couldn't cope with it being defined again.
Removing this line from Web.config completely solved the problem.
It looks like your web site is configured to use SSL. Except that when running locally you probably do not have a valid SSL certificate which is trusted by a certification authority and the client browser is refusing to download the static resources. One way to fix that is to add the address as trusted. So copy paste the url to some of your CSS files in your browser address bar:
https://localhost/MyApp/Content/Main.css
and you will see a warning about the invalid certificate that you could ignore by adding an exception to your browser. Hit Ctrl+F5 to force a refresh once the exception is added and your application should start working properly.
When I had this problem I found that all of my CSS and Script files were encountering a HTTP 500 error when they were being downloaded in the browser (Firefox 33.0.2).
Killing the instance of my browser in the Task Manager and then starting afresh fixed the issue for me.
I'm currently editing some html/css within a aspx file inside of Visual Studio 2010. I'm using Chrome as my browser. When I make changes inside of Visual Studio and save/ctrl + F5 to run it frequently fails to load the new updated .css file due to pulling old cached versions of the CSS.
I've used visual studio as my primary HTML editor before but when I work with pure html/css files I just save and refresh the file in chrome and it will refresh the updated css 100% of the time. I've only started to experience this problem when working with aspx files and running things via ctrl + f5. Anyone have any ideas of how I can fix this?
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\Chris\AppData\Local\Google\Chrome\Application\chrome.exe)
In the Command line arguments box put -incognito
If you would like the browser to open a specific page, then you will need to set the Visual Studio Development Server to use a specific port (ie 4066) then change your command line arguments to include that address, for example: -incognito localhost:4066/Default.aspx
Incognito Mode should prevent caching between sessions and even tabs.
in order to find the server spec. i've created a file in the root dir in my website called spec.htm and entered this content as i was offered by another user:
<html>
<head>
<title></title>
</head>
<body>
#ServerInfo.GetHtml()
</body>
</html>
but i only get a copy of the code in my browser and it doesn't run it,
what the problem might be?
EDIT: i think that the problem is that i'm not using IIS.
is there a way to do so without using IIS?
thanks
Please see the following article
http://www.asp.net/webmatrix/tutorials/14-introduction-to-debugging
The ServerInfo helper is a diagnostic tool that gives you an overview of information about the web server environment that hosts your page. It also shows you HTTP request information that is sent when a browser requests the page. The ServerInfo helper displays the current user identity, the type of browser that made the request, and so on. This kind of information can help you troubleshoot common issues.
Create a new web page named ServerInfo.cshtml.
At the end of the page, just before the closing tag, add the following highlighted code.
#ServerInfo.GetHtml()
Note, it appears as though this is designed to run in IIS only and not on Linux / Apache servers.
Note, this is a RAZOR syntax so your system needs to be able to run Razor by installing the WebMatrix
#ServerInfo.GetHtml() is a Razor view engine syntax. Try saving your file as .cshtml or .vbhtml
The problem is that your webserver is not set up to serve HTML files through the ASP.NET interpreter. Change the extension to .aspx (i.e., use the same code, but call it spec.aspx).
Are you setting the Content-Type header correctly. If not set to text/html or similar, the browser or framework may set the content-type to text/plain which will not render the html at all.
You can check this in Firebug in the Net tab, expanding the response that is associated with the page you are serving, and looking in the Headers tab. If the Content-Type header is anything besides text/html or text/xhtml, then you need to find a way to make your web server set that header properly
let me guess its just showing up "#ServerInfo.GetHtml()" on a webpage. This does nothing if you put it simply in a body tag of a html page. If you are running IIS make sure you are saving as .aspx and not .html
See "yourhtmlsource.com/myfirstsite/myfirstpage.html"
I hope I am understanding the question and this helps. I found it on the web page given above.
When you double-click a file on your computer’s desktop, the computer knows what program to open the file in by checking the file’s “extension”. A txt file will open in a text editor.
You need to give your document a file extension of ”.html”, which will tell it to open the file in your web browser, such as Internet Explorer, Firefox or Safari.
Right now you should be editing your HTML page in a text editor, which normally saves files with the extension “.txt”. We want to make it save in “.html”. In your text editor click File → Save As…. If you use Microsoft Windows, there will be a box labelled “save as type”; change it to “all files .”. This means that you can save the data (in this case, some text) into any format. Now type in the name index.html for your file and click save. Ex: file.txt becomes file.html.