How to debug JavaScript files which are loaded dynmically?

Question

Currently the web application I am working on loads in a number of script files using jQuery.Load() when the document DOM is ready. However, if those script files have syntax errors, neither Firebug or IE Developer Tool can reliably shows the line with error or give some really huge line numbers.

How can I debug such scripts? Or should I load them via script tags until I have verified that they are bug free?

Answer 1

firebug plugin for mozilla has a inbuilt javascript debugging tool. Which can be used for the purpose mentioned

Answer 2

I had exactly the same problem with YUI3. I reverted back to the admittedly less cool but more stable approach of including the required files - YUI3 has a neat tool for giving you all those script tags - i don't know if it's the same for JQuery. Sorry that's probably not that helpful!

Answer 3

Load them in by dynamically adding a script tag for them (using the DOM), that should do the trick:

var newScript;
var loadFunc = function ()
{
    alert("External Javascript File has been loaded");
};
newScript = document.createElement('script');
newScript.setAttribute('type','text/javascript');
newScript.setAttribute('src');
newScript.onreadystatechange = function() //IE triggers this event when the file is loaded
{
    if (newScript.readyState == 'complete' || newScript.readyState == 'loaded')
        loadFunc();
};
newScript.onload = loadFunc;              //Other browsers trigger this one
document.getElementsByTagName('head')[0].appendChild(newScript);