Firefox Dev Widgets

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?

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • 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.

  • http://www.lowter.com charmedlover

    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.

  • http://boyohazard.net Octal

    FoxyTunes
    How can you design without music :D

  • Wombert

    Yeah… HTML Validator is missing. http://users.skynet.be/mgueury/mozilla/

  • http://www.goldrule.net starrsoft

    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.

  • http://www.designity.nl peach

    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
  • http://kbarts.hu 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 – http://extensionroom.mozdev.org/more-info/webdeveloper
    and also nice is Aardvark for identifying specific elements more easily.
    http://extensionroom.mozdev.org/more-info/aardvark

  • http://www.dustindiaz.com polvero

    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.

  • http://www.autodirector.co.uk/ ceeb

    As mentioned, the Web Developer toolbar is essential:
    http://chrispederick.com/work/firefox/webdeveloper/

    And if you’re validating your code like all good coders should(!) then, HTML Validator is great:
    http://users.skynet.be/mgueury/mozilla/

  • http://www.atomiccoffeemedia.com webgodjj

    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

  • http://www.lamande.net nomadeous

    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 :

  • http://envisionext.com Tim_Rogovets

    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.

  • http://envisionext.com Tim_Rogovets

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

  • athomemama.blogspot.com

    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.

    AtHomeMama