1. Firebug
I used Firebug for the first time at university, and found it a bit confusing at first. However, since using it professionally and it upgrading, I now find myself clicking my little bug at the bottom of the screen to debug all sorts of odd quirks in the browser. My only sadness is that its in Firefox, when having one in IE would be glorious, but unrealistic in dream.
Firebug is used to pick apart code, it collapses and opens divs and other elements of your code, drawing in other elements like the css, and allows you to make edit tweaks to your code so you can see the results on screen, like a styling override. I do find it fiddly still as its a bit pedantic about how it adds things, but I doubt I use it enough really to be overly friendly with it.
There are additional plug ins and sister/brother addons for it, to allow you to use different mediums, but I admit I’ve not got into it far enough yet to warrant the use!
2. Web Developer Toolbar
Owch, so it does take up a bit of space at the top of my Firefox, which is a little mean of it on a 1024×768 screen at home (yes, gaspeth, I haven’t shelled out for a new screen in 5 years or more, and use single screen domestically), but web dev toolbar is worth it.
With little menus you can switch off javascript on your page to identify if your page is accessible to that minority of users, change cookies or delete them on another menu, do things with forms, images, have a ruler, resize your window to preset settings, validate your code, view different types of source, set options to test with, and my most favourite of all – the css menu, and “view style information”. Click this, and you can hover over elements on your page, which are outlined by a red border when you are over them. One click brings up a little pane at the bottom that gives you all the css stylings related to that object. GLORIOUS. I couldn’t do my job without it, and Firefox seems very naked without it.
Get Web Developer Toolbar for Firefox
3. Delicious
I didn’t begin using Delicious as an addon, but of late its become more useful as one. I joined Delicious earlier this year because I had bookmarks at work, bookmarks on my desktop and bookmarks on my laptop, and I’d forget the urls of something in between places. So, I joined, then discovered the functionality within the browsers. Delicious is something that will work with IE which is nice – though it horrifically caused problems with IE6 standalone installation at work and made it go bonkers.
Its really come into its own since I reinstalled the OS on my desktop, as I haven’t reinstated my Firefox bookmarks since reinstallation. Instead, I’m using Delicious, and trying to get myself into the habit entirely. So far, its working, but I’ve got far too many tags to sort through!
Get the Delicious Toolbar for Firefox
4. Colorzilla
Beautiful little thing is Colorzilla. I used to take a screen grab, dump it in photoshop and use the eyedropper tool to get a colour. No more! Colorzilla has its own eyedropper for anywhere on your screen and it’ll tell you the different colour identifier formats so you can stick it in your css, or photoshop easily.
5. Download Statusbar
When I switched to Firefox all those years ago, the thing that most irritated me was the little twitty download window that would pop up when I was doing downloads. Argh! Download statusbar was the first addon I installed, even before English dictionary, and remains the first addon I suggest to people. No more idiotic little window, hello neat bar at the bottom of the screen to manage downloads in. Sexy.
Get Download Statusbar for Firefox
6. IE Tab
Finally, IE Tab. Initially the wonders of windows update was the main reason for having this little switch in Firefox, but its invaluable for switching back and forth within Firefox for testing layouts for bugs, or even being signed in twice. Open an IE tab and you’ve got a new set of cookies to play with. Yey!
In searching for the link, I realised there’s more than one type now, as its become so popular its been worked on to fit with other addons. This is good news, because I often find myself using the css function in the web dev toolbar over the IE tab by accident, and it doesn’t work.
7. Webmail Notifier
My favourite, and most used add on is the Webmail Notifier. This beautiful little addition to Firefox sits in the very bottom right hand corner and displays either a white envelope or a yellow one with a number beside to indicate if one of my many legacy email accounts has some junk. Its invaluable. I have several old hotmail accounts I use for logins to sites I do not trust not to share my details, yet still want to access, and it will check them all, while also checking my Yahoo email, and a Gmail account. There’s even more providers it can check.
One right click, and it lists all my accounts, and I get to pick the default one for each provider. If I have more than one, it will list the email beside it so I don’t get the wrong one. One right click, one left click to switch between all these accounts without having to log in, log out or anything. Pure bliss. I can leave Outlook at work, and never have to download emails to my computer, risking losing them or having to wait for huge attachments I don’t actually want to download like I used to.
Thoroughly recommend it.