FireBug – FireFox Addon For Web Developers

Filed under: Web Design

There are a number of tools that you should add to FireFox to make your life a little easier. Probably the most important and mandatory is FireBug, This tool allows you to view the page source and examine the content of any page in a split screen or a popout window.  Syntax Highlighting is one of its great features along with collapsible container structures so you can find what you need and hide the rest.

And with that in mind is one of its most important features Inspect Element where you can click on any Anchor, Image or item of a page and be brought directly to that item in the source code. Along with showing the html source you will also be presented with CSS information in the right window that defines all the properties of what makes that element special. This is great for hunting down image backgrounds, margin and padding properties and other formatting information to get your work looking like it should.

Editing the page live is an amazing option.

This feature lets you browse to a live page and then edit parts of the CSS formatting to check changes.

This is really not as easy or functional as you might hope but you can modify or cancel out formatting very quickly and see the page update in real time.

Personally although there are some really impressive features in this plugin using the inspect element is the most useful part of this tool in my day to day work.

If you install FireBug you are likely to use its features in your own way.

Give it a shot it is free and definitely worth the install.