Firebug Tips and Tricks
1 What is Firebug
According to
www.getfirebug.com
,
"Firebug allows you to edit, debug, and monitor CSS, HTML, and JavaScript
live in any web page".
2 HTML Debugging Tips and Tricks
If you click on the
HTML tab you get a hierarchical
view of the current page. (You may need to refresh the page after you
open Firebug.)
Next to each element is a + or - that allows you
to expand or contract that elemtn.
Hovering the mouse over an element will cause the rendered version of that
element to be hghlighted.
3 CSS Debugging Tips and Tricks
There are two ways to work with CSS in Firebug, one uses the
HTML tab in the left-side pane and one uses the
CSS tab in the left-side pane.
3.1 Using the CSS Tab
If you click on the
HTML tab (in the left pane), you will be
given a hierarchical view of the HTML.
You can then right-click on a rule and pull down to
Get Matching Elements to see all of the elemnts
that match that rule. The list of elements will appear in the
right pane, and hovering the mouse over an individual element will
highlight it in the document.
3.2 Using the HTML Tab
If you click on the
HTML tab (in the left pane),
you get a hierarchical view of the HTML document. In the right
pane you can then see either associated styles (in
the
Style tab) or layout (in
the
layout tab) information. Clicking on a
particular element will display information about that element.
Clicking on an element when the Style tab is selected
will display all of the rules that apply to that element. Rules that have
been superceded will be "struck through".
Clicking on an element when the Layout tab is selected
will display the box for the element. Hovering over a part of the box will
highlight that part of the box and display a ruler (that can be used to
determine pixel locations).
4 JavaScript Debugging Tips and Tricks
If you click on the
Script tab you get the ability to view
and trace any "script" that has been loaded. In addition to the obvious,
while tracing you can:
- Hover the mouse over a variable to see its current value.
- Click on the {} button to format the code
in the Firefox style.
- See and manipulate all breakpoints on the Breakpoints
tab in the right-side pane.
JMU - Department of Computer Science