JavaScript Code Change Is Not Be Applied

Article
2020-06-02

Question

_{Tuesday, June 2, 2020 1:51 PM}

As I start to learn how to write a Blazor WebAssembly app that also contains TypeScript and JavaScript code, I am running into a problem in which changes in my JS code are not being reflected in the localhost version when I run the debugger. I am attaching 2 screenshots to show the problem, one showing the revised code (see line 26 that contains an 8 as the argument passed to BBDetail_GetData ) and the other showing the localhost code that still shows 9 as the argument (which I replaced with 8).

I am using VS Community 2019 v16.6.0 and checked the Progressive Web Application setting when I created the app. The JS code is in a a folder called js within the wwwroot folder and the following html statement is in the <body> of the html in the index.html file: <script src="js/ME JS Interop Native.js"></script>.

Is there something I need to do to get the revised code to replace the prior code when running the debugger?

Thanks. Steve

P.S. I just found this StackOverflow posting (https://stackoverflow.com/questions/3951187/javascript-file-not-updating-no-matter-what-i-do) that pointed out how I can do a "Hard Reload" by holding a click on the Chrome refresh icon. That fixed the problem. But surely I won't have to do that every time I change my code. Isn't there a way for force a Hard Reload on every Build?

All replies (8)

_{Tuesday, June 9, 2020 7:28 PM ✅Answered}

Dylan -

Thanks for what I think may be the last bit of help I will need on this issue. I enjoyed the cache control article you cited. Very helpful to have.

After using the technique of renaming the JS file after making a change to force it to be loaded in place of the original one (the technique of course worked), I stumbled on to what may have been the source of my problem. While trying to test invoking Blazor methods from JS with and without passing arguments, I programmed 3 JS functions with the same name but with different arguments being passed, and then commented out 2 of them while testing the third. In hindsight, it appears the failure to reload happens when I merely changed which 2 functions are commented out, but without making any other changes in the code. I have now started to make a minor change in the code itself every time I switch functions (I change a string constant), and this seems to trigger the changed file to be loaded. Assuming that is what's happening, it's a strange behavior. Perhaps you could write a simple Blazer WebAssembly app to try the same thing in your environment. In the meantime, I will continue to make a "forcing" code change and see if that keeps working. I will come back and post anything else I may learn.

Thank you very much for your patience in trying to help me solve this problem. Your suggestions are what eventually led me to stumble on this apparent fix.

Steve

_{Tuesday, June 2, 2020 2:57 PM | 1 vote}

Try another mentioned technique:

* <script src="js/ME JS Interop Native.js**?v=1**"></script>*

If you modify and save the file and also change ‘v=1’ to ‘v=2’, then the browser will load the new version of the file.

To automate this, add some code that generates a random number or uses current time for v. (I. e. the browser should see a different, dynamically generated URL after each change of the script).

_{Tuesday, June 2, 2020 3:39 PM}

Viorel -

Thanks for the quick reply. I saw this suggestion when originally looking for a fix, but ignored it because I didn't understand it.

On the first part (using ?v=1, etc.), are you saying that each time I modify the file, it is automatically stored with a new v# and that I would need to keep track of that (somehow) and manually change my <script> statement every time? If that's right, then how can I discover the current v#? I don't see it in the Properties of the file in VS. (By the way, does the Copy To Output Directory property setting make any difference here, or is that only something that's relevant on Publish?)

On the second part (automatic), I'm afraid I don't understand at all. What code would I add and where would I add it?

Thanks for be patient with me on this. I am an experienced WinForms c# programmer, but am new to web apps.

_{Thursday, June 4, 2020 6:45 AM}

Hi Cincy Steve,

>>Is there something I need to do to get the revised code to replace the prior code when running the debugger?

Maybe you could try to rebuild your project before debugging. It will clear caches file then re-build them.

Best Regards,

Dylan

MSDN Community Support Please remember to click "Mark as Answer" the responses that resolved your issue, and to click "Unmark as Answer" if not. This can be beneficial to other community members reading this thread. If you have any compliments or complaints to MSDN Support, feel free to contact [email protected]

_{Thursday, June 4, 2020 5:31 PM}

Dylan -

Thanks again for the suggestion. I tried rebuilding before debugging, but no luck. I also tried closing the Solution and then reopening it, as well as totally shutting down VS and starting over. After shutting VS down, I even tried rebuild after starting back up. None of these caused the localhost code to update to the current source js code that I changed. Adding to the mystery, there have been situations where I've changed the source code and it does take effect in the localhost code. No idea what was different about those situations.

I fear there must be some straightforward setting or config parameter that I have wrong, since this behavior would surely be a problem to so many others.

Any other suggestions? Perhaps Viorel's initial ones could get around the problem (hopefully just for now since I would like not to have to use them forever), if you or Viorel can explain them since I really don't understand.

Steve

P.S. I may have a clue. I discovered this problem when the break point I set in the source js file caused the localhost code to appear in VS with the break point highlighted there. I just made some changes to other parts of the app and when I reran debug, the break point in the js showed in VS is the source code file (the localhost was not shown). Seems like that might be a clue to what the problem is.

_{Friday, June 5, 2020 9:03 AM | 1 vote}

Hi Cincy Steve,

It seems that the caches are saved into browser. You could refer some solutions from this thread: https://stackoverflow.com/questions/38758888/not-updating-javascript-file, that also contains Viorel_'s suggestions.

Best Regards,

Dylan

_{Saturday, June 6, 2020 1:09 PM}

Dylan -

Thanks once again for the help. I have thoroughly read the SO link you posted, including researching terms I didn't understand due to my novice web programming status. I am still struggling to understand some of the suggestions and/or accept their necessity. In particular:

1. The Cache-Control idea seems to be exactly what I need, especially with the ability to set no-cache or not based on whether I'm in the development environment. I have tried to research how to execute this idea, but am finding posts that seem promising without finally making it clear what I need to do. I gather from my research that this idea is talking about setting Cache-Control in the HTTP Headers, even though the SO post says to check the header "of the JavaScript." I would welcome guidance on how to execute this idea.

2. The idea to "check whether VS or IIS are reloading the entire project after the deploy" also sounds like a right idea, but there is no guidance on how to do that either. And I'm not sure what "after the deploy" means. Is that talking about after publishing?

The ideas that involve renaming the file after each change or using a query string don't seem right for my needs. While I am in this learning stage, I plan/need to change the code after almost every debugging run. I can see how these ideas might make sense in a more stable environment where changes are necessary very infrequently.

I hope I am not being too much of a dunce on all of this. It seems like this should be a very common need that should therefore have a common solution. Thanks for any further help you can provide.

Steve

_{Tuesday, June 9, 2020 9:54 AM | 1 vote}

Hi Cincy Steve,

I am afraid that you can't get other methods you want at this stage. The CTRL+F5 should be the most convenient way.

BTW, the cache control is beyond our support, maybe you could refer this document to use it: https://varvy.com/pagespeed/cache-control.html#headers

Best Regards,

Dylan

*Note: This response contains a reference to a third-party World Wide Web site. Microsoft is providing this information as a convenience to you. *

Microsoft does not control these sites and has not tested any software or information found on these sites; Therefore, Microsoft cannot make any representations regarding the quality, safety, or suitability of any software or information found there.

There are inherent dangers in the use of any software found on the Internet, and Microsoft cautions you to make sure that you completely understand the risk before retrieving any software from the Internet

Share via

JavaScript Code Change Is Not Be Applied

Question

All replies (8)

Additional resources