Firebug

This week, we look at Firebug - perhaps the most useful Firefox extension ever made. If you use the (included) Web Developer toolbar in Firefox for debugging JavaScript and CSS issues, then stop - this one is much more useful.

Weighing in at just over 250kb to download, Firebug allows you to view and edit HTML and CSS, as well as debug Javascript all in real time. This is one extension any web developer would be ashamed to live without. Firebug quietly sits in the Firefox status bar and eagerly awaits your click to unleash it’s powerful features.

Below is a list of bullet points of some of Firebug’s key functionality, but you can read more about Firebug’s functionality by clicking the associated header links:

• HTML - Firebug’s HTML facilities reduce coding time and page refreshing during development.
  • Find any element on the page by right clicking on it and selecting ‘Inspect Element’.
  • View the HTML source of any page, both before and after DOM generation.
  • Edit the webpage’s source seeing changes appear on the fly.
• CSS - The CSS editor in Firebug is one of it’s most powerful features.
  • For each element you click on in the HTML, Firebug can tell you what CSS styles the element is inheriting, and which ones it is ignoring. You can also edit styles on the fly to see if adding that extra padding really does make a difference.
  • You can quickly hide and show styles and view the new page dynamically to see quickly what is causing any layout issues.
  • Use the layout tab to view rulers and guides on your page so you can line up every element.
  • If you’re learning CSS, you can use the up and down keys to rotate through all the possible CSS values for that property.
• JavaScript - The JavaScript debugger works very similar to how Microsoft Visual Studio debugs .NET code.
  • Browse all the page’s included JavaScript files with ease.
  • Find and locate any errors with Firebug’s error alerts.
  • Pause code by adding breakpoints by clicking on line numbers, by setting conditional breakpoints, or by setting Firebug to automatically pause whenever an error occurs.
  • Step through execution, examining variable values and which conditions are being hit.
  • Watch expressions and variables.
  • Check JavaScript performance, and add logging.

Convinced yet? Download Firebug here!

No love for Firefox?
There is also a version of Firebug available for other browsers called Firebug Lite. By including a single Firebug JavaScript file into your page you can access some of Firebug’s features from any browser.

Tags: Firebug, Firebug Lite