Debugging dynamically added Javascript code

Question

One of the programmers I worked with has something similar in code:

 var head = document.getElementsByTagName("head")[0];
 var e = document.createElement("script");
 e.type = "text/javascript";
 var b = "function moo() { alert('hello'); }";
 e.appendChild(document.createTextNode(b));
 head.appendChild(e);
 moo();

This is all good and dandy, but I would like to step into moo(), and firebug just can't do that. I know I can rip the whole thing apart, but I reallllly don't want to touch it and his code works :)

Any ideas how I can debug this with Firebug?

Cheers

Just to save others the trouble: Chrome's DevTools don't magically handle it, either. — T.J. Crowder
– T.J. Crowder, Commented May 9, 2010 at 13:07
FWIW: I'd say the difficulty debugging it is an excellent argument in favor of refactoring it out. You're effectively doing an eval there (in a general sense), and there's nearly always a better way to approach it. — T.J. Crowder
– T.J. Crowder, Commented May 9, 2010 at 13:10
Any particular reason why the code is structured like this? It seems to me that if you already have the code being injected into the DOM, why not just declare it, use new Function("...") or eval it? — Sean Kinsey
– Sean Kinsey, Commented May 9, 2010 at 13:11
@Sean: There's a substantial scope/context difference between what he's doing and eval. If he's going to refactor it, I'd push for avoiding the eval-like-ness entirely. :-) — T.J. Crowder
– T.J. Crowder, Commented May 9, 2010 at 13:13
@Sean Kinsey: it's likely that this is a simplified example for the sake of the question, as is usually the case on Stack Overflow. Also, I think the same problem would still exist with eval or new Function(). — Andy E
– Andy E, Commented May 9, 2010 at 13:15

olleolleolle · Accepted Answer · 2010-05-16 07:48:32Z

2

I drew a picture, using Safari and its script debugger.

I prolonged your colleague's code to have some lines to step through.

var b = "function moo() { var a=10; a +=1; a+=10; alert(a); }";

See the picture for clearer explanation.

answered May 16, 2010 at 7:48

olleolleolle

1,94616 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Simon B. Over a year ago

The picture shows that Safari's debugger DOES manage to step into the dynamically created function. I haven't verified that it works myself.

blockhead · Accepted Answer · 2010-05-09 13:01:32Z

0

You can put a debugger; statement in there. Firebug should recognize that, and let you step in.

answered May 9, 2010 at 13:01

blockhead

9,7053 gold badges46 silver badges69 bronze badges

1 Comment

gilm Over a year ago

tried; no go. I can breakpoint on the call to moo(), but cannot step in.

FK82 · Accepted Answer · 2010-05-09 21:29:34Z

0

IMO add a try-catch block:

 try{ 
      alert(\"hello!\") ; 
 } catch(e) { 
      console.log(e) ; 
 }

in order to get the error messages for any runtime errors. If I understand it correctly the problem here is that you are adding the above code branch at a later stage to an earlier stage (in terms of parsing chronology). Firebug will already have gone through the part you are changing and thus will not recognize the code.

edited May 9, 2010 at 21:29

answered May 9, 2010 at 21:24

FK82

5,0754 gold badges34 silver badges44 bronze badges

2 Comments

Simon B. Over a year ago

The OP (original poster) said the code IS working, so no errors are supposedly there to see. It's true the OP didn't say WHY he wants to step into the code, so I'll assume it's either self-education or perhaps correctness verification of the code thats going on.

FK82 Over a year ago

The OP said Any ideas how I can debug this with Firebug? Why do you assume he wants to debug working code?

Collectives™ on Stack Overflow

Debugging dynamically added Javascript code

3 Answers 3

1 Comment

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related