Pimp your Firefox: 4+ Must-Have Extensions for Web Designers

While working with Lacy to build, test and debug the KickApps UI, I was able to show him how Firefox is a web designer’s best friend. Beyond being standards-compliant, it offers several tools that make Web development a lot snappier.

Here are four designer-oriented extensions, plus some built-in features get the job done.

1. The Web Developer Extension

https://addons.mozilla.org/firefox/60/

The holy grail of useful extensions. Install it and take a moment to click through each menu – there’s a goldmine of functionality in there. My favorites are:

  • Disable all CSS (Ctrl+Shift+S) – at the end of the day, it’s fun just to see how totally rad your semantic markup is modified by your rockstar CSS
  • Display Element Information (Ctrl+Shift+F) – this is a nice, stripped-down version of the old Mozilla DOM inspector. Lounch it and mouse over an element to see it’s position, size, styles, and position in the DOM. Great for figuring out why your CSS is turning that span red.
  • Resize. Nice for designers with huge monitors. You can set new sizes in the Options menu (Tools > Web Developer > Options > Resize tab). Add 1024×768.

Huned showed me the simple trick of hiding the toolbar when I’m not using it:

  • Right-click your toolbar
  • A context menu will appear. Select “Customize…”
  • You’ll see a menu of icons. Scroll down to a little gear image – it’s the web developer icon. Drag it up to your toolbar, somewhere near the home icon.
  • Click Done

Now, you can click that little gear icon to show/hide your web developer toolbar. Yay!

Update: Alternatively, Ctrl+Shift+T toggles the web developer toolbar on and off. I prefer this method, because it saves time and UI space.

2. Colorzilla Extension

https://addons.mozilla.org/firefox/271/

This is great for quickly figuring out the hex color of an image or HTML element, but it’s also good for:

  • Quicky DOM inspection – click the eyedropper and mouse over any element in your page to see it’s class(es) and ID. Move around some more to find parent and child nodes. It sometimes has trouble detecting tightly-nested elements though.
  • Click the eyedropper and then click on a webpage. Now, click on the eyedropper again and mouse around the page. Watch the X and Y coordinates – they’re plotting relative to that first click. It’s a great way to get a rough measure of a rendered element’s height or width.

3. IE Tab Extension

https://addons.mozilla.org/firefox/1419/

Install it and you get a handy button to view any tab as though it were rendered in IE. I don’t trust it completely, but it’s a nice preview of all the ways MS will mess up your CSS layouts.

4. View Source Chart Extension

https://addons.mozilla.org/firefox/655/

Another tip from Huned. This one shows a chart of rendered source, which is useful for AJAX-driven pages where a standard view source doesn’t always show all of the DOM elements. I don’t use it often, but I’m always glad it’s there when I need it.

5. Tabs

Hey, they’re build in. Neeto! Some handy Windows shortcuts:

  • Ctrl+T to open a new tab
  • Ctrl+L to highlight the location
  • Ctrl+click on a link to open it in a new tab
  • Ctrl+W closes a tab
  • Ctrl+Tab toggles to the next tab (to the right)
  • Ctrl+Shift+Tab toggles to the previous tab (to the left)
  • Group your tabs: Click on a tab and drag it to the left or right to change your tab order.

I usually have 4-8 tabs open at a time, they’re just so darn addictive.

6. View Source

An oldy but goody. If you’re coming from IE, get ready for some upgrades:

  1. Shortcut key. Ctrl+U pops up a window.
  2. Built-in text search (Crtl+F) is perfect for digging around in your HTML.

The Bad News

Firefox has a memory leak. Some people are calling this a feature, which is a stretch. I find that I have to reboot FF every day, sometimes more often if I’m opening a lot of tabs or viewing pages with a lot of AJAX or Flash.

Well, I’m sold. Get Firefox now!

One thought on “Pimp your Firefox: 4+ Must-Have Extensions for Web Designers”

  1. thanks for the tips, chris. two more i use that i’ve been hoarding for my own productivity (or just never got a chance to share) are:

    • javascript debugger. sophisticated, but slow as a dog. not that dogs being slow is a rule.
    • devboi – easily accessible documentation for html, javascript css, dom, php, ruby, and rails. toggle with ctrl-f9.

    i’d also like to add that i’m in love with the view source chart extension – it helps ajax debugging a lot more palatable.

Comments are closed.