Firebug Tutorial – Getting Started

Firebug is a Firefox browser add-on that specializes in putting several web development tools in your hands while you surf the web.  Firebug allows you to edit, debug and monitor JavaScript, CSS and HTML in real-time on any web page.  It also allows you to explore the DOM (Document Object Model) to create CSS selectors in conjunction with JavaScript to create dynamic Web 2.0 webpages.

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.

Installing Firebug

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.

Keyboard Shortcuts

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.

Mouse Actions

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

Console Tab: Displays JavaScript error message log, JavaScript commands can be entered and executed in the pane to the right.

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.

Script Tab: See the list of included JavaScript files and select one to view from this pane by clicking on the drop down list on the top of Firebug window. Set breakpoints and conditions by click on the script line numbers to the left of the script pane.

DOM Tab: Displays the DOM (page) objects and properties of the window. Because variables are properties of the window object, Firebug displays all JavaScript variables and their values to the right of the DOM objects.

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

The Net tab displays the request times for all http requests for a given webpage.  When working with JavaScript heavy pages this can demonstrate that the scripts are at the bottom of the page. This does not lessen total download time but to the user the page appears to download much faster.

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.

Thank!