Pimp My Browser: Firefox Addons I Can’t Live Without
OK, so maybe I could live without them. I’d go so far as to say that I could probably live without Firefox itself, but why should I?
It’s a great browser out of the box, and the fact that anyone with the skills can write extensions for it, probably makes it the browser with the most features anywhere (I haven’t counted but look at the amount of addons there are).
These 5 extensions add features that I’ve come to rely on pretty much daily in designing and developing websites. I become so used to them that it’s only when I load up IE 7 (or if I’m trying to drive myself insane, IE 6) that I really miss them. If you spend any amount of time building websites, you should definitely have these 5 addons installed.
Firebug
Firebug is basically an HTML/CSS viewer and JavaScript debugger that integrates into Firefox. But it’s the way that it integrates that makes it so useful. Just click the Firebug icon in the status bar or hit F12 and a window opens showing you a live view of the HTML source and CSS for the page you’re on. The HTML is in a tree structure allowing you to expand and collapse elements to easily find what you’re looking for. Or just click “Inspect” and click directly on the element you want. Firebug will highlight the HTML and show you a cascading list of any styles that are being applied.
All of this stuff is live too, meaning you can change anything you want in the Firebug window and see your changes on the page right away. This is really helpful when you’re building a site and need to tweak width/height/padding/margin values or you’re trying to track down any one of the infamous IE 6 issues. Instead of making changes to the HTML/CSS files, uploading and reloading the page, you can work right in Firebug until you get it right.
Web Developer
Before I discovered Firebug, this was my #1 must-have extension. It does some of the same things that Firebug does, albeit in a different way. For example you can outline specific elements on the page, in whatever colors you want. This can be helpful to see how different block level elements are positioned or to track down all instances of a certain tag. But without the live DOM view and CSS property view, it’s become a less essential part of my tool set.
But it does have some other features that make it worth the download. The things I find myself using the most are:
Disable/Enable CSS - You can do a lot of cool stuff with CSS but you also have to face the fact that some people are going to view your site on a device that may not support CSS like the modern browsers do. With one click you can disable all styles and see what your content looks like in the default rendering.
Disable/Enable JavaScript - For the same reasons as above your sites really need to be accessible with JavaScript disabled (the big exception being complex web apps that just aren’t possible without it). It’s nice being able to toggle JavaScript on and off without going deep into the options menu.
Display Ruler - This is a pretty basic feature but one that I use all the time. When the ruler is turned on, you can click and drag directly on a website and quickly get a measurement. Before this kind of tool the only option was to take a screen shot, open up Photoshop and do the measuring there. Combined with the live view in Firebug this can be a really quick way to tweak a CSS layout or track down a problem with your width/height/margin/padding values.
View Generated Source - Sometimes View Source just isn’t enough. If you have a lot of JavaScript that is modifying the DOM after it’s loaded, you’ll wonder how you ever lived without a feature like this. Granted, Firebug shows updates to the DOM, but if you just want a quick copy of the source after some JavaScript event, this gives it to you.
And that’s really just scratching the surface. Other features include HTML/CSS/JS/508/WAI validation, linearizing of the page content, and the ability to display pretty much any information you might need (IDs, classes, anchors, block dimensions, stack levels, etc). At the very least it’s worth playing around with to see if it fits into your work flow.
ColorZilla
This addon is pretty simple compared to the first two, but just as important. Basically it gives you an eyedropper for the browser, which is a tool any designer will be familiar with. If you want to know the hex code for a particular color on a site, you just click the ColorZilla icon and then directly on the color. Right-clicking on the icon then gives you the option of copying the color to the clipboard in a number of formats — #000000, rgb(0,0,0), R:0, G:0, B:0.
Double clicking on the icon opens up the color picker which lets you choose whatever color you want from a number of different palettes and get RGB values in whatever format you need. All in all a great tool for anyone working with color when building a website.
Dummy Lipsum
Anyone designing websites knows that you usually don’t have all the content up front. So when you’re creating designs, you need to put a lot of “placeholder” text and images to show how things are going to be formatted. One of the industry standards for placeholder text is the “Lorem ipsum” text, or Greek text.
Dummy Lipsum gives you quick access to Greek text in whatever format you need. You can generate a certain number of paragraphs, words, bytes or lists and you can even generate the HTML needed to display it properly if you’re adding the dummy text directly to an actual web page.