dynamically loaded js function does not appear in

Question

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

Answer 1

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

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

Do you see the "loaded" message?

Answer 2

Try:

eval('debugger;');

It's not pretty but it seems to work.

Answer 3

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