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.

Hi,

For IE, there are DebugBar (http://www.debugbar.com/) and Companion.JS (http://www.my-debugbar.com/wiki/) that give DOM inspector, HTTP sniffer, JS console, JS detailled error info, etc...

Regards.

JFR
http://www.debugbar.com

David;

Great post with some useful links. I wanted to point out that while MyEclipse Pro is a commercial product, large enterprises are by no means the only consumers of it. As you may know, the IDE costs only $50/year to take advantage of all the Pro features, and we have found that the entire range of developer personalities from the hobbyist level to the most experienced professional take advantage of that low pricing.

I'm glad you are currently using and enjoy MyEclipse, and hope we'll be included in your future posts.

As an aside, Genuitec just launched Pulse (http://www.poweredbypulse.com), that can help you manage and maintain many free and commercial products simultaneously. I would recommend checking it out. It's a free product! :-)

Best,
Jens

If you are developing for IE, 2 good debugging tools are:

1. Microsoft Script Debugger (http://www.microsoft.com/downloads/details.aspx?FamilyID=2f465be0-94fd-4...).

2. IE Developer Toolbar (http://www.microsoft.com/downloads/details.aspx?familyid=e59c3964-672d-4...)

i also use Companion.JS in IE, just so so
firebug feels good

[...] Debugging Your JavaScript Code the Easy Way by Ajaxonomy (tags: javascript debugging ajax debug webdev web development) [...]

Post new comment

The content of this field is kept private and will not be shown publicly.
  • Allowed HTML tags: <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd> <pre> <div> <blockquote> <object> <embed> <img> <param>
  • Lines and paragraphs break automatically.
  • Web page addresses and e-mail addresses turn into links automatically.

More information about formatting options

CAPTCHA
This question is for testing whether you are a human visitor and to prevent automated spam submissions.
Copy the characters (respecting upper/lower case) from the image.