Automatically Finding JavaScript Errors: Trailing Commas, IE7

Creating a fluid user experience in the Amaxus Web CMS interface requires a vast amount of sophisticated client-side development in JavaScript.

Because JavaScript is an interpreted language, it does not go through a compiler to give us syntactic peace of mind before reaching the browser. This can be problematic as Internet Explorer is a fiddly beast at times. Lots of things that work on Firefox do not work on Microsoft’s browser.

The most common IE problem we encounter is trailing commas in arrays. It doesn’t cause problems with Firefox, but it’s syntactically invalid and crashes IE. IDEs like NetBeans do highlight such errors but sometimes things slip through. IE7 and earlier versions have particularly vague error messages, so with a large product like Amaxus, we decided to play it safe and check all our code on a regular basis.

Douglas Crockford first developed a tool called JSLint way back in 2002. You can paste JavaScript into this tool to find errors, which is great, but it is a lot of work and hard to automate. Rhino is a JavaScript engine that runs in Java. In this example, we worked in Debian Linux, but you could just as easily implement this on a Mac or Windows box. We installed Rhino via:

apt-get install rhino

We then downloaded and concatenated http://www.jslint.com/fulljslint.js and http://www.jslint.com/rhino/rhino.js into a single file /usr/bin/jslint.js. We edited this file to set the options we wanted to check for. In our case, we only wanted to find the errors that cause IE7 to die. We also set up some of the common global objects we use (“predef” section).

...
if (!JSLINT(input, {bitwise: true, eqeqeq: false, immed: true,
            newcap: true, nomen: false, onevar: false, plusplus: false,
            regexp: true, rhino: true, undef: true, white: false,
            sub: true, browser: true, laxbreak: true,
            predef: ['Ext', 'Amaxus', 'jQuery', 'window', '$', 'ActiveXObject']
    }))
...

Next we created a simple script that checks an individual file for errors and highlights them in red. We put this in /usr/sbin/checkForJsErrors.sh:

echo $1
rhino /usr/sbin/jslint.js $1 | fgrep -e 'Extra comma' --color=always

We created the wrapper script /usr/sbin/chkThisDirForJsErrors.sh to make it easy to run:

find . -name "*.js" -exec checkForJsErrors.sh {} \;

Finally, going into the root directory of the project and running “chkThisDirForJsErrors.sh” will highlight any trailing comma errors.

Summary

This is a pretty rough solution but it has proven effective in finding those pesky trailing commas.

We’ve incorporated it into our CruiseControl build loop so that any errors that get introduced will be flagged up immediately.

CommentPosted on 21st December 2009

2 Comments

  1. Dominic Mitchell said... 21st December 2009

    You might like my small wrapper around jslint, jslint4java. You can run it from the command line, or as part of an ant task,
  2. Dominic Mitchell said... 21st December 2009

    That's available from http://code.google.com/p/jslint4java/ as I can't use HTML markup. :)

Post Comment

Amaxus: The Most Efficient Web CMS Ever Made
The Amaxus Web CMS Widget Manager

The Amaxus Content Management System offers a sophisticated feature set, across hundreds of highly-configurable modules; all within the most usable Web CMS interface available.

Latest News

RSS
The new website and member network of BCS, The Chartered Institute for IT, both powered by Amaxus, has won the Best use of Web/Digital Award in the Transform 2010: The UK’s Rebranding Awards.

Behind the Scenes

RSS
Posted on 27th April 2010 | 1 commentsContent has always been king on the web; the web is content. It's no surprise, then, that we may be taking traditional web content - and therefore traditional web content management - for granted, and are widening our focus to new content services and tools.

Get In Touch

Whether you’re an existing client, are investigating Content Management Systems for an upcoming project, or are interested in our Partner Programme, get in touch today.