The Firebug Firefox Addon

Firebug

Of all the bugs you could ever find in your code, the Firebug helps you eliminate bugs and assists you in tweaking your code to perfection!

Now, this is not a designing tool – but strangely, it has all the web development tools that you wish Dreamweaver has, mainly for tweaking and debugging the front-end or client-end.

Firebug uses the main browsing window of Firefox to let you debug code in WISIWYG mode.

Here are some of the features I like:

If you want to change padding, border or margin, you see it in neat boxes, which helps your designing skills and imagination (see image above – with the Layout tab selected, on the right). And then you see rulers and guides will start appearing in the browsing window!

Rulers & Guides

Box model shading in the main browser window.

If you select code in below, it gets highlighted in the browser window – shows you which DIV or section is being selected.

What is really great is that it is a tool allows you to Edit & Debug code, yet watch JavaScript, CSS & HTML in action while you modify the code !

More advanced features are:

• a very detailed and live debugging info / error
• DOM (Document Object Model) exploration & manipulation
• neat CSS & object inspector
• XMLHttpRequest and file loading monitoring
• and way too many more!

I think you will want to give it a try rather than reading this… Two thumbs up for this magnificent tool!

Download it here:

https://addons.mozilla.org/firefox/addon/1843

For more info, visit the Official Firebug website:

http://getfirebug.com/

????????:

http://getfirebug.com/jp.html