Browser Tools for Web Design
Most site design happens in an editor of some kind, be it Dreamweaver, Nvu, GoLive, or your text editor like BBEdit, UltraEdit, or Notepad even. However the editing and revisions, the little fixing of syntax only can be done if you double-check your work in the browser itself, and you have to do this constantly! This is where browser tools come in and really make this process easier to do. By default, the easiest of all browsers is of course Firefox and so we will cover some interesting extensions that you simply can not live without if you do any kind of site design, then you need to have these tools at your disposal. If you don’t, then you are just making things harder on yourself.
Web Developer Extension:
Available from ChrisPederick.com is Web Developer. This extension adds a toolbar to Firefox which features all kinds of tools for web design. You can clear the cache of your browser, see the stylesheet for a site, as well as edit it to see the results right away. The only thing that is really missing from WD, is a cool color picker or color lookup tool.
Aardvark Extension:
While Web Developer has some nice outline tools, it might be overkill for when all you want to do is figure out what the class id of a div is on the page, or better yet, you want to kill a graphic or an entire section. This is where Aardvark comes in. Once you install it you just go to Tools and choose to start Aardvark and you can then simply glide your mouse over the different page elements to see what their id and class is.
Mouseover DOM Inspector
Unlike the previous two, Mouseover DOM Inspector is not an extension to Firefox, instead it is javascript. All you have to do to use it is go to Slayeroffice.com and save this bookmark link to your bookmarks. Then any time you want to enable it just go to the page your want to inspect and go to your bookmark. A popupwindow will display now with information of the various elements you mouse over on your page. Some designers might actually prefer this script over Aardvark.
ColorZilla Extension
For figuring out what the color code is of different elements on a page, nothing beats ColorZilla. With the simple activation of the eyedropper on the lower left corner, you can now know what any color code is for any element on the page. This is a must for when trying to work with interesting color palettes.
Web Color Names Extension
I will also mention Web Color Names, because even though it is a simple color chart, it still comes in handy when you want to look up a color really quickly in the standard color palette.