In this series of posts I will explore my favourite Firefox extensions. In this, the second in the series, I’ll describe the plug-ins I use to make my life as a web developer easier and improve my productivity. You can find a more extensive list at the Mozilla Add-on site
1. Web Developer Toolbar
“The Web Developer extension adds a menu and a toolbar to the browser with various web developer tools.”
The Web Developer Toolbar is the de-facto standard for web developers and a absolute must have. It provides an array of useful tools to help with development. Some of my favourite features include:
- Edit CSS live and see the results instantly or add an additional style sheet.
- View ‘Generated’ source to see the result of DOM manipulation with JavaScript
- Outline any element on the page to see its extent, either by tag name or by hovering with the mouse.
- View detailed cookie information and edit it on the fly.
- View details form information, enable disabled inputs, convert POST <-> GET and more. This is very useful for security testing.
- Submit the current page to the W3C HTML validator with a keyboard shortcut (Ctrl+Shift+A or Cmd+Shift+A on Mac)
There are many, many other tools to discover and I highly recommend you download it and try for yourself.
iZone Rating: 5/5
2. Firebug
“Firebug integrates with Firefox to put a wealth of development tools at your fingertips while you browse. You can edit, debug, and monitor CSS, HTML, and JavaScript live in any web page.”
Firebug is the 2nd most important tool available to web developers. With Firebug installed, you can edit a pages HTML live, get detailed DOM and JavaScript error information and view CSS inheritance and box model details.
With AJAX becoming a standard development technique, detailed JavaScript debugging is incredibly useful and being able to edit HTML live makes debugging and correcting design errors much easier.
iZone Rating: 5/5
3. YSlow
“YSlow analyzes web pages and tells you why they’re slow based on the rules for high performance web sites.”
Developed by Yahoo!, the YSlow addon works in conjunction with Firebug to analyze a web page and identify performance bottlenecks. YSlow provides a rating, A to F, for a range of issues including: HTTP requests, duplicate scripts, inline CSS/JavaScript, DNS lookups and caching. Each of these ratings are then linked to advisories with explanations and suggestions for improvements.
In addition to the performance ratings, YSlow also gives you a detailed breakdown of all the media and external files called by your page. You can use the size and download time to identify files that could potentially be optimised.
With page load time soon to be a factor in Google’s Landing Page Quality Score for AdWord’s, developers should be paying more attention to optimising pages for quicker response times. This extension will make that process much easier.
iZone Rating: 4/5
4. ColorZilla
“With ColorZilla you can get a color reading from any point in your browser, quickly adjust this color and paste it into another program. You can Zoom the page you are viewing and measure distances between any two points on the page. The built-in palette browser allows choosing colors from pre-defined color sets and saving the most used colors in custom palettes.”
Like a colour on a web page or in an image? Want to know the hex value? Colorzilla makes this incredibly easy by adding an eye-dropper to the browser window.
iZone Rating: 4/5
5. MeasureIt
“Draw a ruler across any webpage to check the width, height, or alignment of page elements in pixels.”
A very useful extension during the early stages of layout development. No longer will you have to take a screenshot and paste it into Photoshop to measure how wide or high an element should be, now you can just click on the ruler and measure away.
iZone Rating: 3/5
