Wednesday March 15

FireBug: A Love Story

Once upon a time, when I was a very young man, I fell in love with a maiden called the World Wide Web. It was a torrid affair, complete with romantic strolls through MSDN, beautiful bouquets of CSS, and passionate letters scrawled in JavaScript. She was wild and untamed, but my love for her burned brightly. One midsummer's night in the year 2000, the World Wide Web and I had a falling out. I was moving too fast, she cried, to which I replied that I could not love a lady who I could not control or predict.

And so we parted and did not speak again for many a fortnight. I moved away to the desktop, grew a beard, and built myself a cabin out of C++ logs. I learned how to hunt and fish and live off the land. It was a lonely and desolate life on the desktop.

One day, late last year, there was a knock on my door and it was the World Wide Web. Before me she stood just as beautiful as a decade ago, but now a grown woman with eyes full of longing. My love for her awoke, but so did the painful memory of her wild and untamed ways.

I said to the World Wide Web, "I will marry you, but you must promise me three things. You must give up your wild and untamed ways. You must learn to hunt and fish and live off the land. And you must move with me away from this desktop to that yonder hill where we will build a new cabin of logs." She said to me, "I will, but only if you will shave that awful beard."

And so I did shave my beard, and together we lived happily ever after.

And that is my stupid way of explaining how FireBug came to be.

In more specific terms... I came to rely on "printf debugging" methods during my years of exile in desktop programming and when I returned to developing web applications last year I felt naked without them. So without hesitation I built a console and command line into Firefox and learned to love the web all over again.

That's why I'm always surpised to hear people call FireBug "innovative". It shows just how weak the web developer's toolbox has become that something as old school as a console would be considered novel.

FireBug Future

FireBug is, however, growing into much more than a console. I've been experimenting with a number of new features, and I'd like to share some of them with you before I release them officially.

The big theme in the next FireBug is "instant gratification". My goal is to make every aspect of a web page inspectable in the snappiest way possible. So let's go on a little tour.

Tabbed Inspecting

I find FireBug's current inspection model to be rather awkward. It dumps every element you inspect into the console. When you click on the little inspection buttons, everthing jumps around in a way that I find jarring. So, my solution is to add a strip of tabs to the FireBug toolbar which are your new inspection hub.

Instant Inspecting

The other big change in FireBug is what you might call "instant inspecting". Let's look at how this works using the HTML inspector tab:

When you hit the "Inspect" button, mousing around the page will reveal the source of the element under your cursor "in real time". Having the source instantly expand to reveal what what you touch is quite fun - it gives one the sensation of panning for gold. You can then use the arrow keys to select elements that you can't seem to touch with the mouse.

If you click the element, it will become permanently selected until you hit the "Inspect" button again. If you hit escape, it will revert the previously selected element, which allows you to quickly peek at an element without losing your current context.

Reverse Inspecting

Sometimes while you are looking at an inspector, you will see a reference to an object and wish to see this object in the page itself. So wherever I could, if you mouse over the reference inside FireBug, the element in question will be highlighted on the page.

For even more fun, if you mouse over a CSS selector, it will highlight all of the elements on the page that match the selector.

Computed Style

The next big feature has to do with CSS inspection. FireBug currently has it backwards. It shows you all of the CSS rules that match an element, which is nice. However, in my experience, CSS debugging usually starts with a question like "Why the $#@!#@ is that thing blue?!" The answer is best answered by looking at the "computed style" of the element in question. So, FireBug now has a "Style" tab which will show you the computed value of every CSS property, along with a pointer to which CSS rule and file the value came from.

DOM Editing

Finally, I have also begun to add some rudimentary source editing features to FireBug. For now, there is only the ability to edit the value of DOM attributes inline within the HTML tab, but in the future I will add the ability to edit CSS values, JavaScript properties, and to insert or delete DOM elements.

I'm not yet ready to release this version of FireBug, but if you would like be a guinea pig, I'd be happy to let you try a development build. Just drop me an email.