[javascript] Javascript Debugging line by line using Google Chrome

How can I step through my javascript code line by line using Google Chromes developer tools without it going into javascript libraries?

For example, I am heavily using jQuery on my site, and I just want to debug the jQuery I have written, and not the javascript/jquery within the jquery libraries. How do I only step through my own jquery/javascript and not have to step through the millions of lines in the jquery libraries?

So if I have the following:

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) {
            $.each(data, function(index, item) {
                // do something here
            });
        }
    });
}

if I place the breakpoint at $.ajax({, if I them start debugging that it where it stops, if I then press F11, it goes straight into the jQuery libraries. I don't want that to happen, I want it to go to the next line which is url: 'get_tab_frame.aspx?rand=' + Math.random(),.

I have tried pressing F10 instead, but that goes straight to the closing } of the function. And F5 just goes to the next breakpoint without stepping through each line one by one.

...How can I step through my javascript code line by line using Google Chromes developer tools without it going into javascript libraries?...

For the record: At this time (Feb/2015) both Google Chrome and Firefox have exactly what you (and I) need to avoid going inside libraries and scripts, and go beyond the code that we are interested, It's called Black Boxing:

When you blackbox a source file, the debugger will not jump into that file when stepping through code you're debugging.

More info:

• Chrome: Blackbox JavaScript Source Files
• Firefox: Black box libraries in the Debugger