I'm using IE 8 on Vista, and everytime I change a javascript file and then start debugging, I have to hit Ctrl+F5 to have it reload my javascript. Is there any way to make it automatically reload javascript when I start debugging, but not lose the performance gains when just browsing the net?
Yeah yeah I know you probably don't like IE, but keep in mind the question isn't "What's the best browser?".
Add a string at the end of your URL to break the cache. I usually do (with PHP):
<script src="/my/js/file.js?<?=time()?>"></script>
So that it reloads every time while I'm working on it, and then take it off when it goes into production. In reality I abstract this out a little more but the idea remains the same.
If you check out the source of this website, they append the revision number at the end of the URL in a similar fashion to force the changes upon us whenever they update the javascript files.
Paolo's general idea (i.e. effectively changing some part of the request uri) is your best bet. However, I'd suggest using a more static value such as a version number that you update when you have changed your script file so that you can still get the performance gains of caching.
So either something like this:
<script src="/my/js/file.js?version=2.1.3" ></script>
or maybe
<script src="/my/js/file.2.1.3.js" ></script>
I prefer the first option because it means you can maintain the one file instead of having to constantly rename it (which for example maintains consistent version history in your source control). Of course either one (as I've described them) would involve updating your include statements each time, so you may want to come up with a dynamic way of doing it, such as replacing a fixed value with a dynamic one every time you deploy (using Ant or whatever).
When you work with web page or javascript file you want it to be reloaded every time you change it. You can change settings in IE 8 so the browser will never cache.
Follow this simple steps.
If you are looking to just do this on YOUR browser (a.k.a. not forcing this on your users), then I would NOT set your code to not utilize the cache. As José said, there is a performance loss.
And I wouldn't turn off caching on IE altogether, because you lose that performance gain for every website you visit. You can tell IE to always refresh from the server for a specific site or browsing session:
Or, for the keyboard-shortcut-philes (like myself) out there..
NOTE OF CAUTION : Having said this... Keep in mind that anytime you develop/test in a different way than the site will be viewed in production, you run the risk of getting mixed results. A good example is this caching issue. We found an issue where IE was caching our Ajax calls and not updating results from a GET method. If we HAD disabled caching in IE, we would have never seen this problem in development, and would have deployed it to production like this.
If you are in IE11, you can tell IE to always refresh from the server for a specific browsing session with IE Developer Tools.
(Sorry for french capture)
This should do the trick for ASP.NET. The concept is the same as shown in the PHP example. Since the URL is different everytime the script is loaded, neither browser of proxy should cache the file. I'm used to put my JavaScript code into separate files, and wasted a significant amount of time with Visual Studio until I realized that it wouldn't reload the JavaScript files.
<script src="Scripts/main.js?version=<% =DateTime.Now.Ticks.ToString()%>" type="text/javascript"></script>
Full example:
<%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true"
CodeBehind="Default.aspx.cs" Inherits="WebApplication1._Default" %>
<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
<script src="Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript"></script>
<script src="Scripts/main.js?version=<% =DateTime.Now.Ticks.ToString()%>" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
myInit();
});
</script>
</asp:Content>
Obvously, this solution should only be used during the development stage, and should be removed before posting the site.
Add a date of modification of js file at the end of your URL. With PHP it would look something like this:
echo '<script type="text/javascript" src="js/something.js?' . filemtime('js/something.js') . '"></script>';
When your script will be reloaded every time you update it.
If you are running ASP.Net, check out the Bundling and Minification module available in ASP.Net 4.5.
http://www.asp.net/mvc/tutorials/mvc-4/bundling-and-minification
You can declare a "bundle" that points to your javascript file. Every time your file changes, it will generate a new querystring suffix... but will only do so when the file changes. This makes it super simple to deploy updates, because you don't even have to think about updating your tags with new version numbers.
It can also bundle multiple .js files together into one file, and minify them, all in one step. Ditto for css.
In javascript I think that it is not possible, because modern browsers have a policy on security in javascripts.. and clearing the cache is a very violating one.
You can try to add
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
In your header, but you will have performance loss.
To eliminate the need to repeatedly press F5 in an IE tab while developing a website, use ReloadIt.
For each webpage displayed in IE, you can configure a filename, a directory, or a set of them. If any change occurs in any of those configured paths, ReloadIt refreshes the IE tab. A simple tool. It just works.
This will reload everything, not just javascript.
