Top 5 Firebug Extensions

Firebug started as an indispensable Firefox extension which takes web development to a new level. But after 2 years since it’s initial 1.0 release, Firebug has grown into a platform with a host of extensions built right on top of it. Here are my top 5 Firebug extensions that every web developer should have installed.

#5 SenSEO – SenSEO is a handy checklist of key SEO criteria. This Firebug extension rates your page on a scale of 100 against Google’s webmaster guidelines. SenSEO is most important right before a big launch to catch any simple tweaks that you may have overlooked during development.

SenSEO Firebug Extension Screenshot

#4 CodeBurner – CodeBurner is an HTML and CSS reference right at your fingertips while you debug. It adds a Code Example tab which gives a brief description of the HTML tag or CSS property you have highlighted as well as a code sample so you can see the recommended usage. If that’s not enough, CodeBurner provides a link to the Sitepoint reference page which has everything you could ever want to know. Man, I wish I had this extension when I was learning HTML and CSS (let alone Firebug).

CodeBurner Firebug Extension Screenshot

#3 FireFind – FireFind does only one thing but it does it well: finding elements. Using a CSS selector or XPath statement, FireFind will highlight all of the matching elements on the page. This makes it a breeze to test CSS selectors with your site right in front of you. To boot, it also features a count of all the elements found. Even though this is possible through Firebug’s console tab when any popular JavaScript library is included, FireFind makes the process straight-forward and painless.

FireFinder Firebug Extension Screenshot

#2 FireCookie – If you have ever had to debug JavaScript cookies then you’ll wonder how you got by without this extension. FireCookie lets you inspect and edit cookies on the fly including permissions, values, and the expiration time. You can even sort all of your cookies as well as filter them out by domain. And when testing a script for your audience that has cookies disabled, FireCookie provides a simple option to disable cookies globally or just for the current domain. Now working with cookies doesn’t have to be such a stale experience.

FireCookie Firebug Extension Screenshot

#1 YSlow – Serious web developers are obsessed with performance and YSlow provides a smorgasbord of tools for measuring the speed of a site. YSlow is built around 34 best practices for speeding up a website which is the result of extensive research by the Yahoo Performance team. The extension provides a letter grade of each practice with advice on how to squeeze out every little bit of extra performance.

YSlow Test Grade View

Another handy view is the Components tool which gives you an insight into all of the componets of the page. There are a bevy of stats that can be analyzed to pinpoint bloated waste.

YSlow Components View

Finally, the statistics tool gives insight into the weight of your page for users with an empty cache and a primed cache.

YSlow Statistics View

If you have never given much thought to the performance of your site, YSlow makes it easy to dive right in.

What are some of your favorite Firefox extensions geared towards web development?

Walkthrough: Setup Multiple IE Virtual Machines On A Mac

One of the most dreaded tasks every web developer faces is testing their pages in the multitude of browsers to make sure everything is working as it should. Until recently, that required having multiple systems lying around. Microsoft only let you install one version of Internet Explorer (IE) at a time due to the fact that it is built deep into the system kernel. Apple used to keep Safari to itself on the Mac operating system leaving the only option of buying Apple hardware to get at the browser.

While there have been several stand-alone versions of IE cobbled together, I just don’t trust them like a fresh native install. And it’s good to see how a site renders with the text rendering engine of the Mac versus the Windows rendering system. Now with virtualization tools like VMWare Fusion, we can have it all.

After installing VMWare and an instance of Windows you may be tempted to set-up another virtual machine specifically for another version of IE. But this is foolish because each XP virtual machine can take up a good chunk of harddrive space. Fortunately there is another way to accomplish this while saving a heap of space.

Below are the steps I took to download the free Virtual Disk images that Microsoft provides with a bare minimum installation of XP or Vista and IE6, IE7, or IE8 Beta. All that we need to do is convert them to a format that VMWare can use and we’ll be in business. The basis of this walkthrough came from Running IE6, IE7 and IE8 on your Mac by Jeremy Gillick. So let’s dive in…

  1. Go and download the version(s) of IE that you want from Microsoft. This can be anywhere from 330MB – 3GB
  2. Download We’ll use this to convert the Virtual PC disk images to a VMWare compatible virtual disk.
  3. Start up your virtual XP machine and drag the two files onto the XP desktop.
  4. Un-zip to your C:/ drive so it will be easier to find later.
  5. Speaking of making things easier, it would help to rename the folder Qemu-0.9.1-windows to qmenu. This will come in handy later when we are typing up a storm on the command line.

    The file structure of qmenu.

  6. Double click IE7-XPSP2_VPC.EXE to extract the image. Save it to C:\qmenu. You should now see a .vhd file in your qmenu folder. Size wise it should be a little over a gig.
  7. Again, to make things easier to type later we shall rename XP SP2 with IE7.vhd to XPSP2IE7.vhd

    Renaming the VHD file for simplicity.

  8. Now it’s time to do the conversion via the command line. Fire it up by going to Start -> Run and typing cmd. Then press enter to launch the command line.
  9. Navigate to the qmenu directory by typing cd c:\qmenu
  10. Now type this line to run the actual conversion process: bin\qemu-img.exe convert -f vpc C:\qmenu\XPSP2IE7.vhd -O vmdk XPIE7.vmdk

    This is what you should type into the command line to convert your image.

  11. You will know it is working because all you will see is a blinking cursor on a new line. The amount of time it takes to finish converting can be anywhere between 10 minutes and an hour depending on your CPU.
  12. When you get back the C:\qmenu> with the blinking cursor you will know the process has finished. There will also be a new file called XPIE7.vmdk in your qmenu folder.
  13. Copy XPIE7.vmdk back to OS X by simply dragging it out of the VMWare window and onto your Mac’s desktop.
    Copy the VMDK to OS X
  14. Open VMWare Fusion and create a new virtual machine by going to File -> New.
  15. Go through the wizard and once you get to the Virtual Hard Disk page, expand Advanced disk options and check Use an existing virtual disk. Use the drop down to select Other… and go find the .vmdk file you just copied over.

    Setting up the VMWare image.

  16. Finish the wizard and boot it up. If prompted to upgrade the virtual harddrive, click Yes.
  17. Install the VMWare tools by going to Virtual Machine -> Install VMWare Tools as soon as Windows boots up. Now you’re done!

    Install VMWare Tools for better performance.

You should have a dedicated IE machine that you can test your web pages in. Mine weighs in at a mere 1.06GB compared to the typical multi-gigabyte requirement of a full install.

Final IE7 Install

Before you go rushing off in a state of web development nirvana, it should be noted that you will have to do this every three months as the Virtual PC images that Microsoft gives out expire. This is done to deter free loaders from using the OS for real work. But since you should only use it for testing purposes, it won’t be a big deal to delete the image and start this process anew every couple of months.

Happy testing!

I Participated In Firefox Download Day, Did You?

Firefox Download Day 2008 Certificate

Today is June 17th and that means Firefox 3 becomes official. After several betas and release candidates the successor to the #2 browser in the world has finally been thrusted upon us. You might want to skip Firefox 3 if you don’t use any addons, only use one tab at a time and/or enjoy a slow, bogged down web browser. Besides better memory management, the new “awesome bar”, and refreshed interfaces that better integrate into the look of your operating system, Firefox 3 manages to pack in over 15,000 other improvements.

To draw attention, the folks at Mozilla headquarters decided to break the Guinness record for the most downloaded software in a 24 hour period. Hence Firefox Download Day was created.

I updated Firefox on my MacBook Pro, on my Windows XP virtual machine running in VMware, my ancient PC at work, and even my huge Windows laptop. That last update was particularly tricky as the wireless card for my desktop replacement died and I had to tether it to my Mac via a cross-over cable. Here is a picture of the irony.

Apple makes a great $2700 wifi card.
Apple makes a great $2700 wifi card!

How many computers did you update today?

P.S. Get your own certificate.

UPDATE: Now you can track the number of downloads in real-time as well as see the average number of downloads per minute!

No Browser For Surfing? Get Some Help

It’s hard to imagine being somewhere that locks down the web browser so much that you have to resort this nifty trick I read on, but desperate times call for desperate measures. If you can’t reach the web through Internet Explorer due settings beyond your control and forgot your portable Firefox thumbdrive then simply open up the calculator or MS Paint and click “Help”. From there go to “Help Topics,” which will bring up a help window. Now all that is left is to right click on the title bar and select “Jump To URL.” Type in any web address you like, but make sure to include “http://” at the beginning and you should be good to go.

Browse The Web In The Help Menu

What you are basically looking at is a stripped-down, basic version of Internet Explorer which is built into Windows and used to display CHM files, or Microsoft Compiled HTML Help files. Sure there are no niceties like bookmarks or your comfy, cozy Firefox extensions, but if you need to check your e-mail or Twitter account and this is your only resort, you will put up with a little cruft in order to get your stuff. Besides there are back and forward buttons, what else do you need in a browser?