Free! - FireFox Plug-ins for the Discerning Web Developer

One of the useful features of the FireFox browser is its extensibility. Given the nature of its early adopters, many of the plugins available are there to make the web designer or developers job easier. In this tutorial we'll look at some of the more useful ones, how they can be used to enhance your testing work-flow once you've built your site in Dreamweaver and techniques that they make available to you and why you'd want to use them.

Overview

The Web Developer Toolbar

https://addons.mozilla.org/extensions/moreinfo.php?id=60

I'll start with this extension, since it's the most useful and comprehensive and I find it essential in my day-to-day work. It's a toolbar that sits at the top of the browser window and allows you to perform a variety of checks on a site or disable certain technologies quickly for testing if your site degrades gracefully.

FireFox Plug-ins for the Discerning Web Developer

One of the useful features of the FireFox browser is its extensibility. Given the nature of its early adopters, many of the plugins available are there to make the web designer or developers job easier. In this tutorial we'll look at some of the more useful ones, how they can be used to enhance your testing work-flow once you've built your site in Dreamweaver and techniques that they make available to you and why you'd want to use them.

The Web Developer Toolbar

https://addons.mozilla.org/extensions/moreinfo.php?id=60

I'll start with this extension, since it's the most useful and comprehensive and I find it essential in my day-to-day work. It's a toolbar that sits at the top of the browser window and allows you to perform a variety of checks on a site or disable certain technologies quickly for testing if your site degrades gracefully.


The toolbar has 11 menus and three indicators, all of which will aid in diagnosing problems with a site once it reaches the browser.

Why Use it?

Obviously if you're using Dreamweaver then some of these checks (links, validation, and so on) are built in. But the advantage of the toolbar is it allows you to check for things once the web page has reached the browser, useful for debugging problems in dynamic pages like PHP or ASP. It also allows you to see alterations in an actual browser, rather than in Dreamweaver's interpretation of a browser rendering. This may pick up little bugs you haven't seen in Dreamweaver's display.

Disabling Technologies

The first menu allows you to disable a number of settings that may affect how your site appears in a browser:


It's all too easy to end up with a cached version of a file if you're repeatedly refreshing a page as you test it. Disabling the browser cache allows you to check if the problem you're encountering with a page is actually because FireFox is using a cached version of a file (such as a script, CSS file or image). It guarantees that you are using a fresh version of the file from the server.

Similarly you can disable images, image animations, cookies, Java, colors and JavaScript to help you test what a site looks like without them. Particularly useful for those developers who want to check for accessibility issues like correct alternate text, or if complex navigation still functions without JavaScript.

Disabling refer logging means that your browser won't send your current URL when you go to the next page. Useful to avoid adding false impressions to your site's webstats.

Finally the toolbar gives you a variety of options for disabling stylesheets. This is particularly useful to diagnosing where a rendering (appearance) problem in your site comes from if you have multiple stylesheets. Also, the ability to totally disable stylesheets allows you to get an impression of how a site might linearise (the order it's read in) for a screenreader.


Matt Machell

Matt MachellA man of many talents, Matt has been a web designer, technical editor, and jewellery picker. He is currently on contract for the Birmingham City University, producing pages for research centres.

He has tech-edited a dozen books on web design and development for glasshaus, Apress and Sitepoint.

He likes music with loud guitars and games with obscure rules.

His website can be found at: http://www.eclecticdreams.com

He lives in Birmingham with his girlfriend, Frances, and a horde of spider plants.

See All Postings From Matt Machell >>

Comments

Be the first to write a comment

You must me logged in to write a comment.