By Alex Walker

Firefox Dev Widgets

By Alex Walker

One of the things I really enjoy about using Firefox is the constant flow of new and groovy extensions. Taking a few minutes to trundle through the extension list always brings back that ‘lollyshop feeling’ I had as a kid — ‘Umm,.. I’ll have one of those,… and…one of those,… Ooo! That one! Definitely one of those!’. So I thought I’d write up a quick run-down of some of my current webdev favorites.

Firstly, I’m not going to write up anything on ‘Web Developer Toolbar‘ — I’ve talked about it before and to me, it’s like your wallet – shouldn’t leave home without it.

1) Link Checker 0.1.2 – Kevin A Freitas

A very clever piece of work. Simply right-click on any page, scroll down to ‘Check Page Links’ and watch in awe as, one by one, the background of each link turns to green (the link works), yellow (blocked) or salmon (bad link). It takes a little while to get through big pages, but the idea of being able to spot a bad link in a page at a glance is awesome.

2) ColorZilla 0.8.2 – Alex Sirota

So small, yet so powerful. Colorzilla was a winner when it was released as nothing more than a cute Firefox-based eyedropper tool. Since then it’s grown like a weed.

Click on the eyedropper and see the status bar feedback on what your cursor is hovering over — not just color info, but DOM path info and X and Y offset from the previous click.

Right-click and get access to an incremental magnifying tool, a color mixer and a myriad of auto-copy and formatting options. A genuine killer ap IMHO.

3) View Source Formatted – Felix Ritter

This one is a very recent addition, but if you like the code-folding features of editors like jEdit and TopStyle you might appreciate this extension. It gives you two options:

– View Source Formatted Mode (pictured left): gives you nicely formatted color-coded source with small ‘minus’ buttons next to each element that allow you to ‘tuck’ sections of the code away as you scan through it.

– Inline Mode (pictured right): is a little like a souped-up version of Firefox’s built-in ‘view selection source’. Switching it on re-renders the current page, except this time with small ‘Source’ buttons and colored borders appended to each major page element (div, h1, h2 etc). Clicking the button will display only the source used to render that element.

From a development point of view, this extension is probably more useful in helping you understand other people’s code, rather raw development, but it’s certainly shows some promise.

4) Measure It 0.2.8 – Kevin A Freitas

Another great little extension by Kevin Freitas. This was actually his first extension and remains a tiny masterwork of understated, functional elegance.

As you might guess from the title, ‘Measure It’ measures. Click the icon in the status bar and drag a box. There are no right-click options. No preferences. Just well-measured measuring.

Like ColorZilla, there are plenty of standalone apps that do a great job at this, but the beauty of having the tool so easy to grab can’t be underestimated.

So, they are the four extensions that have caught my eye recently.

Have I missed an absolute gem?

  • aQustic

    I think you’ve missed one very essential extension that I use almost every day, Live HTTP Headers. It’s very useful when developing sites with Flash elements that communicate with a server.

  • The second feature of the View Source Formatted plugin I use quite often (although in Opera, and not a plugin). I’d like to try out the link one, and it would force me to use Firefox, as it looks like a nifty tool.

  • FoxyTunes
    How can you design without music :D

  • Wombert

    Yeah… HTML Validator is missing.

  • Any WebDev has Google AdSense on his sites. I don’t know about the rest of you, but I used to obsessively check my earnings. No more. AdSense Notifier is indispensable. It shows earnings, CTR, eCPM, page impressions and number of clicks.

  • most of these plugins sound like stuff that was already built-in with Avant browser before Firefox even had its first plugin ;)

  • Michiel

    You are correct, peach, but Avant misses a major feature that renders it useless: to use proxy settings from explorer. It has it’s own proxy settings and always uses the proxy, even for the local network.

  • pdxi

    Wow, thanks for the link to “View Source Formatted” – I’ve been wanting something like this for years!

  • velocd
  • GDA

    And not to forget about the famous Web Developer Extension:)

  • Etnu

    Don’t forget “Inspect Element” and “Nuke Anything”

  • Charlie

    I find Aardvark rather handy. Be sure to refer back to its keyboard shortcuts as this is where its best features lie. The coming features look quite tasty too, particularly the CSS editing.

  • Philip Ashlock

    The mother of all Dev Widgets is the firefox web developer plugin –
    and also nice is Aardvark for identifying specific elements more easily.

  • yea. i thought it was funny that you missed aardvark as well. not so essential, but still cool. i’ve found that combining the dev bar and colorzilla usually outputs something similar to what aardvark does.

  • As mentioned, the Web Developer toolbar is essential:

    And if you’re validating your code like all good coders should(!) then, HTML Validator is great:

  • Good article, however, the Author calls these “widgets” which is not the proper term… These are plug-in’s. The name “widget” is best used to describe Apple’s OSX technology

  • I often use Ardvark (to view blocks without page layout breakout) :

    An another Scrapbook to snap a complete page and stock and organize it easily on local disk for editing and more :

  • View Source Formatted and Aardvark look great! Thanks for the links guys!

    I can’t live without EditCSS. Excellent for doing minor changes and then saving the final version of the css file.

  • Hmm…
    View Source Formatted doesn’t work with my Deer Park :(
    Did anyone have success with running it on Deer Park ?


    Great post. I had heard of one of these, but as a relative Noob I was not aware of the others. Thanks for the education.


Get the latest in Front-end, once a week, for free.