reloading javascript works, but does not stop at breakpoints
<p>I want to reload and re-execute some javascript resources after some event happens. I looked up how to do this and found <a href="https://stackoverflow.com/questions/9642205/how-to-force-a-script-reload-and-re-execute">this</a> SO question to be helpful. It says to remove the javascript resource and then create a new script tag referencing the same resource and append it to the head or body.</p>

<p>I tried it and it works.</p>

<p>I am using this code:</p>

<pre><code>var reloadScripts = function(){
    var len = LOCALBROWSEVARIABLES.filesToReload.length;
    for (var i = 0; i &lt; len; i++){
        reload_js(LOCALBROWSEVARIABLES.filesToReload[i]);
    }
}

function reload_js(src) {
    $('script[src="' + src + '"]').remove();
    $('&lt;script&gt;').attr('src', src).appendTo('head');
}
</code></pre>

<p>This code works for me. I can tell it works because I can see the outcome of the javascript functions that are being re run. But one of my files is not working as expected and I want to debug it. The problem is that when I put break points anywhere in the files that are being reloaded, they work when I first open the page, but not when they are reloaded. So I am not able to debug these reloaded scripts. Does anyone know why debugging/break points is not working when the scripts are being reloaded?</p>