In this post

5 must have web development add-ons for the Firefox browser.

5 Must Have Firefox Add-ons for Web Designers

firefoxEveryone has their favorite browser for surfing the web and while I have to say that Google Chrome is a close second for me I have to choose Firefox as my go to. Mainly because of all of the development add-ons that have been built over the years and the support they still get from the online Mozilla community. The purpose of this post is to point out my favorite web development tools and hopefully start a dialog about what else designers out there are using to write better code.

Firebug Tools for Web Development

I don’t know how we ever designed websites before this plugin. Firebug is my #1 pick for top Firefox Add-on for web developers. It comes complete with development tools for debugging and editing CSS, HTML and Javascript. You can alter all code in your browser making it easy to locate page elements. It helps you track down heavy or bloated files that are slowing your load times. It’s great for debugging scripts, cookies and so much more. If you’re a web developer and are not using this plugin now the only thing I have to say to you is…Why?

Web Developer Firefox Extension

The web developer add on for Firefox is another must have for designers and developers. Not only does it give you a number of different code vieiwing options, but it has IE 7 and 8 compatibility modes for testing for older Internet Explorer browsers. It comes complete with tools for validating CSS, html and even has built in responsive web design debugging with the ability to set custom browser sizes to test for various screen resolutions for mobile devices and tablets.

ColorZilla Advanced Eye Dropper Tool

ColorZilla is an eye dropper tool for Firefox that closely resembles Photoshop’s same eye dropper tool. It’s great for grabbing values without having to take a screenshot and pulling it into Photoshop to get what you’re looking for. It speeds the design process and helps keep your designs truer if you do or do not have a set design plan.

Fireshot for Screen Shots

Fireshot is a great in-browser screen grabbing program that is great for sending notes without again having to open Photoshop. It allows you to highlight and annotate images that can be sent complete with design notes via email. It’s both lightweight and easy to use and it once again helps to speed up the design process when it comes to crunch time.

FireSass for FireBug

If you’re using Sass or “Syntactically Awesome Stylesheets” this extension will serve you well. FireSass works with Firebug to display Sass file names and line numbers making it easier to debug code.

Try Code Canyon for your scripting needs. They have thousands of useful scripts that do almost anything you’ll ever need. Why re-invent the wheel ? Go Code Canyon.

5 Must Have Firefox Add-ons for Web Designers Click To Tweet
 

 

 

 

 

(I'll never share your email address and I'll never spam you.)