Debug ajax requests in more easy way

At Friday, March 18, 2011

ADSENSE HERE!

When I have to debug ajax requests, I always feel pain in the ass accessing the exception message and backtrace. It require at least 3 clicks to get them and only in the plain html format, that web framework use to generate. Is it better to see it at once in the browser popup?



This can be done with Ajax callbacks offered by javascript framework(if yours doesn't - get rid of it). We can catch errors there and display popup. JQuery example with #ajaxError callback that fires on every unsuccessful ajax call:

(function() {
      var popup = null;
      $(document).ajaxError(function(event, xhr, settings, exception) {
        if (popup) {
          popup.close();
          popup = null;
        }
        popup = window.open(null, "error", "width=800,height=600");
        $(popup.document.documentElement).html(xhr.responseText);
        return true;
      });
    }());

Checked in FF and Chrome(IE is not a browser).
Screenshot with the result. Be aware of browser popup blocker.
You always have a control when popup the error. I like it to be "in any case". But You can customize it with xhr.status and if statement on the server side.


In some cases it might be useful not only in the development but in production as well. But it should be an iframe inside of pretty html layout, so that designers won't blame programmers too much.

ADSENSE HERE!