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.
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.
I find this one of the most useful features of the toolbar. When you're working on a CSS design, the hardest part can be debugging why elements are meshing incorrectly. The facility to outline block level elements is thus really useful as it'll show you the edges of boxes, each level of nesting in a different colour:
Similarly outlining deprecated elements is useful for diagnosing problems as you move from an old-school tables 'n' fonts design to CSS, especially if you have a huge site to manage and things might slip through:
Outlining other elements can be just as useful, and the Outline Custom Elements option allows you to pick and choose which tags are highlighted. I tend to use this for checking form labels and form element nesting.
The resize button allows you to quickly set the browser window to a particular size, for testing with older monitor sizes like 800x600.
The tools menu gives you a quick links to the W3C HTML and CSS validators. As well as tools to check for the Web Accessibility Initiative checklist and Section 508 checklist (though I should add the proviso here that no automated check will guarantee accessibility).
The handy thing about these is that there is also a Validate Local CSS and HTML option. Allowing you to validate the code of a page after you download it, which bypasses checking the live version of sites that have login procedures or complex dynamic code that mean the validator can't access them itself.
The optimisation report is also handy, and links to the http://www.websiteoptimization.com report for how large the site in question was in kilobytes, how many objects, and gives you warnings and recommendations for speeding up your site.
This option is self-explanatory, really.
With so many features in the toolbar, you need to manage it somehow, and that's what this menu does:
the facility to define you won hotkeys for accessing different tools is handy, as is the ability to add your own validators and resize options.
The final three icons display whether the site you're viewing is running in standards mode (has a valid doctype for standards-rendering mode, this goes grey in non-standards mode), if there are any JavaScript errors and the option to disable the toolbar (if it conflicts with something, say).
For JavaScript errors, you can click the icon to open the JavaScript error console:
A 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.
Comments
Be the first to write a comment
You must me logged in to write a comment.