jQuery AJAX callback not executed when debugging via Firebug

Question

This is a frequently observed behavior. jQuery asynchronous AJAX calls work flawlessly while running without opening Firebug. However, when Firebug is opened and I am debugging by putting some breakpoints in some other part of the code, the AJAX callback event doesn't fire.

My assumption is that, since I am already debugging step-by-step in another unrelated part of code, the AJAX response callback event is getting escaped. Is this assumption right? If yes, how do I ensure that callback fires always? If not, what am I doing wrong?

Answer 1

My assumption is that, since I am already debugging step-by-step in another unrelated part of code, the ajax response callback event is getting escaped. Is this assumption right?

Yes, in Firebug 1.x. Though that's fixed in Firebug 2.0 (at the time of writing this answer in beta phase).

E.g. check out the following code:

<script type="text/javascript">
function makeRequest()
{
    var xhr = new XMLHttpRequest();
    xhr.open("GET", "test.php");

    xhr.onreadystatechange = function()
    {
        if (xhr.readyState === XMLHttpRequest.DONE)
            console.log("Request finished");
    }

    xhr.send(null);
    debugger;
}
</script>
<button onclick="makeRequest()">Make request</button>

When you click the Make request button you'd expect Request finished to be logged to the console. In Firebug up to 1.12.8 the output doesn't appear in the console, while it does in 2.0. This is because Firebug 2.0 adapts new debugger APIs exposed by Firefox, which fixed this problem.

Though note that the asynchronous call to onreadystatechange will not be deferred. That means it will still be executed even when you're stopped at the debugger keyword. So a breakpoint at console.log("Request finished") will not be hit.

This is a difference to the JavaScript engines of Chrome, Opera and Internet Explorer, where the execution of asynchronous functions is waiting for the debugger to continue the script execution.