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.
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.
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.
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…
Draw out a ruler to get the pixel width and height of any elements on a webpage.
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.