FireBug- A Firefox extension to Inspect HTML CSS and modify style in real-time

• Tweet

• Tweet

The web developers or blog authors who edit their blog’s layout and pages usually face lot of issues when they view the page online.
A tool or plug-in or add-on which can actually does the code inspection will be very much helpful.If that tool can actually help in modifying HTML, CSS and java scripts in real time and if the result is immediate that is wonderful.
Here is a wonderful Firefox extension which can do all that.That is the FireBug.

The current version of FireBug is 1.5.2 and is available at Mozilla site.This version works with Firefox 3.5 and higher.
Firebug integrates with Firefox and offers development tools at your fingertips while you browse.

You can edit, debug, and monitor CSS, HTML, and JavaScript live in any web page.
The firebug will show as an icon on the Firefox status bar.

• Click the Firefox icon will open a window where a number of options are available.
• Click the selection tool and keep the mouse pointer over the element of the page which you want to inspect and click on it. This will show the underlying highlighted code in the firebug window.There you can inspect the HTML,CSS or JavaScript for any issues.
• You can edit the values of CSS style elements in the right hand side. The new value will be reflected immediately on the page.
• You can do try different combination to fix the error and update your original file and upload it again to your hosting server.
• Refresh the page and check again and repeat the steps if necessary.