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.

Answer 3

EDIT: nevermind, that was just JSFiddle, wanting the slash to be escaped. Having it escaped made it work for me. So I don't think the error is in your function. Maybe you provide us with some more information.

---

Could you try replacing

$('<script></script>')

with

$('<script>')

Answer 4

Make sure that you are displaying scripts from frame you are in inside devtools. If you load scripts inside iframe then you should select this frame in chrome inspector as current environment to show scripts from this frame. At the left bottom corner of chrome devtools right next to buttons is small select which gives you possibility to change current frame (default is ). Try to select other frame and check if then scripts will show in script selector on Scripts tab.

And also if you can not see errors, check if next to mentioned select at the bottom you have selected proper level of logging - try to select button 'All', and check if then you will see any errors.