Friday, November 30, 2007

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:

image when you first arrive

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.

css view

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.

layout view

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.

dom view

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.

Screen shot of html editing 

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