Django: Are there any tools/tricks to use on debugging AJAX response?

Question

Usually, when I get 500 Internal Server Error from an ajax call, I don't get to see the details of the response (because you don't want to show them to users). And on the server side, I see only a line like "GET /xxx/yyy/ HTTP/1.1" 500 1150336.

Without modifying my client-end code (ie. html/js), unless the change is minimal and once-for-all, are there any handy tools or tricks that I can use to see the details of the AJAX response (either from the client side or the server side or both)?

Using packet-capturing programs like WireShark isn't an option here, as it is not streamlined with my debugging process and thus not handy.

Note that both the client-end and the server are running off from the same machine.

Thanks.

Answer 1

1. Turn on debug mode
2. Fire up chrome
3. Push cmd+option+j (open dev tools)
4. Go to the network tab
5. Click on the ajax request
6. Click on the preview or response tab

Awesome! I just realized Chrome implemented rendering of the response as well.

Answer 2

What's wrong with basic python logging? You can set up your views to log as the request, the response and any exceptions.

If you want to get a nice frontend to manage and view exceptions you could use django-sentry if you wanted.

EDIT: I think you need to be more specific on whether you want to debug the frontend or backend code. Ideally you need both, and while my answer is based on backend debugging (to figure out 500's), the others are all good suggestions for frontend debugging.

Answer 3

This is quite an old question, but as I saw it as reference and have a slightly different solution, I figured I might as well add my two cents.

I use python manage.py runserver_plus, which comes with django extensions, and gives you an awesome debugger with the ability to open a shell at each level of the stack trace, with local variables intact. The problem here is that on ajax calls, the interface didn't show up correctly, even in the preview window. My solution was to find the calling javascript code, and on error

  $.ajax({
            url : window.location.pathname,
            type : "POST",
            dataType: "json",
            data : dataPacket,
            success : function(json) {
                alert('it worked!');
            },
            error : function(xhr,errmsg,err) {
                if(xhr.status == 500){
                    document.open();
                    document.write(xhr.responseText);
                    document.close();
                }
            });

This causes the full stack trace to replace the current window. Happy debugging!

Answer 4

Use FireBug or Chrome Developer Tools. Both allow you to inspect the request and response to your heart's content, as well as a lot more.

Answer 5

Fiddler is your friend.

Learn it, use it, love it.