Firebug : HTML Development

Firebug makes it simple to find HTML elements buried deep in the page. Once you've found what you're looking for, Firebug gives you a wealth of information, and lets you edit the HTML live.

View source live

Firefox has a "View Source" window, but it doesn't show you what the HTML source really looks like once it has been transformed by JavaScript. Firebug's HTML tab shows you what the HTML looks like right now.
In addition, the tabs on the right side let you discover the properties of an individual element, including the CSS rules that are styling it, the pixels that define its position and size, and the DOM properties that you can access from JavaScript.

See changes highlighted

In any JavaScript-driven website, HTML elements are constantly being created, removed, and modified. Wouldn't it be nice if you could see exactly what, when, and where these changes take place?
Firebug highlights changes to the HTML in yellow immediately when they occur. If you want to spy even closer, you have the option to also scroll every change into view, so you won't miss a thing.

 

Instant HTML editing

Firebug gives you a really fun way to make experimental HTML changes and see them take effect instantly. You can create, delete, or edit HTML attributes and text just by clicking them and tabbing from one to the next. The changes will be applied immediately as you type.
If you're looking to do more than just make minor tweaks, Firebug allows you to edit the entire HTML source of any element. Just right-click an element and choose "Edit HTML..." from the menu.

Find elements with the mouse

Something in your page doesn't quite look right and you want to know why. There's no faster way to get answers than to click the "Inspect" button on Firebug's toolbar and then prepare for immediate gratification. As you move around the page, whatever is beneath your mouse will be instantly revealed within Firebug, showing you the HTML and CSS behind it.

 

Inspect, edit, reload

 When you inspect an element in the HTML tab, you can reload the page and Firebug will continue to show that same element (if it still exists) after the reload. This makes it easy to test when you make a change in an external editor and return to Firefox to see how it looks.

Copy the source

Right-click on any element, and you'll have several options for copying aspects of that element to the clipboard, including its HTML fragment, the value of its "innerHTML" property, or an XPath expression that identifies the element uniquely.

Quote from : FIREBUG