Why does the Chrome Developer Tools/Console does not show javascript files/error that were loaded dynamically?

Question

I'm loading files using a require function inside my code, which adds a <script/> tag to the body of the page with the relevant attributes.

The scripts are loading just fine and they are accessible, but if I have an error in one of them, it never shows in the console, and I don't have them showing in the Scripts tab inside the developer tools, essentially robbing me of the debugging capabilities.

What am I doing wrong?

My require function looks like so:

require: function (moduleId) {
    var filename = this.config.modulesDir + '/' + moduleId + '/module.js';
    var script = $('<script></script>').attr({
        'src': filename,
        'type': 'text/javascript'
    }).appendTo('#Scripts');
}

Answer 1

This works just fine with latest version of Chrome (15.0.874.121). I did setup a jsfiddle example and you can clearly see it works :

http://jsfiddle.net/Tgax4/

There are two possible solutions to your problem :

1. Chrome is not up to date on your workstation. Update it.
2. You require scripts that does not exists, and that's why they are not listed. Ensure you have the correct location.

In the second case, chrome should tell you in the console that the script does not exists, so I'm pretty sure it has something to do with older chrome version.

Answer 2

Have you considered using a library like require.js (http://requirejs.org/) to handle your dependencies?

Using it I never had problems debugging in dynamically loaded scripts.