Kevin Henrikson

AJAX programmers today have many tools available to them. Here’s a quick overview of some popular ones.

• Debuggers
  Firefox - Venkman without a doubt is a must have for any serious JavaScript hacker these days. All the functionality you’ve come to expect in a debugger step in/out/over, set break points, trace the call stack, inspect variables, eval code on the fly; you get the picture. Up until recently Venkman only worked with Firefox 1.0.x, Joe Walker posted a version that works for Firefox 1.5.x.
  
  IE - JavaScript debugging for Internet Explorer is a bit trickier. You can use the Microsoft Script Debugger or if you’re willing to shell out some cash Visual Studio offers a richer debugging environment.

  Mozilla - Venkman ships by default with Mozilla, and provides a nice option for those who just want to get their browser and debugger combination in one shot.

• Integrated Development Environment (IDE) The choice of editor’s or IDE’s is sometimes characterized as a war. Not to pick and choose but Eclipse has become a popular editor for many web programmers. It’s roots are with server-side Java code but more recently the Web Tools Platform (WTP) has come along and aims to change that perception. They’ve made signific progress over the past year, but at the moment Eclipse + JSEclipse is my personal choice.  The JSEclipse plug-in has quick code-complete and simple, clear syntax highlighting.

• Syntax Checker JSLint - Slick syntax checker.  Catches all those stupid mistakes, and helps enforce good programming conventions.

  "JSLint takes a JavaScript source and scans it. If it finds a problem, it returns a message describing the problem and an approximate location within the source. The problem is not necessarily an error, although it often is. JSLint looks at some style conventions as well as structural problems. It does not prove that your program is correct. It just provides another set of eyes to help spot problems."

  Those are some tools any JavaScript or DHTML programmer would be hard pressed to get by without. 

  Know of a tool or program that you’d have in your AJAX Toolbox?  Post a comment!
  

In JavaScript eval() has long known to be evil. Take for example:

function foo(){}
foo["str1"] = "aaaa";
foo["str2"] = "bbbb";
foo["str3"] = "ccccc";

Elsewhere you need to lookup items from this structure. Where both “foo” and “str1″ are pass in as arguments. So like:

function lookUp(bundle, str) {
return eval(bundle[str]);
}

eval() will invoke a new scope and new compiler just to find and evaluate the string values. There must be a better way. Since foo is defined previously it’s available via the window object. So you can simply say:

function lookUp2(bundle, str) {
return window[bundle][str];
}

Pretty simple eh?

Found a problem with Opera’s XML/DOM support. Seems that they don’t support appendChild() if the document is created with an “” (empty) QualifiedName.

document.implementation.createDocument(”",”",null);

This only seems to be a problem if you try to append to such a document. Opera 8.x (and prior?) requires you to create the document with a QualifiedName like:

document.implementation.createDocument(”",”foo”,null);

This way appendChild will work as expected. Of course this works fine in Firefox and IE. It also apprears to be fixed in the upcoming 9.0 release of Opera.