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:
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’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.
Related posts:
- 14 Free Tools To Validate Your HTML, CSS & RSS Feeds Do you avoid validating your site because it's too hard?...
- Firefinder Adds Search to Firebug Everyone loves "the Firebug," and one of the nicest things...
- Announcing Version 1.1 of CodeBurner: the Reference Tool for Firebug A new version of the SitePoint Reference Tool for Firebug,...
- 13 Firefox Add-ons For Web Development Are you a web developer? Do you use Firefox? There...
- Introducing CodeBurner: the SitePoint HTML & CSS Reference Tool for Firebug CodeBurner is a new Firefox addon from SitePoint that integrates...
Firebug is really awesome! I tried it some days ago and really love it. It’s easy, fast and intuitive.
January 25th, 2006 at 4:56 am
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.
January 25th, 2006 at 7:19 am
Oh sorry i see its for javascript, doh!
January 25th, 2006 at 7:22 am
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.
January 25th, 2006 at 8:20 am
Looks cool. :D
January 25th, 2006 at 8:27 am
Has anyone checked out google.com with it – theres 2 errors on the page and I cant figure out why they are being highlighted
January 25th, 2006 at 8:44 am
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?
January 25th, 2006 at 8:51 am
:( 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.
January 25th, 2006 at 10:49 am
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.
January 25th, 2006 at 12:44 pm
Looks very sweet – can’t wait to try it. Thanks for sharing.
January 25th, 2006 at 3:00 pm
“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.
January 25th, 2006 at 5:22 pm
Just a nit-picky thing: It’s “Firefox” (first paragraph, main article).
January 25th, 2006 at 8:25 pm
Fixed ;)
January 25th, 2006 at 8:47 pm
[...] Es geht mir nicht direkt um Bugs beim Feuer-Fuchs, sondern eher um eine neue Extension für eben jenen, die am 19 Januar das Licht der Download-Seiten erblicken durfte, nämlich FireBug. Auf diese neue Extension bin ich durch einen Blog-Eintrag bei Sitepoint gekommen, und mich persönlich überzeugt diese neue Erweiterung vollkommen. Und was bringt es einem jetzt, den Feuer-Fuchs mit einem Feuer-Wurm zu vereinen? [...]
January 26th, 2006 at 4:08 pm
Anyone know how to submit bug reports to Joe Hewitt?
February 3rd, 2006 at 11:42 pm
Chris — Try sending him email — his address is on Author Profile page on the Mozilla extensions site.
February 3rd, 2006 at 11:54 pm
[...] With the release of FireBug 0.4, an excellent extension for analyzing JavaScript and CSS errors and XMLHttpRequest operations (AJAX) that we have covered before, Firefox now has a powerful, up-to-date debugger that you don’t need to hack to get working. [...]
May 25th, 2006 at 1:00 pm