Mark Needham

Thoughts on Software Development

Javascript: Creating quick feedback loops

with one comment

I’ve been working quite a lot with Javascript and in particular jQuery recently and since I haven’t done much in this area before all the tips and tricks are new to me.

One thing which is always useful no matter the programming language is to use it in a way that you can get rapid feedback on what you are doing.

Fortunately there are quite a few tools that allow us to do this with Javascript:

Firebug

The Firefox plugin is perhaps the quickest way of getting feedback on anything Javascript and indeed CSS related.

The ability to see which HTTP calls have been made on a page is invaluable for checking whether AJAX functionality is working correctly and DOM manipulation can be executed and tested on the fly.

Including jQuery in a page effectively makes Firebug the jQuery Interactive Console, allowing us to try out the different functions and see their effects immediately.

Unit Testing Frameworks

There are several javascript unit testing frameworks around at the moment which run in the browser and provide the ability to write assertions on our code.

I have been using QUnit and screw-unit and while they work reasonably well for simple tests, neither seems to be at the level of JUnit or NUnit for example. I’m sure this will come as they mature.

Other frameworks I’ve heard about but not tried: RhinoUnit, JSNUnit, JSUnit, no doubt there are others I haven’t heard about yet.

Selenium IDE

The sometimes forgotten Firefox plugin is very useful for quickly creating repeatable scenarios to see the impact that code changes have had.

The beauty of this approach is that it takes out the manual steps in the process, so we can just make our changes and then re-run the test. The runner lights up green or red, taking out the need to manually verify the correctness of our assertions.

Alert

The ‘alert’ function is perhaps most useful when we want to quickly verify the path being taken through a piece of code without having to step through it using the Firebug debugger.

It’s probably more useful for proving our assumptions than actual debugging and it’s certainly quick and easy to set up.

Be Sociable, Share!

Written by Mark Needham

December 9th, 2008 at 9:13 pm

  • I used to use the ‘alert()’ function all the time. Lately I’ve been using ‘console.info(), .warn(), and .error()’ more often. These don’t stop you to wait for a click and give you varying message styles in Firebug.