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

回答1:

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

回答2:

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

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

Do you see the "loaded" message?

回答3:

Try:

eval('debugger;');

It's not pretty but it seems to work.

来源：https://stackoverflow.com/questions/874256/dynamically-loaded-js-function-does-not-appear-in-firebug-js-debugger

标签

javascript

debugging

jquery

firebug