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:
- Optimizing the speed of large JavaScript codebases using the profile tool.
- Finding the source of slow page loads using the Net tool.
- Hunting down weird CSS results by looking at the resulting styles in the CSS tab.
- 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.
Martin (January 22, 2007 at 6:18 pm)
Did you try the compressor by the Dojo guys (+gzip)? Does Packer give besser compression ratios? An advantage I see with the Dojo approach is that it uses Rhino and not its own parsing. It is safer that way. Another problem is that you cannot trace bugs on the live site in code compressed by Packer in Firebug.
John Resig (January 22, 2007 at 6:28 pm)
@Martin: The results that I’ve found from Dojo’s compression code are more akin to JSMin (in that it’s about the same size as the compressed code created with JSMin).
I’ll absolutely grant that it may be more debug-able, but it’s also much, much, larger than the results from Packer. This is also why we provide a JSMin build of jQuery, if you download and run the build files. (So that users can get some level of compression, while still keeping the file size small-ish).
Shawn Wilsher (January 23, 2007 at 12:29 am)
No DOM Inspector? No Venkman? Those are really powerful tools too! Especially for extension developers.
John Resig (January 23, 2007 at 12:52 am)
@Shawn: Hmmm… yeah, that really needs to change. They don’t hold a candle to Firebug (in terms of features or in ease-of-use, IMO). It doesn’t seem like it’d be “that” painful to get Firebug to work on a different base document element/window object. Definitely something to think about, though.
Fredrik Stöckel (January 23, 2007 at 4:18 am)
I’ve been searching for a slick IDE for js coding for a while, but haven’t found the one that I’m satisfied with yet.
At the moment I’m giving Aptana a try (very promising). What do you guys use for coding?
Shawn Wilsher (January 23, 2007 at 4:40 pm)
I would argue that DOMi is more powerful that Firebug in areas, but it isn’t so discoverable.
If there’s something you don’t like about DOMi, please file a bug! I’ve been slowly but surely making DOMi a better extension.
Andrew Bober (March 2, 2007 at 7:00 pm)
Hey Fredrik Stöckel…
Check out http://www.aptana.com. It’s a eclipse-based JavaScript IDE that’s very slick. :) A full IDE – not just a browser bolt on. So all your settings, breakpoints, etc are preserved from debug session to debug session.
I’m really surprised it didn’t make the list …