A short while ago we wrote about how to – Inspect web elements using Google Chrome Inspector – and discussed how this will immensely help Webmasters. But if Google can inspect web elements, can Firefox be far behind? In fact Firefox incorporates a very robust add-on which makes web development appear like a cakewalk as-you-browse.

Firebug is an essential Firefox add-on for webmasters and lets you edit, debug, and monitor CSS, HTML, and JavaScript live in any web page.

Features of Firebug:

1. Ease of Use:

• Use Firebug on a second monitor
• Open Firebug in a separate window, separate tab or as a docked toolbar(shortcut – F12 or CTRL+F12 for opening Firebug in a new window)
• Increase or Decrease Text Size
• Firebug has a unique feature called Blacklist and Whitelist: You can browse in two modes – enable Firebug for all websites except those on the Blacklist or disable Firebug for all websites except those on the Whitelist

2. Edit HTML Live:

• View live source(even that which has been transformed by Javascript and is not visible in Firefox view source)
• Create, delete, or edit HTML attributes and text by clicking them and tabbing from one to the next and see the changes taking place immediately
• Firebug highlights all changes to the HTML in yellow immediately when they occur
• Inspect elements by moving the mouse over them
• Use multiple source copy options

3. Develop CSS easily:

• Firebug shows you the rules that cascade together to style each element.
• Preview images and colours with mouse over
• Edit CSS and see the changes immediately(also comes with autocomplete to further speed up things)
• Increment and Decrement numerical values by arrows
• One click CSS disable
• Use multiple source copy options

4. CSS Layout editing:

• Box model shading for different elements for easy visualization
• Visual breakdown of measurements of layout
• Use rulers and Guides
• One click Layout editor

5. Network Monitoring:

• Relative timeline to show loading time for different elements
• Filter by File type, Representation of Cached/Non-cached data by colour codes
• Examine HTTP headers and XMLHttpRequest

6. Find Errors Quickly:

• Error indication in Status Bar
• Javascript errors with information with link to Debugger
• Filtering errors into Javascript, XML or CSS errors

Apart from these Firebug also has extensive support for:

• DOM (Document Object Model) editing
• Javascript debugging
• Javascript Command line
• Javascript Logging

Moreover Firebug has several little niceties like Autocomplete, Quick Search, Live changes etc. Makers of Firebug have also developed – Firebug Lite - a JavaScript file you can insert into your pages to simulate some Firebug features in browsers like Safari, IE and Opera.

Download Firebug here! You can also get the Firebug Lite Code here!