Firefox and Web Design: Top 5 Extensions
Note: This post is over a year and a half old. You may want to check later in this blog to see if there is new information.
The following links are auto-generated but may help you locate newer content:
This is more or less a “Top Firefox Addons” post, but pretty much our entire selection of Firefox extensions are geared towards web design/development, so that’s what I’m calling it. I couldn’t really do what I do without Firefox, or at least it would be considerably more difficult. While I have much respect for browsers like Opera and Mozilla, the extensions available for Firefox are what really make it my browser of choice.
I firmly believe that websites should be designed first for a standards compliant browser like Firefox, and then made to work with a more popular (but lower quality) browser like Internet Explorer. When I get a site to work well in Firefox, I know that the code is working properly, rather than being a proprietary mess, ala Frontpage. And that’s important to us at Circle Six, as we believe more and more in not polluting the web any further with bad code.
So without further ado, I bring you the list of essential extensions for Firefox, the tools that make my life easier and my design/development process more efficient. Please add on to the list anything I leave out!
This is absolutely the most essential extension I have. I can’t even begin to describe everything it can do in this post. Some of the features I use on a daily basis are the ability to disable javascript, disable CSS, outline block level elements, resize the window and view response headers. For me, the greatest use of this extension is to accomplish backwards compatibility and accessibility in my pages, but to say that’s all it does with be selling it very short.
This extension is an excellent way to get immediate feedback on changes to your CSS. If you’re struggling with a strange CSS bug, this is a great way to start finding the solution. You can load it in the sidebar and begin tweaking your code, and watch the changes in realtime. It’s especially good for structural code and positioning elements. If only it worked for Internet Explorer!
Honestly, I could never write Javascript without this extension. It provides a console that lets you debug your javascript right in the browser. You can track variables and put breakpoints in the code. And it’s especially good for AJAX development, with a DOM inspector and XMLHttp request viewer. I can see my requests and their responses as they happen, and figure out exactly what went wrong. Without that feedback, even the simplest AJAX app can be extremely frustrating to debug.
A great timesaver. It gives you quick feedback on what CSS and Javascript files are loaded in a page. It also lets you jump immediately to each external file’s source code. This is especially handy on dynamic sites that use javascript extensions that load unobtrusively: you can quickly check to see if a extension has loaded on a given page without viewing the source code. It’s also great for learning from other people’s work, taking a quick look at a CSS file to see how they got that text effect, or whether they’re using CSS-P or not.
This one has a few close runners-up: View Source Chart and X-Ray. They help make sense of the source code for a page, and make it a lot easier to find what you’re looking for. Especially if you’re debugging someone else’s page (because YOUR code, of course, is properly formatted to begin with). What sets View Formatted Source apart for me is that it has both a chart mode and an inline mode that displays outlines and labels directly on the page that you can click to see just that segment of the source code. The chart mode has the ability to fold sections based on tags.
My other favorite extensions:
ReloadEvery: This lets you refresh at a given interval. Good for seeing changes in (almost) realtime.
Foxmarks Bookmark Synchronizer: syncs bookmarks between multiple FF installations.
Screen grab!: Takes screenshots using java, and can auto scroll the page to get a full shot.
SEOpen: Nice tools for Search Engine Optimization.
Modify Headers: Add, modify and filter http request headers.
Tab Mix Plus: Extend the tab functionality of FF.
Mozex: Integrate external apps like TextMate.
del.icio.us Complete: Extend the del.icio.us extension.
murl: Automatically shorten url’s using murl and copy them to your clipboard. 
Comments are closed
Comments are currently closed on this entry.