Question

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.

Answer 1

Assuming you’re running on a Windows machine…

1. Hit the F12 key
2. Select the Scripts, or Sources, tab in the developer tools
3. Click the little folder icon in the top level
4. Select your JavaScript file
5. Add a breakpoint by clicking on the line number on the left (adds a little blue marker)
6. Execute your JavaScript

Then during execution debugging you can do a handful of stepping motions…

• F8 Continue: Will continue until the next breakpoint
• F10 Step over: Steps over next function call (won’t enter the
  library)
• F11 Step into: Steps into the next function call (will
  enter the library)
• Shift + F11 Step out: Steps out of the current
  function

Update

After reading your updated post; to debug your code I would recommend temporarily using the jQuery Development Source Code. Although this doesn’t directly solve your problem, it will allow you to debug more easily. For what you’re trying to achieve I believe you’ll need to step-in to the library, so hopefully the production code should help you decipher what’s happening.