Five lesser known Firefox add-ons for web developers

When it comes to making web pages, I can whip up a rounded div or add a splash of gradient for a nice fade effect successfully with little trouble, but like many, when trying to deduce out why some stupid DIV is misbehaving, I can waste an entire day spinning my wheels.

Checking out the various blogs and forums are of course a great resource, but probably my most useful and productive help comes courtesy of my favorite Firefox add-ons.

Like many, I have Firebug, Greasemonkey, IEView, and the like at my disposal, but here's a list of what I would consider five lesser-spoken but certainly "must have" additions to any web developer's little bag of tricks.

• View Source Chart - I'm sure some might disagree on this, but aside from simple DOM structure, for me, trying to mentally visualize HTML boundaries can be really freaking hard, even if the code is well formatted. To make the job easier, View Source Chart is a godsend. When run, it blocks off boundaries, color codes them, and presents everything in lightning speed no matter how munged up the code is! Also, as an added bonus, you can take advantage of the built-in Ctrl + and - zooming features to help decoding even the most complex nested DOM structures. Indeed, when it comes to navigating HTML source, View Source Chart further proves that a picture is worth a thousand words.

• JSONView - Out of the box, Firefox has no problems showing pretty, color coded XML...but what about JSON? Try to open a JSON document and you'll be prompted to download it and from there open it with your favorite text editor. What a pain! JSONView solves this problem by showing the JSON information neatly formatted and prettified in your browser window. Best of all, even better than viewing XML files, even if the JSON document contains errors, JSONView will still show the raw text.

• Link Checker - Has this ever happened to you? You go ahead and publish a web page with a few dozen links and weeks later, you find out that the 17th one on the list was dead and you never knew it. Well, Link Checker to the rescue! Once added, you can click on the "Check Page Links" listing under the Tools menu and it will highlight not only the good links, but also point out the dead links in bright red. Also, for added convenience, if you right click on your tool bar, Link Checker can be added as a custom icon for super easy access.

• Poster - When it comes to testing out web services, Poster is a huge time saver. Before Poster, if I wanted to test out an API call, I'd have to whip up some little web script, add in some debug statements and overall, pretty much waste a bunch of time that I could be spending on something way more useful. WIth Poster, you can make HTTP requests, set the entity body, and content type.

• Font Finder - Often, I'll be poking around the interwebs and see a really sharp looking representation of a font and wonder "Hey! I wonder how that's done!". Prior to installing Font Finder, I'd have to poke around the source and find exactly which CSS is being used which was quite time consuming. With Font Finder, I simply highlight an interesting bit of text, right click on it and bring up the Font Finder sub menu. As an added bonus, I can even perform inline replacements to test new layout live in the browser window.

So, there you have it - do any of you use other lesser known, must have addons? If so, be sure to leave 'em in the comments!

Tags: Add-ons, Code, CSS, Developers, Firebug, Firefox, Fonts, Html, Javascript, JSON, Plugins, sourcecode, Typography, Web, WebDevelopment, WWW, XML