Force Browser To Refresh Javascript Code While Developing An Mvc View?

Pretty straight-forward, I'm developing an MVC5 application and have noticed (lately) that my Browser appears to be caching the JavaScript code I have on the view within @section S

Solution 1:

If you are using Bundling from MVC, you have two options to disable caching:

1. Use BundleTable.EnableOptimizations. This instructs the bundling to minify and optimize your bundle even while debugging. It generates a hash in the process, based on the content of the script, so your customers browsers can cache this file for a long time. It will generate a whole different hash the next time your file changes, so your customers can see your changes. The downside is that your script will become unreadable and you won't be able to debug it, so this might not be your best option.
2. Use System.Web.Optimization.BundleTable.Bundles.ResolveBundleUrl("url", true) to resolve your script's URL, the second parameter (true) is requiring a hash to be generated with the URL, thus, preventing caching from your browser when you change the file. This is exactly the same hash generated in the first option, but without minifying.

I created a small demo showing that the second option prevents caching from happening, the trick is getting the hash generated from your script's content without minifying your script.

I created a script file called myscript.js with this content:

$(document).ready(function () {
    alert('a');
});

Then I added this to my BundleConfig.cs:

// PLEASE NOTE this is **NOT** a ScriptBundle
bundles.Add(new Bundle("~/bundles/myscripts").Include(
    "~/Scripts/myscript*"));

If you add a ScriptBundle, you will get a minified response again, since ScriptBundle is just a Bundle using JsMinify transformation (source). That's why we just use Bundle.

Now you can just add your script using this method to resolve the script URL with the hash appendend. You can use the Script.Render

@Scripts.Render(System.Web.Optimization.BundleTable.Bundles.ResolveBundleUrl("~/bundles/myscripts", true))

Or the script tag:

<script src="@System.Web.Optimization.BundleTable.Bundles.ResolveBundleUrl("~/bundles/myscripts", true)"></script>

Either way will generate a URL with a hash to prevent caching:

After editing my file:

Solution 2:

You might want to add a no_cache variable after your script url like:

<scriptsrc="js/stg/Stg.js?nocache=@random_number"></script>

If you manage to put a random number to the place i indicated, the browser will automatically download the latest version of the script after an F5

Solution 3:

A quick trick that solves this problem consists of opening the script file in a new tab, then refresh it on this page. If you happen to have Chrome dev tools open it will even refresh it there.

From dev tool you can even easily right click-open in new tab the script.