Although I use Safari for much of my browsing, I still use Firefox for a number of things. I find that playing Shartak with anything other than Firefox is painful because the Greasemonkey scripts for Shartak make it so much easier to find out where my character is. I also use Firefox whenever I need to dig into some HTML/CSS problems – the Web Developer add-on makes it easy to find out which styles are being applied to an element.
Here is a list of some of the Firefox add-ons that I’ve come across and would recommend.
Greasemonkey
Allows you to customize the way a webpage displays using small bits of JavaScript.
Hundreds of scripts, for a wide variety of poular sites, are already available at userscripts.org.
You can write your own scripts, too. Mark Pilgrim’s definitive Greasemonkey guide, diveintogreasemonkey.org will show you how.
Web Developer
Adds a menu and a toolbar with various web developer tools. There are more useful options on here than the average web developer can use. This is one of the few add-ons for Firefox that I install on any machine I use.
ColorZilla
With ColorZilla you can get a color reading from any point in your browser, quickly adjust this color and paste it into another program. You can Zoom the page you are viewing and measure distances between any two points on the page. The built-in palette browser allows choosing colors from pre-defined color sets and saving the most used colors in custom palettes. DOM spying features allow getting various information about DOM elements quickly and easily. And there’s more…
MeasureIt
Draw out a ruler to get the pixel width and height of any elements on a webpage.
Firebug
Firebug integrates with Firefox to put a wealth of development tools at your fingertips while you browse. You can edit, debug, and monitor CSS, HTML, and JavaScript live in any web page.
X-Ray
Once installed the X-Ray command is available by right-clicking as well as in the Tools menu. When applied to a page it can help you see how the document was constructed without having to go back and forth between the sourcecode and the page in your browser. Is that list made of li, dd or p elements? Is that an h3 tag or just some bolded text? X-Ray shows you what’s beneath the surface of the page.