Essential Firefox Add-ons for Developers

Getting free tools and add-ons rules!

There are tons of add-ons (aka plugins or extensions) for the Firefox browser which are easy to install and provide economical (i.e., free) tools to help you with your everyday development tasks. In this article I’ll introduce you to the two add-ons I use most regularly – Web Developer and Firebug. I use only a fraction of their capabilities, but this should give you a sense of their power, and whether these add-ons are right for you.

Essential Add-on #1: Web Developer

Since a co-worker turned me on to the Web Developer add-on for Firefox several years ago, I find myself routinely installing it on every machine I use for web development. I find this to be an invaluable tool for writing standards-compliant code and debugging javascript errors. Here’s a screenshot of just one of the plethora of menus that are part of this add-on.

Web Developer add-on for Firefox

Web Developer add-on for Firefox


One of the features I use most frequently is the Validate HTML link shown above. Similar links are provided for validating your CSS and page Accessibility, including Section 508 standards. There is an especially useful link to ‘Validate Local HTML’, which is quite handy during development time before you’ve uploaded your masterpiece to a public web server! Be sure to enable the toolbar for Web Developer under Tools – Toolbars – Web Developer Toolbar. A slick feature of this toolbar is the set of three icons at the right, which give a quick indication of browser mode and css/javascript errors.

Get the Web Developer Add-on

https://addons.mozilla.org/en-US/firefox/addon/60/

Essential Add-on #2: Firebug

The Firebug add-on for Firefox is another huge tool in any self-respecting web developer’s toolbox – and another add-on that I use to an embarrassingly limited extent. If you’re like me, and occasionally find yourself viewing webpage source code in notepad, only to give up after a couple of eye-watering minutes staring at code that scrolls on and on due to Unix style carriage returns, then you’ll certainly appreciate my favorite feature of this add-on. After installing Firebug, simply hit the F12 function key and prepare to be amazed! Don’t worry friends, I won’t make you wait until you’ve installed the add-on – just take a look at the following screenshot.

Firebug add-on for Firefox

Firebug add-on for Firefox


Hitting F12 presents a split screen view with the webpage occupying the top half of the browser, and the bottom half divided into two linked sections. The left side provides a nicely formatted and traversable view of the HTML (or CSS, Script, DOM if you prefer), and the right side reflects the corresponding style information for the selected HTML. You can even edit the HTML tags on the left to try out your changes on the fly for the currently viewed page. Outstanding!

While you’re viewing the ‘Style’ tab in the right-side pane, Firebug is kind enough to calculate which styles are in being used to render selected element, and crosses out those styles which are not being used. So, rather than reading through hundreds of lines of CSS to identify the cascaded styles affecting a particular HTML tag, you can see at a glance, which styles are in play for that element. Or, select the ‘Computed’ tab to view a nicely formatted and selectable list of rendering attributes.

Get the Firebug Add-on

https://addons.mozilla.org/en-US/firefox/addon/1843/

Tags: , , ,

Share this page: facebook myspace twitter bebo delicious digg stumbleupon buzz fark linkedin