Tutorial :dynamically loaded js function does not appear in Firebug js debugger


There is a page1.html (I open it in browser):

<div id="content">  </div>  <script type="text/JavaScript">      jQuery.ajax({          type : "GET",          url : 'page2.html',          dataType : "html",          success : function(response) {                        jQuery('#content').append(response);            }      });  </script>  

Code of the page2.html:

<script type="text/JavaScript" src="js/page2.js"></script>    <script type="text/JavaScript">  test();  </script>  

Code of the page js/page2.js:

function test() {      alert('Function Test()');  }  

Everything works well, the window "Function Test()" is shown. But the problem is that I can't reach the code of function test() in firebug js debugger. It doesn't appear in event scripts nor in eval.

How can I fix that?

FYI: If I don't put the function in separate js file, but place it in page2.html, it appears in debugger corectly.

If I put "debugger" word in test() function, Firebug stops, but the source code of the function is still unreachable.

Versions: Firefox 3.0.10, Firebug 1.3.3

Update: pretty much the same as the question Making Firebug break inside dynamically loaded javascript, but there is no answer yet


It's a hack, but I got firebug to stop in the external file js/page2.js by adding the word debugger twice. Once at the top of the file and another time at the top of the function.

If the debugger word is there only once in either place, firebug does not stop.

debugger;  function test() {      debugger;      alert('Function Test()');  }  


What happens when you change js/page2.js to:

function test() {      alert('Function Test()');  }  alert('loaded');  

Do you see the "loaded" message?




It's not pretty but it seems to work.

Note:If u also have question or solution just comment us below or mail us on toontricks1994@gmail.com
Next Post »