Nearly any Firefox (FF) user knows that you can “add-on” stuff that doesn’t come innately with a FF download and install. If you don’t, you should; try going here: https://addons.mozilla.org/en-US/firefox/
Now, on my first encounter with this page, I looked at maybe five-to-six add-ons, got bored (read: overwhelmed), and moved on with life. Then a couple friends started doing stuff that made me blink, rub my eyes, and say “Whaaa?”
Today, I cannot imagine having to develop websites or browse the web without the power of my favorite FF Add-ons.
With that in mind, I would like to open a discussion about these wonderful tools by stating my personal favorite add-ons and by encouraging everyone else to add their favorites below (if you do post your favorite(s), please try to provide the data I provide below, to help other readers make as educated a decision about that add-on as possible).
Happy adding!
Atg
Web Developer:
https://addons.mozilla.org/en-US/firefox/addon/60
I assume most people know about this already, but the list wouldn’t be “complete” without it… Web Developer is absolutely indispensable for web developers, as far as I am concerned! From right in my browser, I am now able to easily: disable/enable JavaScript, Java, images, CSS, Cookies, etc.; view all of the JavaScript on a page in one single, searchable page; edit CSS inline (and save the edited CSS it to a file); view a webpage’s generated source (meaning, even the stuff that JavaScript created post page load!); and lots and lots more…
* When you download Web Developer, be sure you also download and install the DOM Inspector, or some of the Web Developer features will not work…
Firebug:
https://addons.mozilla.org/en-US/firefox/addon/1843
Similar to the Web Developer, I’m sure most know about this. It took me a while to fall in love with this one, but I knew some many others that swore by it, I just kept trying and trying to find the power of it; and I did. Primarily, the ability to walk step-by-step through a page’s JavaScript sold me on Firebug’s power, as did the ability to inspect an element (viewing its entire chain of CSS, including lines through any CSS that has been overridden by later CSS, so you know what CSS is still being applied to an element). I later began to scour through other features such as monitoring the network travel of a loading page, to see which page resources are loading when, and how long each one is taking (through the Net tab), monitor HTTP Requests (to see Ajax functions fire as they fire), as well as the powerful features that this add-on’s add-on provide… So, without further ado, let’s talk about this add-on’s add-on!
* The only ¡Ojo! I have about Firebug is it can be a real resource pig and often kills by FF browser, so I normally keep it Disabled until I need it.
YSlow:
https://addons.mozilla.org/en-US/firefox/addon/5369
Interestingly, this add-on is an add-on to an add-on! Created by now-famous Steve Souders (http://stevesouders.com/), then the Chief Performance Yahoo! at Yahoo!, now making the world a better (performing) place at Google, and greatly enhanced by Steve’s fantastic book (http://www.amazon.com/dp/0596529309) (few books have used so few words to express so many great points; not a word wasted in my opinion), YSlow is extremely powerful to help developers recognize bottlenecks in their pages, but really should not be regarded as the “Holy Grail” that so many are treating it as. YSlow evaluates several components that affect the load-time of a webpage, including the number of HTTP Requests a page makes, whether or not all of the CSS is at the top of the page and the JavaScript is at the bottom, whether the site uses a CDN, GZip, Expire headers, etc., and provides a single-letter grade (A, B, C, D, or F) and a weighted percentage (0%-99%) to that page based on how effectively that page follows the YSlow guidelines (Steve openly states that it is physically impossible to achieve a 100%). The problem I have with the “Holy Grail” opinion some have taken with YSlow is that not all sites can be created equally: smaller sites do not have the resources to us CDNs, and commercial sites do not always have full control of what content their ads serve. So, yes, use YSlow and read Steve’s book!, they are incredibly education and useful. But take it with a grain of salt.
Foxmarks:
https://addons.mozilla.org/en-US/firefox/addon/2410
This is truly one of my favorite add-ons. How many of you work on multiple computers? And how often do you find yourself creating a Bookmark on one computer, then having to email the URL to yourself so you can create a Bookmark on some other computer? Well, Foxmarks fiexs that for you. Download Foxmarks on both computers, create an account, and let Foxmarks keep your Bookmarks synchronized for you! Each time you create a Bookmark on one computer, Foxmarks automatically updates the Bookmarks on your other computer(s). Pretty slick! So slick, in fact, that I suggested another version of this, to help keep all of my Add-Ons synchronized (because I now find myself doing the same emailing to myself with my new-found add-ons as I once had to do with my new-found Bookmarks).
* The only ¡Ojo! I have about Foxmarks is you have to realize that whatever you are bookmarking IS sitting on a server “somewhere”, so be careful what you are bookmarking and what information you keep in those bookmarks (such as username and/or passwords).
FireFTP:
https://addons.mozilla.org/en-US/firefox/addon/2200
Absolutely amazing FTP program, right from your browser! The only thing that would make this better would be if FireFTP (or even Foxmarks) synched my sites between machines, but FireFTP does have a very handy Export/Import panel that worked perfectly.
IE View:
https://addons.mozilla.org/en-US/firefox/addon/35
For any developer out there, this is also a must! When viewing a page in FF, this add-on allows you to right-click the page and click “View This Page in IE”; the add-on will open an instance of IE with the same URL you are currently viewing in FF, without you having to copy the URL manually, open IE manually, paste the URL manually, etc. It is a very handy tool, though I have suggested a minor expansion to the makers: rather than just “View This Page in IE”, why not make it “View in…” and allow me to select whatever browsers I wish to add to a list, so that I can have IE7, IE6, Safari for PC, Chrome, Opera, etc. as readily at my finger tips?
Safari View Win:
https://addons.mozilla.org/en-US/firefox/addon/6438
Same as “IE View”, but for Safari on Windows.
ColorZilla:
https://addons.mozilla.org/en-US/firefox/addon/271
Installing this add-on creates a small icon in the bottom-left corner of your FF status bar. Clicking this icon converts your cursor into a color sampler, allowing you to “grab” webpage colors on-the-fly, even copying the hex or RGB to your clipboard, for pasting into PhotoShop, Flash, or your CSS.
MeasureIt:
https://addons.mozilla.org/en-US/firefox/addon/539
Installing this add-on creates a small icon in the bottom-left corner of your FF status bar. Clicking this icon converts your cursor into a draggable measuring tool, allowing you to click-and-drag across items on a webpage to get exact sizes for images, sections, etc.
Drag-And-Drop File Upload:
https://addons.mozilla.org/en-US/firefox/addon/2190
Lets you to drag files from Windows Explorer windows or your desktop to the Browse box in Yahoo!, GMail, or any other file upload text box, rather than having to click the Browse button and navigate to them!
Download Statusbar:
https://addons.mozilla.org/en-US/firefox/addon/26
Creates an alternative to the full-size FF download window, placing a small icon in the bottom-right corner of your FF status bar. As you are downloading a file, the icon indicates the download status, time, and provides access to downloaded files (like the standard Download window, but docked so it is not in your way yet is always easily available).
Extended Copy Menu:
https://addons.mozilla.org/en-US/firefox/addon/4554
Ever copied something from a webpage, pasted it into a Word doc, email, or IDE, only to find you also copied and pasted some really annoying HTML code as well (maybe a <span> or some CSS or something)? Well, this add-on helps you get around that!
After you highlight what you want to copy, you will now have two new copy options:
- Copy as Plain Text (Ctrl+Alt+C)
- Copy as HTML (Ctrl+Alt+H)
You can also right-click the highlighted selection to see these options in your extended menu. You can then paste free of any HTML, hyperlinks, etc.