firebug javascript/jquery debugging

Question

I have the following script which I want to debug:

function getTabFrame() {
    $.ajax({
        url: 'get_tab_frame.aspx?rand=' + Math.random(),
        type: 'GET',
        dataType: 'json',
        error: function(xhr, status, error) {
            //alert('Error: ' + status + '\nError Text: ' + error + '\nResponse Text: ' + xhr.responseText);
        },
        success: function( data ) {
            $( "#divTabsDropdown" ).empty();

            $.each( data, function( index, item ) {

                // create tabs with custom ids
                $( "#tabs" ).tabs( "add", "get_tab_content.aspx?tab=" + item.key, item.value)
                    .find( ">ul>li:last" )
                    .attr( "id", "tab_group_" + item.key );

                // creates the buttons
                $( "#divTabsDropdown" ).append( "<div class='item custom_group' id='tab" + item.ordering + "'>" + item.value + "</div>" );

                // link buttons with tabs
                $("#tab" + item.ordering).live('click', function() {
                    $("#tabs").tabs( "select" , $( "#tab_group_" + item.key ).index() );
                });
            });
        }
    });
}

If I add a breakpoint to $.ajax({, and run the debugging, that is where it stops. If I then hover over data in the line success: function( data ) {, no popup is displayed so no value can be seen. I want to see what is inside data.

So I thought "maybe I need to press F10 a couple of times so firebug can actually run enough of the javascript/jquery before a value is displayed". So I did, I got to the end of the function, hovered the mouse over data in success: function( data ) {, and again, no popup, therefore no data is displayed.

What am I doing wrong? Why can't I see what is held within data?

I have installed firebug plus firequery in firefox.

Why don't you put the breakpoint inside the success callback. Or even just console.log(data) there should show you the results... — Lix
– Lix, Commented May 18, 2012 at 10:44
I would have thought that putting a breakpoint at the top of a function will step through everything in the function. Seems illogical to have to put a breakpoint at the top and in other parts of the same function. It makes sense to put the breakpoint later in a function if you just want to debug a small part of a function. But I guess this will have to do, i.e. add a breakpoint within the success callback... — oshirowanen
– oshirowanen, Commented May 18, 2012 at 10:48
The breakpoint in the success function won't be hit because you are passing it to jQuery for execution. The line of code you put the breakpoint on isn't being executed directly. — Rory McCrossan
– Rory McCrossan, Commented May 18, 2012 at 10:49
@oshirowanen: as I understand, you develop in a browser, not IE. Acknowledging that removing alerts and console.logs can be tedious and painful you must do that anyway in a production code. — András Váczi
– András Váczi, Commented May 18, 2012 at 11:11

Samuel Rossille · Accepted Answer · 2012-05-18 11:16:09Z

1

data is defined as a parameter of your success callback function. If you want to see it's value, you have to be on a line in the implementation of this function.

You should put the breakpoint on the first line of your success callback, which is

$( "#divTabsDropdown" ).empty();

If it's never hit, it's that you request is still pending or ended up in an error. In this last case, error callback will be called.

answered May 18, 2012 at 11:16

Samuel Rossille

20.1k18 gold badges65 silver badges92 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

firebug javascript/jquery debugging

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related