The first developer's rule should be “Never stop looking for better tools”. I've just finished preparing some material for a programming course I'll be holding, and I needed to define the development environment for the familiar (X)HTML / CSS / JavaScript trio. I had originally planned on using a plain text editor, together with Firefox, and my previous favourite development add-ons; Chris Pederick's Web Developer, and Venkman.

Fortunately, I decided to spend a little time checking out if anything new had appeared recently on the horizon. Well, it has, in the form of Joe Hewitt's Firebug. I'll probably still keep Web Developer, but Firebug has plenty to offer, over and above the rest.

Firebug gives you XHTML, CSS, and JavaScript editing and debugging all within one add-on. Jesse Newland has made a nice screencast of Firebug, showing the most salient points.

I've used a simple JavaScript tutorial I wrote for my screenshot example:

Beneath the location toolbar is the Web Developer toolbar. At the bottom of the screen is Firebug, displaying the song lyrics (which were generated by JavaScript, so Firebug is showing the in-memory DOM), and the right hand pane is showing the div element layout. The border, background-color, and padding styles were added by hand using Firebug's CSS editor.

Note that while it is possible to edit the HTML, CSS, and JavaScript, these modifications are not permanent, and will be cleared if the page is refreshed.

The most important key strokes are F12 to open Firebug in the browser pane, or Ctrl F12 to open Firebug in it's own window.

I have found the UrlParams add-on invaluable on occasions when debugging server side code. It can also be used to experiment with “code breaking” parameter combinations.

The HTML Validator makes sure that I'm not making life any harder for myself by creating invalid HTML. Based on Dave Raggett's HTML Tidy.

Just when I thought things couldn't get better, I decided to check out the Aptana site, to see if the original Aptana IDE had been updated. Low and behold, it had.

The product is now called Aptana Studio, and has a special version of Firebug which allows debugging within Firefox to be controlled from the IDE. The integration is not exactly seamless. You can set breakpoints in Aptana Studio which Firebug will see, and you can make changes to the source code, but you'll have to reset the debugger to see those changes executed.

The HTML editor offers a DOM outline, and code completion with browser specific notes:

Unfortunately, all tags are offered at any one point – there are no checks made against the DTD to limit your choice to only valid tags. Pity.

The CSS editor also offers a styles outline, and the same type of information for code completion:

The JavaScript editor offers an environment outline, and provides browser specific code completion:

The debugger launches Firefox, but allows breakpoints to be stores between sessions (Firefox window shown in the top half, Aptana Studio in the bottom half):

Opening the Firebug window shows further information at the breakpoint set in Aptana Studio (Firefox and Firebug windows in the top half, Aptana Studio window shown in the bottom half):

As I said before, Aptana keeps your breakpoints, but there's no integration of the editors, so you'll have to start a new debugging session after making (and saving) your changes.

Syger can be contacted for consultancy work on any of the topics mentioned in this article, by sending an email to info@syger.it.