Fantastic Web Developer Add-on for Firefox
May 13th, 2008
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.
Filed under: Design, Standards, Web Culture by admin
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.
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!
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…
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?