Redswish

Carefully crafted banter

Fantastic Web Developer Add-on for Firefox

Web Developer Toolbar

Hey Guys! Found an awesome new Firefox extension!

I am actually quite excited about this. Recommended by a good friend – the Firefox ‘Web Developer’ toolbar add-on is one of the best designers aid I’ve come across. For a long time I’ve used the Tiny HTML validator which is a neat piece of kit, although can sometimes, I find, be over critical.

To cut to the chase – Web Developer is an add-on that can be found here. You install it, restart Firefox and bask in it’s power. Ok – it’s only a tool. As well as built in HTML, CSS and Javascript validation – you’ll find a plethora of tools including:

  • the ability to turn off and control java, javascript, cookies, CSS, page colours, images and more.
  • display different page information – eg. specific abbreviations, anchors, classes, images etc.
  • highlight page sections – eg. divs, frames, tables, headers etc.
  • Resize the window to specific resolutions to see how your site will render in different monitor sizes.
  • Plenty more if you hunt around

I seriously recommend this to any developer or designer. It’s a great tool not just for building your own sites, but for assessing and reverse-engineering other sites. When the old ‘how did they do that?’ questions arises – the Web Developer toolbar will help to outline and highlight specific areas of the front-end display and the code to help understand websites better.

You can download Web Developer from the Firefox site at https://addons.mozilla.org/en-US/firefox/addon/60.

Comments & Opinion

4 Responses. Have your say.

  1. Mark, on , said:

    Yeah it’s brilliant for testing. I’ve been using it since last June – sure I told you about it! Sorry if I didn’t! Oops.

    Anyway for you and anyone else reading heres some other useful add-ons.

    Firefox Accessibility Extension
    https://addons.mozilla.org/en-US/firefox/addon/5809

    Operator Toolbar – tells you which Microformats are available on a page + ability to install scripts to enable detection of additional Microformats.
    https://addons.mozilla.org/en-US/firefox/addon/4106

    Fireshot – enables screen shots + editing tools of the screen below the ‘fold’ (very useful if you have large search results etc or just long pages)
    https://addons.mozilla.org/en-US/firefox/addon/5648

    JSView – handy css and script viewer (no need to go looking for the script by adding it to the url)
    https://addons.mozilla.org/en-US/firefox/addon/2076

    YSlow – Yahoo extension allowing assessment of script speed and also debugging of scripts
    https://addons.mozilla.org/en-US/firefox/addon/5369

    Cheers.

  2. Mark, on , said:

    Oh yeah and don’t forget Firebug!
    https://addons.mozilla.org/en-US/firefox/addon/1843

    Just in case anyone reading hasn’t come across this – you’re very unlucky if you haven’t! I honestly couldn’t imagine building sites or working on them without this!

  3. admin, on , said:

    Mark here is a useful guy to have around the place – always emailing me with handy new gadgets, scripts and bits. Sorry if I missed his mention of the Developer Toolbar before, I didn’t realise it had been around so long – I need to get more up-to-date!

    I’ll get playing with some of these extensions – and so should you…

  4. Mark, on , said:

    Yeah no worries mate. Though i’d bang them on your site to let the masses see em!

    All about sharing the knowledge – just need a bit more of my own now. Ha.

    Anyone know of any other useful bits or better versions of things we’ve already mentioned?

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>