Firebug for Firefox

If you’re a Firefox user and design websites, definitely check out the FireBug extension for Firefox. According to the Mozilla site:

FireBug [has] all of the tools you need to poke, prod, and monitor your JavaScript, CSS, HTML and Ajax are brought together into one seamless experience, including a debugger, an error console, command line, and a variety of fun inspectors.

FireBug | Firefox Add-ons | Mozilla Corporation

I’m still learning all of Firebug’s features, but so far, I’ve found the Inspect mode extremely helpful.

Using the Inspect tool, you can click on any item on a web page and see associated CSS and HTML and allow you to easily see the cascade of styles and find the areas in the stylesheet that apply.

Also, you can make real-time edits to the markup or styles and see the results in the browser.

That may not sound so hot, but if you’re new to CSS, or are working with multiple, or complex, stylesheets, it can spare some hair pulling.

One word of warning: be careful using both the Web Developer Toolbar and Firebug at the same time. If you’re using both plugins in the same window and editing CSS, be careful not to click page links or you’ll lose your changes.

For more info on Firebug, visit:

• The FireBug website for documentation, screen shots, and discussion forums.
  http://www.joehewitt.com/software/firebug/
• Firefox Add-ons Page
  https://addons.mozilla.org/firefox/1843/

technorati tags:firebug, css, html, firefoxextension