For those that are not aware Firebug is a add-on for Firefox, and is essentially a development debugging tool, that allows you to inspect various aspects of a web page.
It has become – for those that have used it for a while – one of those indispensable tools that make day to day coding life that much more productive.
This post is by way of introducing those unfamiliar with it to it’s most basic functionality, I do not attempt to explore any of the deeper functions but concentrate on the HTML / CSS tools available.
The image below shows the Firebug console on initial activation.
The HTML tab is selected and this shows an initial view of the pages markup in the panel to the left hand side at the bottom. To the right is a view of the CSS rules that apply to this page and to this element specifically in the initial view and is selected using the tab above marked ‘CSS’ (more about the other views later).
The image above shows the options selectable for the HTML markup view.
The important options are the three bottom ones:
- ‘Highlight changes’ this will place a background to the element being viewed or that is receiving focus and helps greatly when the markup dynamically changes
- ‘Expand changes’ this feature will automatically reveal collapsed branches in the markup (note the plus sign against the element nodes in the makup view which are clickable to inspect nested detail) when the page refreshes or one inspects an element in the main viewport (see later explanation on ‘inspecting’)
- ‘Scroll Changes into view’ very useful as this moves the html view to the element in question rather than you have to find it in a large and complicated page
Next is where Firebug starts to get interesting!
The image below shows a view when one uses the ‘inspect’ button whilst in html view
Note the blue bounding border around the text in the viewport; when you click the ‘Inspect’ button you can then move your pointer over any portion of the rendered viewport display, as you highlight elements they will be demarcated by the blue border, as this happens you will notice two things occurring firstly the html markup view will be scrolling to the element that you have hovered over and the CSS view in the right hand pane will jump to the specific CSS rulesets that style this element.
When an element is highlighted you may click on the element and this will ‘fix’ this element in the two view panes in Firebug allowing you to further inspect aspects without loosing the focus on that element.
The image above shows a further method to inspecting elements and one that provides a further level of detail that is extremely useful. By clicking on any element in the left hand Firebug pane showing the page markup you will be able to highlight the elements padding and margins, this can be seen as the yellow highlight which represents the margins of the element and the purple highlight which represents the elements padding applied.
Moving on to the CSS aspect of Firebug demonstrates some invaluable tools and information that make dealing with CSS cascade and inheritance much easier and is perhaps is a feature above all others that would justify installing and learning to work with Firebug.
Looking at the right hand pane showing CSS rulesets shows us some very important information firstly it show us all the rulesets and properties that have been applied to the element highlighted in the left hand pane but much more than that it shows us specifically the specificity order of those rulesets in other words it shows us those rules that carry the heaviest most important weight first it then shows rulesets of a lesser value but that have been applied to the element, and thirdly it shows us properties that have been inherited by the element from parents or ancestors, note the “Inherited from div.content” heading, this is telling us that there was a font-size applied to any div with a class ‘.content’ and that as .submit and/or a paragraph was a child element of that div.content it had inherited that font-size; which brings us to the final feature of this CSS view, note the strikethrough on that inherited ruleset font-size, Firebug is telling us that in actual fact although this property was inherited in reality it was overwritten bu a more specific font-size described on the child element.
This set of features and information make debugging CSS problems extremely fast and far easier than having to wade through the stylesheet trying to understand where there might be an inheritance or specificity issue. On a final note please observe the line numbers to the right of the rulesets these correspond to the actual line numbers in your stylesheet which further speeds up locating specific rulesets; In the examples I have used grabbed from the forum It went unnoticed until too late that cetain styles/stylesheets appear to be ‘packed’ or ‘minified’ and thus all rulesets are in fact collapsed to a single line to preserve space and reduce file size, hence we mainly see ‘(line 1)’ normally this would show as mentioned earlier, an example of actual line numbers can be seen if you look further down at the third rulest that has a file name html.css and a line number of ‘(line 65)’
A further aspect of the right hand view can be seen in the image below where the ‘layout’ button has been selected. This speaks for itself but briefly it shows the aspects of the elements box model.
Lastly in either viewing pane one can edit in real time either the markup or, as shown in the image, the CSS rulesets, you can add new properties, delete existing ones or simply modify existing ones.
Conclusion:
Firebug is a very powerful tool and one that simply increases ones productivity; I can’t stress enough though that I have only scrapped at the surface of what it can show and do and concentrated on the basic HTML/CSS features, if you’re working with client side scripting Firebug becomes equally indispensable in allowing you to observe in real time dynamic changes to the page.
There are other aspects that I leave to the reader to discover but once you do you’ll realise why you can’t really do without this tool 🙂