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.
The Firebug Window and InspectThe 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 tabThere 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:-
The CSS tabThe 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:-
Below is a video that explains the Script tab, which may help your understanding, along with the text above:-