The Firebug Workflow
Firebug knows that most developers have a tight relationship with their favorite text editor, and it isn't out to make you switch. Instead, Firebug gives you a place to experiment by playing with a live page in a separate text editor. This makes the browser's Reload button the equivalent of the Run button in a standalone IDE. For this reason, Firebug preserves the state of its views when you reload, so you can glide smoothly between your editor and browser without losing your place. However, you needn't always reload the page. Firebug lets you modify the page in place and see the result immediately.
Exploring Objects
Web development starts and ends with HTML, so Firebug gives you a lightning-quick way to find and inspect HTML elements that you are interested in. Hit the Inspect button, point your mouse at any part of the page, and Firebug unveils its place in the live HTML source. As you continue to move your mouse, Firebug follows you, which makes for a fun way to learn about the structure of web pages others have created.
An AJAX-ian web page never stands still. HTML nodes are constantly being created, modified, and removed by JavaScript. As changes occur, Firebug's HTML view stays up to date in real-time and highlights the changes in yellow. When you see things moving and changing in a page, this gives you a quick way to learn how it was accomplished.
The HTML view includes a second strip of tabs that give you other ways to inspect an HTML node. The CSS tab shows you the full cascade of CSS rules that affect the style of the selected node. One quick glance at the CSS view solves the mystery of why something doesn't look the way you expected it to.
Pixel Perfection
One issue that confounds new CSS developers is the box model, which defines the way a box is sized and where its contents are placed. The box model can be hard to pick up with the naked eye because of the transparency of margins and padding.
Firebug helps visualize the previously invisible. When your mouse moves over anything that represents an HTML element in Firebug, the element's rectangle in the page is highlighted, and its margin, border, padding, and content are each shaded a different color.
Positioning elements with CSS can also be challenging because you must always remain conscious of the container that defines its local coordinate space. Firebug helps you visualize this by using rulers and guidelines. While viewing the Layout tab, moving your mouse inside the box causes rulers to appear along the bounds of the element's container. Guidelines also appear tangent to each edge of the box so that you can see where the edges intersect the rulers.
