Firebug Firefox Addon Review

One of the most influential and essential add-ons from Firefox geared towards those who write code, Firebug helps with HTML, debugging JavaScript, and so much more. Firebug is a free and open source (BSD) extension for Firefox web browser users that allows you to do the following:

• Edit and review HTML
• Tweak CSS
• CSS Metrics
• Monitor your network activity
• Find errors quickly
• Explore the Document Object Model (DOM)
• Logging for JavaScript

Once you open Firebug in your Firefox browser, you can immediately look at the object model, styling and Web page markup with three helpful tabs: DOM, CSS, and HTML. If you do not enable other panels, these three tabs are helpful if you are either a CSS designer or HTML author.

Edit and Review HTML - While you are reviewing HTML, you can see all of the changes that were done, because Firebug highlights the changes that were made in yellow when you edit the code. What’s more, any of the HTML changes that you make are instantaneous. If you need to make edit the entire source of HTML, you simply right click on an element and choose “Edit HTML” from the menu options.

Tweak CSS - Firebug lets the user edit CSS easier than other programs. When you type, the changes are immediate. If you need to cancel the changes that you have made, you simply hit the escape key. If you are a new CSS user, you can use the up and down arrow keys to scroll through a complete CSS dictionary of keywords.

CSS Metrics - When you move the mouse over an HTML element, you will immediately see the boxes of the elements shaded in a different color on the page to help you visualize the difference between padding and margins.

Monitor your Network Activity - If you are one to write too much JavaScript, and you forgot to compress the images, Firebug is able to break it down with ease. You can break it down by type and even examine HTTP Headers by clicking the arrow immediately to the left for expanding. While many network requests aren’t the same, a few are directly loaded in the browser cache instead of the actual network. Firebug will color code the requests in a lighter gray color that will allow you to scan and see the effectiveness the site you are working on is using a cache to optimize the page load times.

DOM Exploration - When you edit the Document Object Model, you use the tab key to complete the name of the object properties. You can keep hitting the tab, so you can continue to cycle through all of the sets of possibilities. Also, when you use Firebug, you will be taken right to the highlight function and Script tab that will help you find the JavaScript functions that you would like to debug.

While Firebug allows you to locate and fix bugs and mistakes on the website that you are working on, you are able to immediately see why something isn’t working the way that you had initially planned. Many users love Firebug for all of the features that it offers, and since it works great with Firefox because it is an extension, it is always free of charge to use.

• 20 Must Have Firefox Addons for Every Webmaster
• HTML Validator Firefox Add-On
• SEO for Firefox Review
• Google Global Firefox Addon