Force browser to refresh javascript code while developing an MVC View?

Question

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 Scripts { }.

Currently I am developing with Chrome and I have tried CTRL+F5 & CTRL+SHFT+R which reloads the page, but the alert() I uncommented within the javascript code is still rendering as commented. I also tried going to my localhost through Incognito Mode as well as other Browsers (Firefox, IE) and am getting the same behavior. This is my /Home/Index.cshtml View, which is the default View which loads when the application starts. I have also tried adding some extra HTML text into the page and again the new code is not taking effect/showing.

My current Chrome version is Version 41.0.2272.118 m if anyone has any ideas what might be going on?

---

UPDATE:

I have gone under the Developer Tools => General Settings in Chrome and checked [X] Disable cache (while DevTools is open) and then repeatedly (with DevTools still open) tried CTRL+SHFT+R and CTRL+F5 with the same results of before where my changes are not taking effect.

UPDATE 2:

With DevTools open I have also held the Refresh button down and tried Normal/Hard/and Empty Cache & Hard Reload options all with the same result. For simplicity of testing I added an alert in the below to dispaly as soon as the page loads (and currently no alert comes up):

$(document).ready(function () {
            alert("Test");
            // Other Code/Functions -- No Error showing in Console
});

Answer 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:

Answer 2

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.