debugging - How to debug dynamically loaded JavaScript (with jQuery) in the browser's debugger itself?

Question

A dynamically-added script is not showing up in the browser's debugger's scripts section.

Explanation:

I need to use and have used

if( someCondition == true ){
   $.getScript("myScirpt.js", function() {
       alert('Load Complete');
       myFunction();
   });
}

so that myScript.js can be dynamically loaded on meeting some condition... And myFunction can be called only after getting the whole script loaded...

But browsers are not showing the dynamically loaded myScript.js in their debugger's script section.

Is there another way round so that all of the goals may be achieved which will make one to be able to debug a dynamically-loaded script there in the browser itself?

Answer 1

You can give your dynamically loaded script a name so that it shows in the Chrome/Firefox JavaScript debugger. To do this you place a comment at the end of the script:

//# sourceURL=filename.js

This file will then show in the "Sources" tab as filename.js. In my experience you can use 's in the name but I get odd behaviour if using /'s.

For more information see: Breakpoints in Dynamic JavaScript deprecation of //@sourceurl