Firebug's HTML Feature

The next tab over on Firebug's interface is the HTML tab.  When you first click on the tab, you get a collapsed view of the HTML document and a window on the right that shows the CSS properties for the body of the document's body:

You can expand and collapse the hierarchy and select different elements.  Highlighting an element will overlay the element on the web page itself to show you where that element exists on the page.  Also, there's some breadcrumbing in the header of the window that shows your place in the element hierarchy.

In the CSS window on the right, you can see the CSS properties for the currently selected element, as well as any inherited styles from parent elements.

If you switch to the Layout tab on the CSS window, you can see information about the dimensions, padding, border, margin and offset of the element.

Click on the DOM tab, and you can see information about the elements as objects.  You can inspect their values as they exist on the client.

Another really cool thing you can do here, is edit the HTML and CSS on the browser, make changes real time, quickly.  This could save a ton of development time, as often times there's quite a bit of overhead in editing html in IDEs (especially when you're stuck in a spot where you've got some HTML going on in a code file, uggghhh.)

To edit, you can click on the edit button on the Firebug toolbar, and it switches the document, or the current element you are on into a text view.  You can edit the HTML from there.

 

You can also edit the CSS  in the CSS window, which again, is extremely useful for the development of a web pages.