Firebug is a full-featured web development extension for Firefox. It features several tools for developing markup and style sheets, as well as for debugging JavaScript and dynamic web pages.
The tools include:
- Integrated HTML and CSS Editors
- Computed Style Viewer
- Box Model Inspector
- JavaScript Debugger with Breakpoints
- Net flow analyzer
- Console Profiler (A great tool for AJAX developers!)
This week, I will focus on using Firebug to examine element boxes.
Installing Firebug
To install the free Firebug add-on, visit the
Firebug homepage
Click on the Install Firebug button. The following dialog will appear.
Click on the Install button to install Firebug. You will need to restart Firefox after installation.
The Firebug Interface
After you have installed Firebug, you will notice a small green checkmark icon at the right end of the Status Bar.
This icon also serves to indicate any JavaScript errors on the page.
If the document has any JavaScript errors, then the green checkmark will be a red 'x'.
(Of course, I can't seem to find any pages that have JavaScript errors at the moment, so I can't get a snapshot of the red 'x' icon!).
Clicking on the green checkmark (or red 'x') icon will start Firebug so that you can examine the current web page.
Let's look at the Firebug Interface.
First, view the
Using the Box Model In Practice
lecture document [this link opens the lecture in a new window so that you can continue
reading this tutorial].
Now click on the Firebug icon in the status bar to start Firebug.
The Firebug Menu Bar
The menu bar is at the top of the Firebug window
At the left end of the menu bar, you will find the Firebug Control drop down menu, the Inspector, the Editor, and the DOM Navigator. We will discuss these when we examine some element boxes.
At the right end of the menu bar, you will find the Search dialog, the Undock button, and the Firebug Close button.
The Search dialog enables you to search for text in your document. It is useful for quickly going to a DIV with a specific ID, or a paragraph with a specific class assigned to it, or just locating a paragraph with specific content.
The Undock button allows you to break Firebug out into a separate window so you can view more of your web page while you are using Firebug.
The Firebug Inspector and Properties Panels
The Firebug window is divided into two panels, much like the DOM Inspector. The left panel is the Inspector panel, and the right panel is the Properties panel.
The Inspector panel enables you to examine your markup and your style sheets. The other tools allow you to debug AJAX applications, JavaScript and conduct bandwidth analyses, so we won't be discussing them here.
The Properties panel allows you to view the rules that apply to any element and also examine and modify the box model characteristics for an element. You can also view the properties of any DOM node, but we won't discuss this feature at the moment.
Navigating the Document Hierarchy
When you first invoke Firebug, the Inspector panel shows a collapsed view of the document hierarchy, with only the HTML, HEAD and BODY tags in view.
Click Inspect on the Firebug menu bar. This allows you to click on any element in the browser window to examine it.
In the browser, scroll toward the middle of the page and locate the blue-on-gray 'Rendered Example' that resembles the image below.
In the browser, float the cursor over different areas in the document. You will see that the Inspector panel expands the markup hierarchy as needed to display the markup for the element that is under the cursor. Also notice that the information in the Properties panel shows the rules that are being applied to the element under the cursor. (You can also select an option in the Properties panel to show computed styles for the element! Select it in the Options drop down menu)
In the browser window, click on the blue content area of the 'Rendered Example'. This will 'lock' the Inspector onto the "headingBox2" DIV, as you can see in the Inspector panel.
Note that the DOM Navigator shows that the headingBox2 DIV is currently selected, and it is a child of a DIV with the "wrapper" class, which is a child of the "content" DIV, and so on ...
The DOM Navigator is a quick way to jump up and down the document hierarchy. It works like 'cookie-crumb' navigation on a web page. Clicking on any of the elements listed in the DOM Navigator will 'lock' the inspector on that element.
If you examine the DOM Navigator in the above image, you will notice that the parent of div#headingBox2 is displayed as div.wrapper. However, if you look at the markup, there are two classes assigned to the parent DIV. This is something to be away of. If you plan to use Firebug for debug, you should list the most descriptive, or significant class first value field for the class attribute. By doing this, the Firebug DOM Navigator will be more informative.
Now, let's use Firebug to examine the box model.
Using Firebug to Examine Element Boxes
Firebug is a great tool for examining element box properties.
It will display the content area, padding and margin for any element as shaded areas over the element in the browser window.
The box model properties are highlighted in the following colors:
- Blue: Content area
- Purple: Padding
- Gray: Border
- Yellow: Margin
Let's see how this works.
Move your cursor inside the Inspector panel, hovering the cursor over the various lines of markup displayed in the panel. As you move the cursor over various elements in the Inspector panel, the element box properties are highlighted for each element in the browser window.
Float your cursor over <h4>Rendered Example</h4>.
In the browser window, you can see yellow and blue rectangular areas over the 'Rendered
Example' text. Thus, you see the content area in blue, and the yellow area tells you
that this H4 element has top and bottom margins, but no horizontal margins and no padding.
Let's look at a more interesting element box.
Float your cursor over <div id="headingBox2"> in the Inspector panel . In the browser viewport, the headingBox2 element box is highlighted with blue, purple and yellow. These correspond to the content area, and the padding and margin widths of the element.
The Layout Object
While you are still 'locked-in' on the headingBox2 DIV, go to the Properties panel and click on the Layout tab. This displays the dimensions of all the properties of the element box.
Float your cursor over the various parts of the box model. In the browser, not only do you see the colorful shading that highlights each property of the element box, but you also see guides that show the outer edge of each of the box properties as you pass over it in the Properties panel.
You can click on the various dimensions in the Properties panel to dynamically modify the properties of the box. If you click on a dimension, you can use the up and down arrow keys to nudge the size of the particular property a pixel at a time while viewing the effect in the browser.
To select a different element to examine, you can either:
- Click on the element name in the Inspector panel, or
- First click Inspect in the menu bar, then click on an element in the browser window.
We've just touched the surface of the many useful tools in Firebug. The HTML and CSS tabs in the Inspector panel allow you to make changes to the markup and the style sheet and dynamically view the effects of those changes in the browser window. I will cover these tools in detail in the near future. Meanwhile, I invite you to play around with Firebug to get comfortable with selecting elements and viewing properties of the elements.