The following article is something I wrote for my web design company – Pixelapes. I figured I would reproduce it here to spread it around a bit more. I would imagine that most web developers will have a system of work or will already use this extension, but for those that don't: read on!
Original Article published on Pixelapes Blog on July 21st 2007.
Here at Pixelapes we took the decision from the outset to develop all of our websites using standards based coding and always building with accessibility in mind. There have been many discussions around the web about this and, to me, the conclusion has always been that it is better to build sites that validate.
I think Robert Nyman said it best on his article titled “Validation isn’t important, it’s just intranet”
The whole idea with web standards are:
- Ensuring, as much as possible, that the web site will actually work
- Easier to identify potential errors
- Faster web development
- Maintenance
As a result of this decision, it is important to have some tools to help make sure that we’re consistently on the right track. Over the coming months I’ll be writing some short articles documenting some of these tools, and some of the other tools that we consider invaluable for web development. To start off with I’d like to introduce one of the most invaluable browser tools we use, the Web Developer Firefox extension.
Web Developer
Download: https://addons.mozilla.org/en-US/firefox/addon/60
Author Site: http://chrispederick.com/work/web-developer/
After installing this wonderful tool and restarting Firefox you will be presented with a new toolbar at the top of your browser.
As you can see from these screen captures, the new toolbar provides a wealth of tool categories.
- Disable
- CSS
- Forms
- Images
- Information
- Miscellaneous
- Outline
- Resize
- Tools
- View Source
- Options
What can it do?
There are many functions that I use in Web Developer, but there are about 4 functions that I can’t imagine working without and I will explain them in some more depth now.
Display Element Information
Shortcut: Ctrl + Shift + F
When you press active this tool you are presented with a small yellow information box that gives you a detailed display of the hierarchy of the selected element within your code. This is very useful for working out style rules for specific elements around your website, and the structural nature of the information means that it is easy to work out why a certain style rule is being over-ruled.
In addition to this it highlights the element with a red box, demonstrating the size and position of the element. This helps a huge amount with understanding the behaviour of any floating elements contained within your website.
Resize Window
Simple and quick, this allows you to quickly shift between browser window sizes so that you can get an idea how your website will look at different screen resolutions. I currently have mine set to display at 800 x 600px, 1024 x 768px, and 1280 x 1024px.
Validation
Shortcut: Ctrl + Shift + H
Web Developer can automatically send your web page to the W3C Validator tool – whether the page is online or local.
Also the validation includes tools for testing WAI and Section 508 accessibility guidelines, allowing you to check how your website fares against various level of accessibility.
I must state though that this tool is not quite as useful as the HTML Validator extension, who’s only purpose is to provide validation assistance.
Edit Style Sheet
Shortcut: Ctrl + Shift + E
Another extremely useful tool for instantly correcting style sheet errors, this tool brings up an edit window showing all the style sheets that are associated with the web page in question. As you add or change rules, the alterations are rendered instantly on the web page so you can see how your new rule affects each element. This is even useful for testing quick design ideas. Changing link colours, width of items, moving images around, you name it.
Be warned though, when you close this tool all of your edits are lost so make sure to save the sheet, or copy any code that you want to use and add it to your style sheet.
Other Functionality
There is a whole range of other functions you can perform with the web developer toolbar, multiple ways to overlay information about elements on the site, disabling images, disabling style sheets, creating user style sheets for different sites, editing HTML, measuring site areas and on and on.
Conclusion
If you’re involved in web development of any nature, I can’t recommend this highly enough and it has been an asset to us for some time. Over time Web Developer will save countless hours, improve your coding by correcting you as you develop a site, and assist you in testing and improving your website design.
Finally, this tool is not just for web developers, but can be useful for clients as well. As a client this tool will allow you a quick way to check that your web developer is producing well written code which validates against the standards you require.
Comments