Thanks to its ability to incorporate third party developed extensions, Firefox is so much more than a web browser to me. It’s now an invaluable web development tool – so much so that I really don’t know how I’d manage without it.
Here are the extensions that help me the most when it comes to web projects.
Search Status
If you ever do any search engine marketing / search engine optimization work, then this extension is very handy. It provides a whole bunch of search-related information about a site, including Google page rank, Alexa traffic ranking, the number of incoming and backward links to a site, and so on.
I have it running unobtrusively in my status bar, as I like to see the page rank of sites that I visit.
LinkChecker
This extension is great for when you want to quickly check the links on a single page. Just right-click and select “Check Page Links” from the context menu, and it goes through all the links on the page, color-coding them depending on whether they work or not – red is broken, green is working.
How simple and useful is that! If you ever have to code directory-style pages, then this extension is a godsend.
Web Developer Toolbar
This is the one extension that every web designer or developer should have. Packed with features, it is extremely useful and I use it all the time.
Here’s a sample of the things you can do: resize your page, outline various elements, edit the page’s CSS directly, display just about anything you want to know about the page (the “topographic display” is cool and actually quite handy), disable various elements on the page (cookies, images, JavaScript, styles, etc), do just about anything you can think of with images, and that’s just scratching the surface.
ColorZilla
This extension enables you to pick and copy colors right from a web page. I find this extension to be indespensible and I use it all the time.
It also includes some other neat features, such as a color palette and DOM inspector, although the most useful of these is the zoom tool whereby you can increase the size of the page by up to 10 times.
HTML Validator
It’s kind of a pain to have to check your pages through the W3C’s validator each time when you’re doing development. It’s even more of a pain if you want to just QA your site from time to time.
This extension removes the need to do this by adding HTML validation into Firefox. It does this by way of an icon which displays in the status bar and in real time shows whether your page is valid, has any warnings or has any errors.
Hover over the icon to find out how many problems there are and double click on it to view your source code, the list of errors/warnings and some useful help information as to why the errors are being flagged.
Click on the error to highlight the line in your source code and easily see what the problem is.
Given that validation errors often arise from coding mistakes, it’s a great way to make sure your pages have no coding errors, and if they do, to debug them.
Aardvark
This extension works like parts of the Web Developer toolbar (information, outline) in that it enables you to view the structure of a web page by displaying borders around divs, tables, etc.
However, with Aardvark you hover over the element with your mouse in order to see the relevant information.
It also comes with some keyboard shortcuts which enable you to colorize and even remove sections of content from the page. I’m not sure how useful this feature really is, but time will tell.
In any event, Aardvark is a useful complementary tool to the Web Developer toolbar and well worth getting.
Checky
Checky’s usefulness comes from the array of online validation and analysis services it provides easy access to.
Validate your HTML and CSS, check to see your compliance with accessibility recommendations, check for broken links, see how your page renders in a text-only browser, check your meta tags, and much more!