Debugging dynamically added Javascript code

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();

      

It's all good and dandy, but I would like to get into moo () and firebug just can't do it. I know I can split everything into parts, but I don't want to touch him and his code works :)

Any ideas how I can debug this using Firebug?

Greetings

+2


a source to share


3 answers


I drew an image using Safari and its debugger script.

I have extended your colleague's code to go a few lines.



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

      

See image for a clearer explanation.

+2


a source


You can put the instruction here debugger;

. Firebug should recognize this and let you in.



0


a source


IMO add try-catch block:

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

      

to get error messages for any runtime errors. If I understand correctly, the problem is that you are adding the above branch of code to later stage

in earlier stage

(in terms of parsing history). Firebug has already gone through the part you are changing, and therefore does not recognize the code.

0


a source







All Articles