Launch a browser to update JavaScript code when developing MVC View?

Question

Quite bluntly, I am developing an MVC5 application and have recently noticed that my browser caches the JavaScript code that I have in the @section Scripts { } view.

I'm currently developing Chrome, and I have tried CTRL+F5 and CTRL+SHFT+R , which reloads the page, but the alert() that I uncommented in javascript code still displays as a comment. I also tried going to my local host through incognito mode, as well as other browsers (Firefox, IE), and I get the same behavior. This is my /Home/Index.cshtml view, which is the default view that loads when the application starts. I also tried adding extra HTML text to the page, and the new code does not take effect / is shown.

My current version of Chrome Version 41.0.2272.118 m , if anyone has any idea what could happen?

---

UPDATE

I went to the "Developer Tools" => "General Settings" section in Chrome and marked [X] Disable cache (while DevTools is open) , and then several times (with DevTools still open) I tried CTRL+SHFT+R and CTRL+F5 with the same results before which my changes were not accepted effect.

UPDATE 2 :

When DevTools is open, I also clicked the Refresh button and tried the Normal / Hard / and Empty Cache and Hard Reload options with the same result. For ease of testing, I added a warning below to figure out as soon as the page loads (and there is currently no warning):

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

Answer 1

If you use Bundling from MVC , you have two options for disabling caching:

• Use BundleTable.EnableOptimizations . This indicates merging to minimize and optimize your package even during debugging. It generates a hash in the process, based on the contents of the script, so your clients' browsers can cache this file for a long time. The next time you modify the file, it will generate a whole different hash so that your customers can see your changes. The downside is that your script will become unreadable and you cannot debug it, so this may not be the best option.
• Use System.Web.Optimization.BundleTable.Bundles.ResolveBundleUrl("url", true) to resolve your URL script, the second parameter ( true ) requires a hash that should be generated using this way, preventing caching from your browser when changing file. This is exactly the same hash generated in the first embodiment, but without an indication.

I created a small demo showing that the second option prevents caching, the trick is getting a hash created from your script contents without decreasing 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 again get a mini-response, since the ScriptBundle is just a Bundle using the JsMinify ( source ) transform. That's why we just use the Bundle .

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

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

Or script tag:

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

In either case, a URL with a hash will be created to prevent caching:

After editing my file:

Answer 2

You might want to add the no_cache variable after the script url:

 <script src="js/stg/ Stg.js?nocache=@random _number"></script> 

If you manage to place a random number in the location I specify, the browser will automatically download the latest version of the script after F5

Answer 3

A quick trick that solves this problem is to open the script file in a new tab and then update it on this page. If you find that Chrome dev tools are open, it will even update it there.

From the Dev tool, you can easily right-click on a new script tab.