Ajax Developer Debug

Description:

Ajax Developer Debug is a plugin for debugging XMLHttpRequest requests.
The plugin allows you to capture all the errors returned by Ajax on jQuery.
This plugin can be used in a development environment to show errors at runtime, or even enter these errors in an HTML element in your Web Application.

Historic:

I decided to create this plugin, for which the project which I am developer / co-founder (thewebmind.org) we had the need to be able to view all the possible errors returned in Ajax requests.
As TheWebMind is all “Ajax oriented”, we create a server-side engine (PHP) that handles the HTTP error codes forcing for each thrown exception on the server (To learn more about this access: http://felipenascimento.org/triggering-http-errors/).
With Javascript, using jQuery we’ve created an engine that captures these errors, and returns in a friendly way.

How to use the Plugin:

To use the plugin just call AjaxDebug() in the error event in your jQuery Ajax request.


$.ajax({
type:'POST',
url: 'taeste.php',
success: function(msg){
alert(msg)
},
error: function(XMLHttpRequest, textStatus, errorThrown){
$(XMLHttpRequest).AjaxDebug({
containerId : 'load'
nativeConsole : false
});
}
});

Docs:

For each request call AjaxDebug() on error event passing the XMLHttpRequest object.

Properties:
containerId – (String) Specifies the id of the element where the error should be returned.
nativeConsole – (True|False)  Specifies whether the native console should be displayed.

Examples:

1. The Request will generate error, because the php page does not exist.
containerId specifies that the return goes to element with id=”load” and nativeConsole=false specifies that will not be a console:

$.ajax({
type: 'POST',
url: 'taeste.php',
success: function(msg){
alert(msg);
},
error: function(XMLHttpRequest, textStatus, errorThrown){
$(XMLHttpRequest).AjaxDebug({
containerId : 'load',
nativeConsole : false
});
}
});

2.The Request will generate error, because the php page does not exist.
nativeConsole=true specifies that the native console must be enabled.


$.ajax({
type: 'POST',
url: 'testea.php',
success: function(msg){
alert(msg);
},
error: function(XMLHttpRequest, textStatus, errorThrown){
$(XMLHttpRequest).AjaxDebug({
nativeConsole : true
});
}
});

example download

  1. No comments yet.
(will not be published)
  1. No trackbacks yet.
Free the web