Any way to get scripts added with jquery.append('<script src="...">') to show up in dev tools?

[Patrick Stinson]

I'm adding scripts on demand using jQuery.append('<script
src="something.js"></script>'). Is there some way to get these to show
up in the scripts list in dev tools so I can set a breakpoint and
debug the code? Right now I have to add a "debugger" statement to load
the script source into dev tools debugger.

[Vsevolod Vlasov]

After evaluating the line below in console on some random site I can see test.js appearing in the scripts panel script list.

a = $('body').append("<script src='http://localhost/test.js'></script>");

Could you please describe scenario that reproduces your problem in more details (preferably providing some test url).

Thank you,

Vsevolod

[Patrick Stinson]

http://www.res3d.com/bugs/append_script/append_script.html

Patrick Stinson

Director of Software Development

Resolution3D

T: 907-644-6258

C: 907-350-2370

www.res3d.com

[Patrick Stinson]

I am using Chrome stable (non-canary).

[Vsevolod Vlasov]

Thank you, I can reproduce it now.

I'll take a look at it.

[Vsevolod Vlasov]

Apparently jquery does not simply add your code to DOM, it manipulates it in some way, particularly it uses some smart mechanism to load scripts.

See for some details http://stackoverflow.com/questions/610995/jquery-cant-append-script-element.

In your case the script is loaded by XHR (as can be seen in the network panel).

I suggest you try adding sourceURL (http://blog.getfirebug.com/2009/08/11/give-your-eval-a-name-with-sourceurl/) to your script to see if it helps.

Thank you,

Vsevolod

[Patrick Stinson]

Thanks, that fixed it!

[ornt...@gmail.com]

That didn't work for me.
My script still doesn't show up in the dev tools... and was loaded the same way (with jquery .append()) :/

[Vsevolod Vlasov]

Could you please provide an example url / code snippet?

[Ornthalas]

Ok, sorry, that was ambiguous.

My script doesn't show up in the Chrome dev tools.
Obviously, the way jquery loads it is not suitable for now to be debugged inside the dev tools.

The workaround proposed in Firebug for Firefox doesn't work either for me.
There's an improvement compared to Chrome: I can see my script in Firebug, but only evaluated, inlined and though, not usable for debugging...

I hope that one day the Chrome dev tools will be updated to fix that issue...

--
Etienne Folio (Ornthalas)
(+33) 6 27 58 39 14
http://www.ornthalas.net/

[Vsevolod Vlasov]

I was probably ambiguous as well.

If you add sourceURL to your script before appending it by jquery it should appear in Chrome Develper Tools and you should be able to debug it.

If you experience any problems with this approach I would like to know more details, like the code snippet you are using or the example url where it doesn't work for you.

Thank you

[Ornthalas]

OK, now I get it:
This feature seems to work only on the dev branch of Chrome.
After updating, it works fine :)

Thanks a lot,

[Vsevolod Vlasov]

You should actually have it in the stable as well. Which version are you (were you) using?

[Ornthalas]

The latest I believe... I have no way to find out anymore ... :-(