Share

From this page you can share Debugging Your JavaScript Code the Easy Way to a social bookmarking site or email a link to the page.
Social WebE-mail
Enter multiple addresses on separate lines or separate them with commas.
Debugging Your JavaScript Code the Easy Way
(Your Name) has forwarded a page to you from Ajaxonomy
(Your Name) thought you would like to see this page from the Ajaxonomy web site.

Debugging Your JavaScript Code the Easy Way

Tagged:  

When developing Ajax applications finding a good JavaScript debugger is very important. If you have ever tried to debug JavaScript in Internet Explorer you know how bad the error messages can be. This has been the reason that many developers have thought of JavaScript as only good for a couple of effects (such as rollovers). The error console in Firefox does a much better job of actually pointing you in the right direction, but this can be better. Below is a list of good tools that will help ease the pain of JavaScript debugging.

The first good tool for debugging JavaScript is JSLint. JSLint is a free web application where you copy and paste your code into the site and it will check the code for you line by line. It does a good job of catching quite a few errors and will recommend some good coding practices. Unfortunately, the site will just list your errors and you have no options to step through your code.

jslint.jpg

The next tool is the Venkman debugger in Firefox. Venkman does a good job of finding errors and is closer to a traditional debugger. Venkman is a free plug in for Firefox that comes packaged with the browser, but when you install it you have to select the correct options to install it. The plug in can also be downloaded from Mozilla's site. The debugger allows for you to step through your code and gives a good overview of what is being called in the code. Venkman is a very good tool when you are chasing down a pesky bug in your code.

walkthrough-overview-large.gif

The third debugger is Firebug. While on the surface Firebug is very similar to Venkman (they are both browser plug ins for Firefox and both offer good step through functionality) where Firebug really differentiates itself is that it can find some obscure problems in your code that most debuggers would not catch. Firebug also has some great functionality where you can set break points only when a certain condition is met.

firebug.jpg

The last debugger is for the MyEclipse Pro IDE and is called the Eclipse JavaScript Debugger. The JavaScript debugger is pretty good and it gives you more of an IDE feel when your are doing your debugging. The debugger is part of the Ajax Workbench which gives you some great tools to debug your Ajax applications. The biggest downside to this toolkit is that it is not free for the debugger nor the IDE (since it requires the MyEclipse Pro IDE). This debugger is mainly useful for large enterprises as they will be more likely to pay for this type of tool.

This is just a quick roundup of what I think are some of the best JavaScript debuggers. While there are more debuggers available (such as included in Tibco's General Interface) these are some very good debuggers that are useful to most developers. If you use a debugger that is not mentioned here I would love to hear about it, so leave it in the comments.