1115991 - Debugger hides scripts loaded via jQuery.getScript

Status: RESOLVED DUPLICATE of bug 944258

(DevTools :: Debugger, defect)

Description

[Codacoder]

User Agent: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/39.0.2171.95 Safari/537.36

Steps to reproduce:

$.getScript("myscript.js");


Actual results:

1 - Sources pane does not contain myscript.js
2 - Sources pane does contain 4.7 million jQuery.min.js > eval > eval > eval (etc)
3 - One of the above contains the content of myscript.js (as long as it has not been GCd, of course)


Expected results:

Anything else! 

Anything would be better than what is currently happening. Tested in Aurora and Nightly.  And while you're at it, PLEASE take another look at the related bug https://bugzilla.mozilla.org/show_bug.cgi?id=1111369 <- WONTFIX? That's why this insanity is occurring.

Comment 1

[Jeff Griffiths (:canuckistani) (:⚡︎)]

This is my attempt at reproducing this:

http://jsfiddle.net/canuckistani/1guejuuk/2/

When I click the button I see:

1. the network request that loads underscore
2. in the debugger I see underscore listed from the underscore site ( jsfiddle also loads underscore initially, so there should be two )

I tested in dev edition 36 and Nightly 37. Am I missing something?

Comment 2

[Codacoder]

Thanks for this Jeff. Yes, it's an odd one.  To answer your question, I don't know if you're missing something - am I? ;)

I tested with jQuery.getScript AND by creating a DOM script element and setting the src attribute (but again via jQuery). 

  $("body").append("<script src='blah' ...>")

Same issue both ways: sources pane does not contain a reference to myscript.js.  The jQuery documentation for getScript says:

  Load a JavaScript file from the server using a GET HTTP request, then execute it.

Which means eval, I guess, and explains why the code appears as one of the quintillion eval sources.  And note -the script works fine - either way I try it.

And yes, I see the network request reference too - just no entry in the sources pane (pain!).

You'll maybe recall, my app is a humongous beast (my example steps are not representative by any means) so if you want me to take a screenshot of the debugger showing the problem, let me know.

Comment 3

[Jeff Griffiths (:canuckistani) (:⚡︎)]

Do you see the issue with my example?

Comment 4

[Codacoder]

Sorry, no I don't (that is a vastly different scenario, though).  Tomorrow, I'll switch branches here and see if I can nail it any closer (using my "real world" code).

Comment 5

[Codacoder]

Attachment: 1115991-img-1.PNG

1115991-img-1.png: 
  Claim: File is loaded by firefox, Sources pane does not show the filename.

Comment 6

[Codacoder]

Attachment: 1115991-img-2.PNG

1115991-img-2.png: 
  Claim: File content resides inside one of the "eval" entries for jquery in the Sources pane.

Comment 7

[Codacoder]

Attachment: 1115991-img-3.PNG

1115991-img-3.png: 
  Prove that code is executing (and not some artifact of some other kind of problem) by setting a breakpoint and hitting it.

Comment 8

[Codacoder]

So, Jeff, if you can review the three attached images, let me know what you think...

Comment 9

[Codacoder]

And I can't set a breakpoint.

And searches do not work - eg: !myFunction

Comment 10

[Jeff Griffiths (:canuckistani) (:⚡︎)]

clearing my needinfo, this needs to be investigated by an engineer, so I'll leave that to Eddy.

Comment 11

[Eddy Bruel [:ejpbruel]]

This is related to eval scripts, so James would be the best candidate to look into this.

James, do you think you could spare some time to look into this bug?

Comment 12

[James Long (:jlongster)]

This is most likely bug 1111058, which is right about to land once I respond to some minor nits from review. That bug started out being a problem with scripts with invalid sourcemaps not being shown, but we've cleaned up several parts of the code that might fix this.

I'm going to focus on getting that landed today and I'll take a look at this bug again and see if it fixes it.

Regarding https://bugzilla.mozilla.org/show_bug.cgi?id=1111369, the current behavior is definitely annoying but we also definitely want to show eval sources. Very soon we are changing how we show them but putting all unnamed evals at the bottom so you won't see them mixed with everything: https://bugzilla.mozilla.org/show_bug.cgi?id=1111771

Comment 13

[Codacoder]

Thanks James.

Comment 14

[James Long (:jlongster)]

Ok, so this probably isn't bug 1111058. I just took a closer look at this.

I don't know how `getScript` works, and Jeff verified in a basic case that it should (at least sometimes) append a script element and get a new real source (not eval'ed). In that case, it should definitely show up as a normal source under the appropriate domain (there's literally no way that it is related to eval stuff).

If you are using a `getScript` function that loads the source as text and then evals it, it will definitely show up as an `eval` source (which in the next few days will all show up unprioritized at the bottom of the source listing). It is up to that `getScript` function to append the appropriate `//# sourceURL=...` pragma to the eval'ed code to get it to show up like a normal script. Our debugger supports that pragma for "naming" eval sources, and without it, there's nothing we can do.

It sounds like the `getScript` function is more to blame than us; there might be other bugs you're found regarding dealing with lots of `eval` sources but your original bug here is invalid, I believe. If you can post a reproducible test case we can try to look into it. But if the script is being eval'ed, it's going to show up as "original-script.js > eval" no matter what.

Comment 15

[Codacoder]

1 - Like it or not, jQuery is a hugely popular library and its methodology should not compromise the devtools UX. (IMO)
2 - I'm using jQ 1.8.3 (maybe a newer version would help? I don't have control over this).

3 - My original bug also mentioned that, in trying to nail this down, I used a "<script src='...'>" insertion into the DOM. *Same* issue - NOT listed in in sources pane.

Please forget about jQuery's good or bad implementation until you've satisfied yourself that "standard" dom insertion works.  IF that worked, I'd ditch getScript altogether.

Comment 16

[James Long (:jlongster)]

The point I was making is that inserting a script element should definitely work, but fetching text content and eval'ing it will always show up as an anonymous eval. Just making that clear since I don't know the internals of your test case (if you could post something reproducible, it would help a *ton*).

In comment 4 you confirmed that Jeff's test case worked for you. So inserting a script element works. Please post your test that inserts the script element and does not show up. Are you using sourcemapping? The bug I referenced above does fix a few things with that on Nightly/Aurora. Also, what version of Firefox are you using (may have missed that above but I don't see it)?

Comment 17

[Codacoder]

(In reply to James Long (:jlongster) from comment #16)
> The point I was making is that inserting a script element should definitely
> work, but fetching text content and eval'ing it will always show up as an
> anonymous eval. 

Keep in mind, James, it's my "suspicion" it's eval at root of this, I certainly don't *know* it to be the case.

> Just making that clear since I don't know the internals of
> your test case (if you could post something reproducible, it would help a
> *ton*).

Right. But I think you know my issues there. If you want a gotomeeting, let me know.

> In comment 4 you confirmed that Jeff's test case worked for you. 

Again, that's a diff scenario.  And, frankly, irrelevant.  If it turns out I did something stupid (ahrd to see how in a few lines of code but hey, it happens ;)) then great, that's an easy fix if nothing else ;)


> So inserting a script element works.

Not here. I *will* test that again though.

> Please post your test that inserts the
> script element and does not show up. Are you using sourcemapping? 

No.

> The bug I
> referenced above does fix a few things with that on Nightly/Aurora. Also,
> what version of Firefox are you using (may have missed that above but I
> don't see it)?

Nightly (but less so while 1113155 remains UNCO which I check every few days) Dev Ed (Aurora).

Gimme a little while with this James, I'm a little snowed here and I still have an outstanding promise for you guys with 1111367.

Comment 18

[Codacoder]

James - I did the following 

1 - Initial documented scenario just to confirm bug still present in Dev Edition.

2 - Tried the following code:

$("body").append("<script id='XXX' src='" + extendPath + "/myscript.js' type='text/javascript'></script>");

Same issue. Nothing in Sources Pane and nothing shows up in Inspector either. CODE WORKS FINE. Typing $("#XXX") in the console returns "nothing" (an empty jQ object equivalent to $("#doesnotexist").

3 - Tried the following code

var scrpt = document.createElement("script");
scrpt.type = "text/javascript";
scrpt.id = "XXX";
scrpt.src = extendPath + "/myscript.js";
document.body.appendChild(scrpt);

Shows up in sources pane and the Inspector (I'm using this since I get what I need).

Obviously, you can close this bug if you wish but, IMO, DevTools should support scenario 2, fully (which I suspect may lead to scenario 1 being fixed also).

Comment 19

[Codacoder]

*** REGRESSION ***

(In reply to Russ from comment #18)
> James - I did the following 
> 
> 1 - Initial documented scenario just to confirm bug still present in Dev
> Edition.
> 
> 2 - Tried the following code:
> 
> $("body").append("<script id='XXX' src='" + extendPath + "/myscript.js'
> type='text/javascript'></script>");
> 
> Same issue. Nothing in Sources Pane and nothing shows up in Inspector
> either. CODE WORKS FINE. Typing $("#XXX") in the console returns "nothing"
> (an empty jQ object equivalent to $("#doesnotexist").
> 
> 3 - Tried the following code
> 
> var scrpt = document.createElement("script");
> scrpt.type = "text/javascript";
> scrpt.id = "XXX";
> scrpt.src = extendPath + "/myscript.js";
> document.body.appendChild(scrpt);
> 
> Shows up in sources pane and the Inspector (I'm using this since I get what
> I need).
> 
> Obviously, you can close this bug if you wish but, IMO, DevTools should
> support scenario 2, fully (which I suspect may lead to scenario 1 being
> fixed also).

In latest Dev Edition, this (3 above) no longer works:

var scrpt = document.createElement("script");
scrpt.type = "text/javascript";
scrpt.id = "XXX";
scrpt.src = extendPath + "/myscript.js";
document.body.appendChild(scrpt);

It seems debugger is now incapable of supporting scripts loaded 
1 - via initially reported scenario
2 - via $.getScript, $("body").append("<script ...)
3 - standard document.createElement calls

Now I can't debug this script at all in firefox - debugger will hit the debugger statement and place the cursor on the wrong line in the wrong file.

Works in Chrome. Works in IE.

Comment 20

[James Long (:jlongster)]

I honestly don't know what environment you are under where this doesn't work. I can't help until you post somewhere a reproducible test case where the same thing happens on my end.

I just created a file with this:


function foo() {
  var script = document.createElement('script');
  script.type = 'text/javascript';
  script.src = 'bar.js';
  document.body.appendChild(script);
}

foo();

And made bar.js which has this:

console.log('from bar');

I see both sources in the debugger and can even set a breakpoint on the console log. If you can post a page where you are seeing this behavior, it would help a lot.

Comment 21

[Codacoder]

(In reply to James Long (:jlongster) from comment #20)
> I honestly don't know what environment you are under where this doesn't
> work. 

I honestly don't know what else I can tell you: Win7x64, FF Dev Edition.

> I can't help until you post somewhere a reproducible test case where
> the same thing happens on my end.

I think I've offered you a live debug session.  Name a time and I'll setup a gotomeeting call with you.  You can see it, live, right on my box.

> 
> I just created a file with this:
> 
> 
> function foo() {
>   var script = document.createElement('script');
>   script.type = 'text/javascript';
>   script.src = 'bar.js';
>   document.body.appendChild(script);
> }
> 
> foo();
> 
> And made bar.js which has this:
> 
> console.log('from bar');
> 
> I see both sources in the debugger and can even set a breakpoint on the
> console log. If you can post a page where you are seeing this behavior, it
> would help a lot.

My code does pretty much the same as yours but *some* files do not show up in sources list, *sometimes*.  The key difference is (as I pointed out to Jeff) a minimalist example is a vastly different scenario (perhaps the example doesn't "stress" the tool like a real world app does?).  

Without knowing how many other files are not showing up in the sources pane, I am counting 30 scripts listed.  My "foo" function adds various bits to the script tag (like a class, for example) which I can use to prove (via the Inspector pane) that the script loaded.  Similarly, when the file is executed, it constructs objects which I can test for in the console - they're working.  But still, the file is NOT in the source pane.

We can do a gotomeeting or I can send you screenshots. Let me know.

(I think perhaps the bug title is now a little misleading since any method of injecting script can sometimes fail in this regard - thoughts?)

Comment 22

[Leonard Camacho [:lcamacho]]

I think I'm hitting this bug.

Steps to reproduce:
1. Go to www.hsbc.co.uk
2. Open devtools and go to console
3. Write in console "oo_feedback.show" and hit enter
4. Click on the function name that returns and it would take you to jQuery source instead of real source

This is the script that defines oo_feedback.show: http://www.hsbc.co.uk/1/PA_esf-ca-app-content/content/pws/theme/personal_general/js/oo_engine.min.js
If you look for this script on debugger it's not there but on network panel you can find it.

This is the script that appends oo_engine.min.js to document body: http://www.hsbc.co.uk/1/PA_esf-ca-app-content/content/pws/theme/personal_general/js/oo_async.js

Comment 23

[Jason Laster [:jlast]]

Hmm, Jim what do you think of this?

Comment 24

[Jim Blandy :jimb]

I just tried out the reproduction instructions in comment 20, and it works for me. The only thing I can think of is that it might be GC (bug 944258).