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.
As well as the options in the disable menu, the toolbar also has a dedicated CSS menu.
The most useful addition here is the Edit CSS option, the ability to edit a CSS page to check if an alteration would fix a problem:
When you're trying to debug a live site this can save sending multiple requests to a server and keeping an FTP connection open in Dreamweaver. Simply edit the CSS code and see what effect the change will have on the page's rendering.
If your work is more on the development side, and you need to debug forms then this menu contains a number of tools to get you started.
As well as allows you to turn Get to Post (in case you've accidentally used the wrong type in your form handling script), you can also display all the details of a forms fields and their attributes. Populate forms allows you to fill a form with default data based on the id attribute of the fields, so a textbox with the id="event" would get the text event added to it. This can be handy if you a repeatedly filling in data to check if a form inserts into a database correctly and don't want to keep typing the details.
Remove maximum lengths can also be handy if you're making sure you've matched the form element lengths to a database's fields correctly. View form information gives you a complete rundown of a page's forms in a new tab, detailing labels, fields and submission details.
The images menu allows you to check a variety of image related problems. As well as disabling images for accessibility checking (does the site work without them?) you can also check if any image shave empty alternate text, if images are broken links or if the reason the logo looks wonky is that the image has been stretched larger than its actual dimensions.
The information button gives you the ability to check
The information button gives you access to all sorts of information about a page some of which is often hidden by most browsers. The Display options allow you to check which access keys and page anchors exist, for example.
Block size and ID and Class details are handy when you are working with CSS, since they can help you diagnose where a CSS property is inherited from:
Display Link Paths does the same kind of thing for each link on a page.
Want a complete rundown of the cookies a page has for you? It's a click away, and useful for debugging exactly why your cookie-based login script isn't working. Similarly you can check the HTTP headers for a page:
This option is a group of options that mostly work around resetting browser options quickly:
such as clearing the cache, history, cookies or authentication details. It also allows you to see HTML comments without jumping into the code, showing every comment as an exclamation mark that when clicked on reveals its full text:
The Visited links options are also useful if you're testing CSS for a:link and a:visited styles and if you've obviously visited all the links
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.