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
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.
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.