CODEWITHSUNDEEP
jqueryajaxdebugging
jValdron
jValdron

Reputation: 3418

How to debug jQuery AJAX

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;

    }
});

Upvotes: 0

Views: 11375

Answers (4)

jValdron
jValdron

Reputation: 3418

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

Debugging scripts added via jQuery getScript function

Upvotes: 1

Joel Purra
Joel Purra

Reputation: 25127

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.

Upvotes: 0

Sureround
Sureround

Reputation: 119

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.

Upvotes: 0

cockroachbill
cockroachbill

Reputation: 73

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

Upvotes: 0

Related Questions