Tools: Firebug

Firebug is a web developers best friend. It is a powerful addon for the popular browser Firefox. It allows you to inspect any element on a page and edit it...live. This proves to be a powerful feature when debugging a site or even adding new elements, without the laborious task of change, save, refresh.

What is Firebug?

Firebug, as outlined above, is an addon for Firefox. It allows you to edit HTML and CSS; to debug javascript and assess general information on the site, such as load amounts plus much more. You can download it from www.getfirebug.com and is a must have for any web developer or web enthusiast.

The Firebug Window and Inspect

The usual way to activate Firebug is to hit the F12 key on your keyboard and it will appear as in integrated window in your Firefox browser, at the bottom. Alternatively, you can click the firebug icon in the bottom right of the browser window. The Firebug window itself is split into 2 parts, the toolbar and the main window. The toolbar contains the Inspect button, the Console, HTML, CSS, Script, DOM and Net tabs plus a variety of other elements such as a search bar. Below this is the main window where the code is showcased, such as the HTML or CSS. The Inspect button on this toolbar is the most important button in Firebug. Click it then hover over any element on the site and click again once you found the element you want. It will show the HTML for the element (in a hierarchical fashion in relation to the entire source HTML) as well as the CSS applying to it. There is highlighting code, such as the light, transparent blue and yellows which help you identify an element.

The HTML tab

There are several, tabs, panels, panes to Firebug for quick and easy access to its various features. The HTML tab is part of Firebug which is use most frequently. This tab is split into two distinct sections, the HTML pane and the Style/Layout/DOM (or as I refer to it as, the CSS pane).

The HTML pane displays the source code of the site, basically, all the HTML outputted to the browser in an easy to read, colour-coded and hierarchical manner. There are various options you can choose from such as Show Comments but I keep to the default settings. This pane has been great usability, allowing you expand/collapse code blogs with the adjacent arrows; to quick edit several elements such as the value of a class from one term to another, by simply clicking and editing or edit the attribute itself (class, id etc...); or you can right click and select Edit HTML where you will be presented with a new screen showcasing the raw HTML for you to edit. I use all these features, but most prolifically, the Edit HTML function. The ability to edit HTML on a live site is extremely beneficial as you can imagine, such as deleting elements, tweaking text and styles or adding a whole new section to check its appearance plus so much more. Most certainly, one of the best features of Firebug.



However, in a world dominate by CSS, having a pure HTML view would be redundant as you need to know what styles are dictating its characteristics. Therefore, to the right of HTML pane is what I term as the CSS pane, which is split into 3 tabs, Style, Layout and DOM, with Style being the default. As the name implies, this tab shows you all the styles acting on an element, whether that be from the HTML itself, a CSS stylesheet and other sources such as JS and PHP files. Similarly, as with the HTML pane, you can edit the CSS being applied which is incredibly useful for debugging purposes. The CSS entries are displayed with 4 distinct elements: the CSS tag, the attribute, the value and the file (with the line number) that it is loaded from. The attribute and value are editable, such as font-family and arial, sans-serif. You can always add new values by either, 1. right clicking and selecting New Property and being typing or, 2. Select the last value field in a block, unhighlight the text and hit enter. Hitting the enter or tab key will move your cursor from the attribute field to the value field, and in the case of enter on the value field, will create a new line if it is the last in the block. Another important feature of the CSS function of Firebug, is its auto-complete. For example, type f in the attribute field and it will automatically insert float, it does this for all CSS values it has stored which makes for quick CSS additions.



The Layout tab shows you all the metric values of the element, i.e. the offset, margin, border, padding, width and height. All, apart from offset, are editable from this screen. And the DOM shows you the raw data from the site, which in the case of most HTML/CSS debugging, can be ignored.

Below is a video that explains the HTML tab, which may help your understanding, along with the text above:-
Watch Now

The CSS tab

The CSS tab is a more advanced version of the CSS pane from the HTML tag. It showcases entire CSS files, where you an edit and add new properties like the Styles tabs but also has the facility to edit the whole CSS file (similar to the Edit HTML function) by selecting the Edit button, located to the right of Inspect on the Firebug toolbar. This makes it easy to insert, edit or delete large blocks of CSS which of course, affect the site live. This is useful when you wish to affect an element to a great degree and using the HTML tab's CSS pane would be slow and inefficient. Another feature is the CSS list. You will notice, to the right of the Edit button, the name of the CSS file loaded such as template.css. Click the name and a popup shall appear with the list of all the CSS files and their locations. Simply click on a file in the list for it to appear in the main CSS window.



Below is a video that explains the CSS feature, which may help your understanding, along with the text above:-
Watch Now

The Script tab

The Script tab is very similar to the CSS tab, in so far as it displaying the scripts in the entire firebug window, and has a list of scripts being loaded, their names and locations. However, it does not have the facility to edit, as is apparent with the CSS tab. Don't be fooled, it is still very useful when trying to find javascript errors. There are generally, 2 causes of a javascript error, 1. a conflict with another script, 2. the script doesn't exist. In each case, Firebug's script tab can assist you. For the first error, look through the list to see which scripts maybe the cause, such as a jquery file when you are using a Mootools based template, which is a common problem. Similarly, even compare this list with that of the demo showcasing your template to see what different files maybe the source of the problem. However, this is an indirect help as it doesn't tell which file is the cause of the problem but can be used wisely when debugging. Secondly, the 404 error, i.e. the file not existing can be easily found using this method. Just go through the list of files in Firebug and see if they load a script in the Firebug window, instead of a 404 error. However, using the NET tab maybe more effective.



Below is a video that explains the Script tab, which may help your understanding, along with the text above:-
Watch Now

The Net tab

This tab basically shows you the files that are being loaded on your site. It tells you the name, the location, the file size, if it is being cache and if it doesn't exist (it will display red if Firebug returns a 404 error). This is useful in assessing the performance of your site, as well as finding missing files or references to missing files.

The Console tab

I use this tab for 1 use and 1 use only, to find the source of a javascript error. When Firebug encounters a JS error on your page, it will display a red cross in the bottom right of your screen, with the number of errors. It displays the full data of these errors in the Console tab such as which scripts are in error, and what parts of these scripts. You would want to use the script tab method, of searching the scripts, to see if there is a possible cause as Firebug will not say (sadly), mootools.js is conflicting with jquery.js from FPSS. You have to do some detective work but it certainly helps in the debugging process.