How to debug jQuery AJAX

Question

I'm using Chrome to debug my websites. However, sometime I come up with errors like this one:

Error

Uncaught TypeError: Cannot set property 'display' of undefined

Stack Trace

f.extend.ajax
ClassLoader.performLoadWave

So, I know that it's something in my Ajax call, probably in my success function. But, my success function calls a lot of things.

I'm not really looking for someone to help me debug my code, but just asking how I could debug this. I use a lot of console.log(); but they're not really helpful, how can I properly find errors like this one?

EDIT

To add to my question, in this example, the error is in a file that gets loaded by my AJAX call, since the dataType is set to 'script', but how can I know this without having to dig up for a few hours?

Code

For anyone that cares about my code, here it is:

$.ajax({
    url: filePath,
    async: false,
    cache: !Settings.debugging,
    dataType: 'script',
    error: function(httpRequest, message, errorThrown){
        if(errorThrown == 'Not Found')
        {
            throw 'Include cannot be found.';
        }
        else
        {
            throw errorThrown + ': ' + (message == 'parsererror' ? 'This doesn\'t look like JavaScript!' : message);
        }
    },
    success: function(){

        $.each(newNeedsLoading, function(index, element){

            if(element !== undefined)
            {

                var className = element.className;
                if(window[className] && window[className]['included'])
                {
                    window[className]['included']();
                }

                className = 'Plugin_' + element.className;
                if(window[className] && window[className]['included'])
                {
                    window[className]['included']();
                }

                className = 'Plugin_Administration_' + element.className;
                if(window[className] && window[className]['included'])
                {
                    window[className]['included']();
                }

                if(element.completed)
                {
                    element.completed();
                }

            }

        });

        ClassLoader.isLoading = false;

    }
});

possible duplicate of [Debugging scripts added via jQuery getScript function](http://stackoverflow.com/questions/690781/debugging-scripts-added-via-jquery-getscript-function) — jValdron, Feb 07 '12 at 18:46
See the duplicate, I just added crossDomain: true in my $.ajax call, can debug properly now. — jValdron, Feb 07 '12 at 18:48

score 1 · Accepted Answer · edited May 23 '17 at 12:27

1

After some research, this question was pretty much a duplicate of this one:

Debugging scripts added via jQuery getScript function

edited May 23 '17 at 12:27

Community

1
1

answered Feb 07 '12 at 18:53

jValdron

3,408
1
28
44

Sureround · Answer 2 · 2012-02-07T18:46:31.267

0

Have you tried using firebug? You can view the individual AJAX requests including the parameters you send and the response returned from the server via the CONSOLE tab.

http://getfirebug.com/releases/lite/chrome/

In the console tab you should right click and select to log XMLHttpRequests. You can then use the "Network" tab to view the individual items loaded per request. The "Headers" panel will show your parameters. The "Preview" panel will show your preview. The "Response" panel will show you the error or success returned from your server with whatever data you are returning.

edited Feb 07 '12 at 18:46

answered Feb 07 '12 at 18:40

Sureround

119
6

From the website, it says that "JavaScript debugger isn't available" – jValdron Feb 07 '12 at 18:42

score 0 · Answer 3 · answered Feb 07 '12 at 18:45

0

Chrome also has an option to log http requests and the network tab in the developer tools is pretty useful.

answered Feb 07 '12 at 18:45

cockroachbill

73
7

score 0 · Answer 4 · answered Feb 07 '12 at 18:51

You could set a breakpoint in your javascript's success function (or error or where ever). See Chrome Developer Tools: Breakpoints for information and in-browser tutorials. In your case, pay special attention to Breakpoints on XHR.

When you hit the break point, you can view the value of any variables in scope. You can also use the javascript console to enter any javascript, and it will execute in the current scope.

As @cockroachbill said, you can also view the network tab to see all traffic, including XHR (XMLHttpRequest) and what it returned. I especially like the preview tab.

google-chrome google-chrome-devtools debugging

How to debug jQuery AJAX

4 Answers4