Post navigation

Firefox for the Web Developer

When I develop for the web, my primary browser is Firefox. It is my main browser overall, and has merits such as being standards-complaint, but there are additional bonuses. Add-ons. I will explore some of these today that I regularly use. Some of these are for web developers, while others I believe to be productive for any person using the web in every-day life.

Web Development

Firebug

This extension allows you to view a console, inspect and edit your HTML code, modify your CSS or client-side scripts, view the DOM, or track your network requests. It doesn’t just do these things, but it does them elegantly in a simple window at the bottom of your browser. Browsing for HTML elements is easily done by enabling “inspect” and mousing over the element on the page itself. HTML and CSS changes take effect immediately, so it is invaluable for fine-tuning your graphical page presentation. The console will display errors, and let you run JS code or functions live on your page. This is helpful for debugging any JS controls on the fly. Furthermore, it is invaluable for debugging Ajax. Any Ajax requests are shown in the console, and can be expanded to show many statistics, including the POST or GET data sent and the response.

This extension has more and more features and uses that I keep on discovering every day. Explore it. Because I can’t go into enough detail here to pay tribute to its features.

Web Developer

This toolbar add-on provides a slim toolbar at the top of your browser, but it is packed with menus offering countless helpful features. Some of these can seem random, and some are available through other sources, but most are great features – even if you don’t use them too often. I suggest modifying your main toolbar to add the “Web Developer” button which allows you to quickly show or hide this toolbar as needed.

The toolbar can allow you to easily disable scripts to see how your page will degrade, wipe out your cookies easily, and many things like that to allow you to see how your page may act in other browsers. For those looking for automated compatibility testing, its “Tools” menu allows you to run many automated validation tests by submitting your page to online web services (it even lets you validate local pages).

One of my often used tools is the ruler, which helps me get pixel measurements to design on. It can replace images with their alt tags, or display – overlayed on your page – tons of details such as element Ids and class names. You can also ask it to outline tables, block level elements, and more. These are very helpful when debugging your page layout, or just to understand how another webpage has been layed out.

General Use

Speed Dial

There are so many ways to get where you go on the web. This extension may be great, depending on your personal preferences. I won’t try to recommend it outright to everyone. I will say, however, that it is greatÂ if you have about 9 websites you frequent, and want to be able to access them quickly when you launch your browser. Some other people may prefer opening their browser to a portal like iGoogle if they prefer to see news, weather, etc. on browser launch. You can even get the best of both worlds, and set your homepage to something like iGoogle and have Speed Dial load in new tabs and windows.

Speed Dial is an extension for Firefox that is based off of the Opera feature Speed Dial. It has a grid layout, with buttons that you can fill easily with webpages. It automatically samples the webpage to produce a thumbnail, or lets you specify an image to use. I use it with 9 buttons, and can press [Control] + 0-9 to go to what I want without even clicking.

You may alsoÂ want to check out Fast Dial which has much the same functionality, and appears to be a bit sleeker.

del.icio.us Plugin

Although the new Firefox 3 is helping me to not have to save bookmarks, thanks to the Awesome Bar, it is still good to be able to save my bookmarks, tag and categorize them, and be able to find them from any computer, at any time. Plus, I include my recent bookmarks via RSS feed on this site – as you may have noticed. The free social bookmarking service, del.icio.us helps with all of this.

However, it has always been an extra step to add a bookmark, even with the browser buttons that would bring you to the right page. Now, with this extension, I can click the special tag button to get an application dialog to input all my information. I could also use the “star” icon in the URL bar to tag it as well.

Now, all my bookmarks can be accesed from online or any computer I have the extension on. There seems to be imperfect real-time syncing between toolbar on multiple computers, but a quick click of the “Sync Now” button in preferences cleans that up.