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

Answer 1

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

Answer 2

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.

Answer 3

Hello programmer!

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.