Firefox Extensions: Design and Program at Will Ayers

So I think we can all come to the conclusion that Mozilla Firefox is the best web browser when it comes to making designer’s and programmer’s job allot less stressful. I have compiled a small list of amazing extensions for Firefox that will in turn make your life allot easier when designing, including Web Developer Tools, Color Tools as well as Debugging Extensions. Don’t forget that CSS and html is part of the design process so there are a couple extensions related to html and css. Enjoy!

ColorZilla

-

by

Alex Sirota

Alex Sirota’s ColorZilla is an advanced Eyedropper (Color Picker) that allows you to point your mouse pointer at an image, div or any other page element and grab that color. The plugin is found at the bottom left side of Firefox. Once you click on the icon, ColorZilla will start showing you the RGB of the color you are pointing out. You can set ColorZilla to automatically copy the RGB numbers, RGB percentages, HEX numbers with or without the #, as well as copy the RGB string (R: 147 G: 132 B: 34). ColorZilla offers many more features including zoom, save color to favorites and a DOM Inspector. ColorZilla is a must have Firefox Extension to have for designing.

Firebug

-

by

Joe Hewitt

Joe Hewitt’s Firebug is a integrated extension that provides a great deal of code (html, css, java script etc..) development and debugging. One of the best features of this extension is the ability to do all of your programming and debugging right in the window of the website. Located on the bottom of your browser, firebug can be clicked on to activate. The icon with either be a green check mark (if there aren’t any errors) or a red x mark (if there are errors) with the number of errors next to it. Once activated you have the ability to Inspect and Edit a myriad of options. Firebug allows you to inspect or edit the Console, HTML, CSS, Script, DOM and Net part of the site as well as showing you the Style, Layout and DOM of the current element selected. Firebug is one of those extensions you need to have installed. Its just an amazing program for the great Firefox.

Web Developer

-

by

Chris Pederick

I’m sure you all thought that I was going to forget about Web Developer. Chris Pederick’s Web Developer is probably one of the most used Firefox extension used by web designers and programmers. This extensions puts so much power in the hands of the designer and programmer with the ability to change and inspect any web page. Web Developer has twelve different tabs to choose from, Disable, Cookies, CSS, Forms, Images, Information, Miscellaneous, Outline, Resize, Tools, View Source and Options. Each have many features to choose from and it would take a very long time to go into detail on all of them so I will talk about a few of them. Its up to you to download and try it out. The disable tab allows you to disable all types of code and features such as meta refreshes, javascript and cache. With the information tab you are able to examine and display all of the elements of the page like access keys, block size, div order and Id & Class details. With the resize tab - one of my favorite tabs - you can set custom sizes to resize the browser.

IE Tab

-

by

PCMan (Hong Jen Yee)

and

yuoo2k

For all those who don’t want to every see IE (Internet Explorer) open on your machine, here is a simply and very effective way to check for cross browser compatibility while still in Firefox. With IE Tab you can switch one of your tabs over to use the rendering engine of which ever version of IE that you have installed.

Will Ayers