使用jquery将脚本标签插入头部时，如何启用Chrome调试

Question

I came across this case while trying to dynamicly load a bunch of script files, and where I was getting no errors returned when the JavaScript was failing. This will hopefully save someone a lot of time.

How do I enable chrome debugging when inserting a script tag into the head using jquery. This does not allow for debugging (no errors are returned).

$(function(){    
    $('head').append('<script type="text/javascript" src="example.js"></script>');
});

Answer 1

I found that doing it via standard dom insertion will work.

. Possibly because jquery picks up what your doing and tries to use ajax instead? this doesnt sound right, but it the only thing I can think of.

. Note that it only the $('head').append that causes it to prevent debugging for some reason.

function safeAddScript(url){
    var el=document.createNode('script');
    el.type="text/javascript";
    el.src=url;
    document.getElementsByTagName('head')[0].appendChild(el);
}

$(function(){
    safeAddScript('example.js');
});