FireBug – The King of Firefox Validators

Being 2006 and all, you would think it should be difficult to get excited about markup validation extensions for Firefox. Nevertheless, I have to say Joe Hewitt’s new offering Firebug has to be the most impressive new developer extension I’ve seen for a while (ok,ok,.. since IETab).

The Auto Validator:

Firebug in action

In its inactive mode Firebug’s auto-validator is completely invisible on valid pages, and displays a simple ‘error counter’ in your status bar on pages with errors. Definitely less is more. Clicking the counter folds out a feedback toolbar detailing each error.

Although the error description is certainly handy enough, the killer feature for me is the ability to click on an error location and have it instantly highlighted in the source — especially useful for subtle problems like a missing ‘;’ or an extra ‘,’ in CSS.

The best endorsement I can give for this tool is I’ve actually found myself fixing the little niggling validation problems simply because they’re just so effortless to identify now.

The Element Inspector:

Firebug' Element Inspector

Firebug’s Element Inspector is similar in many ways to Nicolas Moreau’s excellent ‘Inspect Element’ extension but slightly more elegant in operation. Activating it lets you highlight any visible page element with your cursor. Selecting an element plucks it to the toolbar below and gives you instant access to it’s HTML source, the CSS rules directly targetting it, a ‘box model’ view of the attributes effecting it, and a DOM-level view of the object — all without ever losing sight of the page you’re working on.

Very fast. Very slick.

As I said, not much that hasn’t been done before, but I doubt it’s ever been tied together so usefully. Check it out.

Win an Annual Membership to Learnable,

SitePoint's Learning Platform

  • anty

    Firebug is really awesome! I tried it some days ago and really love it. It’s easy, fast and intuitive.

  • Ryan

    Hmmmm I’ll have to try this but it sounds exactly like the HTML Validator extension I’ve been using in firefox for, oh god knowns how long.

  • Ryan

    Oh sorry i see its for javascript, doh!

  • http://www.sitepoint.com AlexW

    Ryan, it does incorporate a fair bit of HTML Validator’s functionality and works perfectly well along side it. HTML Validator’s souped-up ‘view source’ is still the way to go, but Firebug brings a much broader range of data to your fingertips.

  • http://www.lowter.com charmedlover

    Looks cool. :D

  • ronanmagee

    Has anyone checked out google.com with it – theres 2 errors on the page and I cant figure out why they are being highlighted

  • Sojan80

    How though does it interact, and react with other supremely useful extensions like Chris Pederick’s Web Developer extension?

    Has anyone had any problems with using firebug and web developer?

  • malikyte

    :( It only works with Firefox v1.5 or greater. Oh well, I’ll have to wait until Mozilla feels their ready to update v1.0.7 to the 1.5 versioning… This looked like a really cool extension too. I use WebDev and Tidy HTML Validator, but this would be yet another tool in the arsenal of learning.

  • http://www.whitelionsoft.com veslach

    Sad thing is, our Opera guy found FireBug & was using it before me… I immediately went back to my desk & installed it. As to it messing with the other extensions it doesn’t seem to be causing any problems.

    My other extensions include – All-in-One Sidebar, Codetch (i’ve had some other issues with this 1), Colorzilla, Console^2, EditCSS, Greasemonkey, Html Validator, IE Tab & IE View, LinkChecker, Live HTTP Headers, MR Tech Local Install, NoScript, UrlParams, User Agent Switcher, View Rendered Source Chart, Web Developer, XHTML Mobile Profile, XPath Checker, & XPather.

    I’m hoping the “View formatted source (format source extension)” gets updated to 1.5 as I preferred that over the “View Rendered Source Chart”… I’m currently working on a Javascript app & the “View formatted source” let’s you see what javascript has modified & also iirc gives you a listing of all css affecting the element on mouseover.

  • http://www.mitchellgallery.us DSMag

    Looks very sweet – can’t wait to try it. Thanks for sharing.

  • DevonWright

    “Has anyone had any problems with using firebug and web developer?”

    I have both installed and haven’t had any problems.

    Installed this a couple minutes after reading this, love it. My boss loves it too.

  • John

    Just a nit-picky thing: It’s “Firefox” (first paragraph, main article).

  • http://www.sitepoint.com AlexW

    Just a nit-picky thing: It’s “Firefox” (first paragraph, main article).

    Fixed ;)

  • Pingback: PhogBlog » Archiv » Bugs im Firefox!

  • Chris

    Anyone know how to submit bug reports to Joe Hewitt?

  • Chris

    Chris — Try sending him email — his address is on Author Profile page on the Mozilla extensions site.

  • Pingback: SitePoint Blogs » FireBug 0.4 includes JavaScript Debugger