Must-Have Firefox Add-ons for Web Designers & Developers
Add-ons are what makes Firefox special and dear to many designers and developers’ hearts. But there are so many of them! Which ones should you install?
The Top 3 on my list:
• Firebug
Of course, Firebug is not free of buggy behaviors. Pages heavily rendered with Javascript sometimes don’t respond to edits. Opening and closing the Firebugs too many times have caused the tool to stop working for me at times.
And needless to say, whatever css edits you preview in Firebug may not 100% translate in other browsers. So this doesn’t take away the cross-browser testing to make sure your design bullet-proof.
• Web Developer Toolbar
This is a very powerful developer’s tool. It does everything from outlining different elements, displaying block/div sizes to validating css, html and links.
The toolbar offers no javscript validation. Its css validator, however, can easily replace many of the other css-validating add-ons. The toolbar makes debugging page rendering problems much easier.
• PageDiff
As the name suggests, this add-on shows you the differences between 2 pages. It makes comparing the same page on different design environments (i.e. preview vs live site) quick and simple.
It can also act as a make-do version checker. Just open up the different versions of files in Firefox and apply this tool.
More add-ons that are handy to have:
• JSView
Use this to easily see a list of Javascripts used for a page/site. View-only, no in-browser adjusting feature.
• IE View
Just right-click on a page and select “view this page in IE” - viola you see it in your default IE browser. So, yes you don’t need this add-on to open a page in IE. But it does save you a few more clicks! (think about Carpal Tunnel Syndrome).
• ColorZilla
ColorZilla’s Dom color analyzer is just plain fun to play with. The analyzer shows you all the colors used. If you don’t have a design software such as Photoshop that has a palette tool you can easily access, then ColorZilla’s built in palette browser can be useful. Its eyedropper tool (like Photoshop’s eyedropper) is neat. But Firebug has the same function and does it better.
You may find these resources on Firefox add-ons interesting:
13 Amazing Firefox Add-Ons To Make Designers Lives Easier
30+ Firefox Add-ons for Web Developers & Designers
Another 16 Firefox Add-ons For Web Designers
Chrome is the new Firefox? Beat the add-ons first. Read on.
Download Blog: Chrome catching up wtih Firefox?
My older work has proposed a similar incident but launches the event from the location of intellectuals, political operatives and social theorists in Chinese treaty port cities. ,