This beginning tutorial covers the following topics regarding Firebug:
- Installing Firebug
- Opening and Closing Firebug
- The Firebug Window
- Edit your webpage in real-time
- The ubiquitous Box Model
- Evaluating webpage download speed
For the purposes of this tutorial it is assumed that you are currently using the Mozilla Firefox internet browser and have located the Firebug download area of Firefox Add-Ons at https://addons.mozilla.org/en-us/firefox/addon/firebug/.
Note: To enlarge the image, simply click on it and get a better view of the image.
Once you are at the Firebug area of Firefox Add-Ons simply click the “Add to Firefox” button to the right of the desired Firebug version.
Opening and Closing Firebug
There are two way to open and close Firebug.
a) Toggling F12 opens and closes Firebug.
b) Ctrl + F12 opens Firebug and undocks it into a new Firefox window.
c) Ctrl + F12 again docks the Firebug window into the main Firefox browser.
d) Shift + F12 deactivates (closes) the Firebug console.
a) Click on the Firebug icon in the upper right-hand corner of Firefox to open.
b) Click the right-most icon in the upper right-hand corner of the Firebug window to close.
Handy Firebug Console Settings
Modify the text font size (increase/decrease):
Open the Firebug console, left-click on the Firebug icon in the upper left-hand corner of the Firebug console. Select “Text Size” for a pop-out menu.
Have Firebug always open in a new (undocked) console window:
Open the firebug console, left-click on the Firebug icon in the upper left-hand corner. Select “Options”, then select “Always Open in New Window” in the pop-out menu.
The Firebug Window
HTML Tab: Shows HTML as DOM nodes in an indented hierarchy fashion. The individual nodes can be expanded/contracted to show/hide child nodes.
CSS Tab: You can display all loaded CSS style sheets with the CSS inspector tab and modify styles on the fly. To the right of “Edit” (at the top of the Firebug window) is a drop down that lists the loaded style sheets by name.
Net Tab: Allows you to monitor and troubleshoot how long each page resource took to download, also shows the HTTP request headers and server response sent for each resource. For AJAX debugging the XHR tab is especially useful.
Edit your webpage in real-time
By clicking the HTML tab and clicking a text node you can double-click on the text and modify it in real-time. Feedback is instantaneous because changes are immediately applied in the browser.
The DOM inspector, available by clicking on the DOM tab contains edit-in-place functionality of your document structure, not just text nodes.
In the CSS panel you can edit both the attributes names and values seeing the effects immediately. You can also add new attributes name/value pairs.
The ubiquitous Box Model:
Evaluating Height, Width, Padding, Border and Margin
The HTML tab allows you to inspect elements. The left pane shows the HTML and the right pane displays the CSS. Just above the CSS is a tab called “Layout”. This shows the CSS box model as it applies to the selected element. The browser window above applies color and shading to the actual page.
Evaluating webpage download speed
Continuing Learning with Firebug
This tutorial only scratches the surface of Firebug’s functionality – all of which is designed to speed website development exponentially.
Note: To get a better view of the images, simply click on them.