790264 - Incorrect error source location for dynamically loaded JavaScript files

Status: RESOLVED WONTFIX

(DevTools :: Console, defect, P3)

Description

[Dirkjan Ochtman (:djc)]

In an internal webapp, I'm loading some JS files dynamically (through jQuery.getScript()), so that the script in those files only runs after some setup procedures on the initial page have completed. However, if an error occurs in a function in one of the dynamically-loaded source files, the error location (as displayed on the right-hand side of the Web Console) shows some unrelated location. (It points somewhere in my minified copy of jQuery; it might be the getScript() call that first loaded the source file.) It seems like Gecko should be smart enough to figure out where the JS actually came from and show that.

Comment 1

[Dirkjan Ochtman (:djc)]

Attachment: JavaScript part of test case

Comment 2

[Dirkjan Ochtman (:djc)]

Attachment: HTML part of test case

I've attached two files that, when put together in a directory, exhibit the error I was trying to explain. There's an additional syntax error that I don't really understand (it doesn't seem to have any effect on further script execution).

What I get in the Web Console when loading the HTML page:

[10:53:03.660] ReferenceError: dsadskd is not defined @ http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js:4

What I should get:

[10:53:03.660] ReferenceError: dsadskd is not defined @ test.js:3

Comment 4

[Panos Astithas (he/him) [:past] (please ni?)]

The core issue here is the way jQuery's getScript works: getScript essentially uses XMLHttpRequest to load the resource and then injects it into a script tag in the page. When you use a relative URL it just adds it as an inline script, as an optimization, whereas when you use a full URL it adds a script tag with an src attribute that is loaded asynchronously.

This optimization is what is confusing in this case: since your test.js scripts contents are loaded as an inline script, the engine has lost any trace of the origins of the code and correctly reports it as an inline script.  This is why the console is pointing you to this location and why the debugger has no entry for test.js in the scripts list.

See the following page for a workaround you can use to help with debugging your code in such cases:

http://stackoverflow.com/questions/690781/debugging-scripts-added-via-jquery-getscript-function

Comment 5

[Panos Astithas (he/him) [:past] (please ni?)]

Attachment: HTML part of the test w/o jQuery

Here is a simplified version of your test page that uses standard HTML APIs (without jQuery) to make better sense of what is going on. You need to put both your test.js file and this page in the same directory. This version of the page emulates jQuery's behavior without the optimization, so everything works as you'd expect. In order to observe the behavior you describe above, uncomment the commented-out lines, and comment the script.src and script.onload assignments.

Comment 6

[Panos Astithas (he/him) [:past] (please ni?)]

Fixing This Is Hard.

Comment 7

[Patrick Brosset <:pbro>]

Inactive in the past 5 years. Not aware of other user complaints about this, or they are filed in other bugs. Closing this one for now. Cleaning our backlog.