javascriptdebuggingdynamicloaded

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

I add a script dynamically as shown in the code below:

$.getScript("myScript.js");

The browser is not showing myScript.js in the debugger file list.

How can I show scripts added dynamically in the browser debugger?

Solution

  • 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.

    Since if a domain it is not specified filename.js will appear in a folder called "(no domain)" it is convenient to specify a domain for improving the debugging experience, as an example to see a "custom" folder it is possible to use:

    //# sourceURL=browsertools://custom/filename.js

    A complete example follows:

    window.helloWorld = function helloWorld()
{
  console.log('Hello World!');
}
//# sourceURL=browsertools://custom/helloWorld.js

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