JavaScript Development Tools

This past week I attended Mashup Camp here in Boston – and was frequently asked what tools I used in development. I was quick to mention Firebug (I mean, I was giving a presentation on it, after all) – but I then thought about the other tools that I use in development and decided to expand on my list.

Firebug – I know that this has been said a thousand times, but let this be number 1001 – Firebug is a fantastic web development tool. In addition to all the features that everyone knows about, I’ve been using it extensively for a number of tasks:

  1. Optimizing the speed of large JavaScript codebases using the profile tool.
  2. Finding the source of slow page loads using the Net tool.
  3. Hunting down weird CSS results by looking at the resulting styles in the CSS tab.
  4. Giving presentations on JavaScript/jQuery.

I plan on writing about each of those much more. The end result is a Firefox extension that’s worth its virtual weight in gold.

Packer – The ultimate JavaScript compression tool. The next best thing to using GZip compression. I use this extensively in jQuery, so I know most of its ins-and-outs. Depending on the file, I frequently get files compressed down to 25-30% of their original size.

Rhino – I love Rhino. It’s essentially a collection of Java code that compiles JavaScript into Java. We use this all over the place to build jQuery. It’s great because we can take JavaScript code, like Packer, and run it on any server that has Java – all in the background, and all without ever opening a browser. Additionally, we get the benefit of only ever having to code in one programming language for the entire project.

Selenium IDE – This is the newest weapon in my arsenal. It’s a Firefox Extension version of the popular Selenium test suite. It is glorious. You hit the record button, click around your web site, hit stop – then play back the results. Save the script and use it again later to do some automated testing. I’ve used this on a couple sites now – it’s great for testing dynamic web applications. (Just add in some sort of a “reset the database” callback to your code, and you can run all the tests on your server, remotely.)

I plan on writing and demoing all of these tools some more within the upcoming weeks – they’re immensely useful, and I couldn’t live without them.

Posted: January 22nd, 2007

Subscribe for email updates

7 Comments (Show Comments)

Comments are closed.
Comments are automatically turned off two weeks after the original post. If you have a question concerning the content of this post, please feel free to contact me.

Secrets of the JavaScript Ninja

Secrets of the JS Ninja

Secret techniques of top JavaScript programmers. Published by Manning.

John Resig Twitter Updates

@jeresig / Mastodon

Infrequent, short, updates and links.