Evaluating Firebug

Thanks to Shelley Powers, I came to know the existence of Firebug, already quoted by other influential bloggers but overlooked by myself at the time of those readings. Firebug is a Firefox plug-in that lets you play with in an interactive way with various parts of web pages during browse and development activities. After a brief consult with the holder of LTI-LA (an Italian academic course at the Second Engineering Faculty of the University of Bologna), as course tutor I was given the task of evaluating the plug-in for use by students during lessons and in the laboratory activities afterwards.

There’s a whole load of things to Firebug, but what most concerned me were the HTML editing and CSS editing capabilities, the DOM explorer, and the JavaScript console. So, I loaded the sample HTML page used at the beginning of the course, and started tweaking.

Using the HTML editor, I was able to first change the name of the page’s author (hey, I am editing, now), then add a date indication for the copyright, and finally editing a new 3×2 table at the beginning of the page; everything just changed within fractions of a second after my modifications. Unfortunately, not every editing immediately showed up in the browser: I changed the title contents also, but Firefox didn’t change the line on its window and tab header.Besides, not every element was editable: in particular, I could not directly edit the head element to add a style element, since I decided it was time to start playing with CSS.

JavaScript came to the rescue. First I tried to change the style of a single element, just to see how it would have worked in Firebug. In the JavaScript console, which was hooked to the page loaded in the tab for which I activated Firebug, I quickly wrote:

>>> var goodbye = document.getElementsByTagName("p")[0]
>>> goodbye.style.textAlign = "right"

and voilà, the paragraph containing the goodbye greetings appeared to be right-aligned. I was ready for more broad changes, so I decided to edit the head element by using the JavaScript console again:

>>> var style = document.createElement("style")
>>> document.getElementsByTagName("head")[0].appendChild(style)

Then, switching to the HTML editor, the newly added style element was there, waiting for me to editing its attributes (adding the type attribute with value text/css) and introducing some, more general styles, such as h2 { color: red }. It all worked flawlessly, and in the process I learned that Firebug’s CSS editor works with CSS files linked to the HTML page, not with inline styles or styles defined in a head element as the ones I added through JavaScript and manual adjusting. We could provide students with another sample HTML file with a linked CSS so that they will be able to use also the Firebug CSS editor feature.

I was already hooked to the JavaScript console, then; so, I tried some brief experiments. With respect to other, more naive JavaScript environments, Firebug has the disadvantage of not showing the body of functions when asked to evaluate a function identifier. For instance, if you define square as the well-known mathematical function, Firebug just shows function() or anonymous(x) or square(x), respectively if you have defined it using the function() notation, the Function constructor or the function keyword. Simpler JavaScript environments, as used by other courses, manage to show also the complete source code for the function at hand. Apart from that glitch, the console behaved egregiously when tested with the code snippets contained in the lecture notes for the course. And it was even capable of doing E4X:

>>> xml = <person><name>Giulio</name><surname>Piancastelli</surname></person>
Giulio Piancastelli
>>> typeof xml
"xml"

As far as the DOM Explorer was concerned, the browser capabilities from the DOM Inspector classic plug-in have been more than enough for our purposes. The Firebug DOM functionalities work well in that respect, and additional features will be a bonus for more interesting students, while staying quietly on the background for the others.

I’m quite satisfied with this first try. Firefox 2, with Firebug and the Web Developer Toolbar, which contains more goodies like validation, form management and rich display of informations like access keys and the like, are the tools around which I will propose we try to build the practical laboratory activities for the students during the course.

~ by Giulio Piancastelli on December 12, 2006.