Sketch Blog

Simple JavaScript Debugger using jQuery

Debugging has been one of the main tools developers use to detect and find application bugs. These tools vary from simple print statement to sophisticated tools such as IDE debuggers and profiling tools.

In Web development there are server and client side. Before the emergence of AJAX technology, few developers were interested to debug the client side. Partly because of the client libraries (Java Script) were simple and partly because the web interface did not use extensive javascript at the first place. However, this has changed with the RIA websites. These types of website heavily depend on AJAX and use too much javascript.

Luckily there are smart people on the Internet such as the creator of FireBug. Firebug let’s you debug and analyze the client side execution of your website. Also, there are other tools such as Visual Studio where you can debug the Javascript execution from within the development environment.

Unfortunately, the above tools require that you to do the test and the debug of the web app by yourself. What if you want to debug your users’ behaviors?

In this blog post I will show simple example where you can debug your web app behavior using simple print statements. These print statements (debug statement) will be sent through a partial post back to the server where it will be logged. If you want to look at more sophisticated solutions you can listen to Emre Kiciman where he introduces a tool he is working on which performs a set of analysis procedures to your javascript by rewriting the javascripts and inject debug statements in them.

One possible way is to make a javascript debugger that simply sends a debug messages to the server though AJAX call. Something similar to this

JavaScriptDebugger.debug(”This is nawaf”); - Note we are using Object Oriented Javascript code style !!!!

In the server log you will get

<JavaScript Debugger: 2009-02-09 01:04:26.197> <This is nawaf> <Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 6.0)>

The java script Debugger is a simple JQuery method that sends the debug message to a listener (Simply a servlet as attached )

/*****************************************************************/
// JavaScriptDebugger CLASS
/****************************************************************/

// This is java script debugger class that allow developers
// to debug java scripts on the user browser.
var JavaScriptDebugger = {
// This is the url where a listener is waiting for the debug statement to reach.
url: "/core/util/JavaScriptDebugServlet",

// Debug function that takes a text value as input and sends it to the server through AJAX call
debug : function(value)
{
$.post(this.url, {
javaScriptDebugMessage: value
}, function() {
alert('Your message has been logged.');
});
}
};

You need to add a mapping entry in your Web.xml just like this

<servlet>
<servlet-name>JavaScriptDebugServlet</servlet-name>
<servlet-class>sketch.core.util.viewcontrollers.JavaScriptDebugServlet</servlet-class>
</servlet>

<servlet-mapping>
<servlet-name>JavaScriptDebugServlet</servlet-name>
<url-pattern>core/util/JavaScriptDebugServlet</url-pattern>
</servlet-mapping>

Hope this helps

Attachments:
javascriptdebugservlet.java
javascriptdebugger.js
jquery.js