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

10863 views
Skip to first unread message

Patrick Stinson

unread,
Mar 15, 2012, 1:36:36 PM3/15/12
to Google Chrome Developer Tools, Mike Robbins, Jesse Overton, d...@res3d.com
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

unread,
Mar 15, 2012, 2:56:50 PM3/15/12
to Patrick Stinson, Google Chrome Developer Tools, Mike Robbins, Jesse Overton, d...@res3d.com
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

unread,
Mar 15, 2012, 3:17:01 PM3/15/12
to Vsevolod Vlasov, Google Chrome Developer Tools, Mike Robbins, Jesse Overton, d...@res3d.com
http://www.res3d.com/bugs/append_script/append_script.html

Patrick Stinson
Director of Software Development



Patrick Stinson

unread,
Mar 15, 2012, 3:34:42 PM3/15/12
to Vsevolod Vlasov, Google Chrome Developer Tools, Mike Robbins, Jesse Overton, d...@res3d.com
I am using Chrome stable (non-canary).

Vsevolod Vlasov

unread,
Mar 15, 2012, 4:08:46 PM3/15/12
to Patrick Stinson, Google Chrome Developer Tools, Mike Robbins, Jesse Overton, d...@res3d.com
Thank you, I can reproduce it now.
I'll take a look at it.

Vsevolod Vlasov

unread,
Mar 16, 2012, 5:33:35 AM3/16/12
to Patrick Stinson, Google Chrome Developer Tools, Mike Robbins, Jesse Overton, d...@res3d.com
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.

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

unread,
Mar 16, 2012, 5:18:11 PM3/16/12
to Vsevolod Vlasov, Google Chrome Developer Tools, Mike Robbins, Jesse Overton, d...@res3d.com
Thanks, that fixed it!

ornt...@gmail.com

unread,
Aug 28, 2012, 9:20:16 AM8/28/12
to google-chrome-...@googlegroups.com, Vsevolod Vlasov, Mike Robbins, Jesse Overton, d...@res3d.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

unread,
Aug 28, 2012, 9:30:06 AM8/28/12
to ornt...@gmail.com, google-chrome-...@googlegroups.com, Mike Robbins, Jesse Overton, d...@res3d.com
Could you please provide an example url / code snippet?

Ornthalas

unread,
Aug 28, 2012, 10:31:04 AM8/28/12
to Vsevolod Vlasov, google-chrome-...@googlegroups.com, Mike Robbins, Jesse Overton, d...@res3d.com
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

unread,
Aug 28, 2012, 10:42:59 AM8/28/12
to Ornthalas, google-chrome-...@googlegroups.com, Mike Robbins, Jesse Overton, d...@res3d.com
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

unread,
Aug 28, 2012, 12:00:07 PM8/28/12
to Vsevolod Vlasov, google-chrome-...@googlegroups.com, Mike Robbins, Jesse Overton, d...@res3d.com
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

unread,
Aug 28, 2012, 12:54:39 PM8/28/12
to Ornthalas, google-chrome-...@googlegroups.com, Mike Robbins, Jesse Overton, d...@res3d.com
You should actually have it in the stable as well. Which version are you (were you) using?

Ornthalas

unread,
Aug 28, 2012, 12:58:22 PM8/28/12
to Vsevolod Vlasov, google-chrome-...@googlegroups.com, Jesse Overton, Mike Robbins, d...@res3d.com

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

Reply all
Reply to author
Forward
0 new messages