Web designer's arsenal – 15 Firefox Extensions

This post is like a sequel to the previous post regarding web design – Web designer’s arsenal – 13 tools. I’ve decided, since Firefox has a great importance in the web design and development process, to expand the topic. Helped by extensions, I want to showcase the real power that Firefox can have.

firefox with extensions

So, let’s begin showcasing the useful addons for web design and web development. Keep in mind that it is not a particular order, although I will try to sort them in a way.

1. All-in-One Sidebar
This first extension that I’m talking about is the first step in building a powerful Firefox. This extension is not related to our purpose, but it is useful for managing extensions, themes, download and addons. So this extension, All in One Sidebar, will make our life much easier.

2. Firebug
This is the “must” extension. Without Firebug, you can call yourself a design newbie. Firebug must be in every web designer’s extension list. It helps you debug, view, edit, visualize source code. You can change and see in real time the changes in a CSS rule, or you can edit the HTML source and see the changes. Also, DOM inspector and Javascript debugger are other useful features.

3. YSlow
Yahoo! is responsible for this awesome extension. It is actually a Firebug extension, used for boosting the performance of any page. With this tool the user can analyze and then change the code in order to optimize the speed of the page.

4. Web Developer
This extension has very good features, and together with Firebug, are the most used extensions for debugging, gathering information as well as live preview for code changing. The “must” attribute goes for this extension as well.

5. ColorZilla
This extension is very used. Instead of making a print screen and then analyzing the colors in Photoshop, you can do this thing directly on the site with ColorZilla. You can use the eyedropper tool see the HTML color code from a live site, or you can use features like DOM Color Analyzer, ColorPicker to get a certain color.

6. IE View Lite
Cross-browsing is a very important topic when we talk about web pages. And the most used browser on the planet is Microsoft Internet Explorer. IE View Lite gives you the opportunity to open the current page in your version of IE. Keep in mind that this is not IE tab, which shows you the page in Firefox, this extension is a shortcut for “Open with IE”.

7. Total Validator
Total Validator is an extension used for validating the HTML source code as well as additional accessibility status for a current website. It is very helpful because it explains the source for the error and also the reason for that error.

8. MeasureIt
MeasureIt is a similar extension to ColorZilla, in terms that it uses the pointer in a different way than the default one. This extension is used to measure certain surfaces from a website. Very handy for various type of projects and for debugging purposes as well.

9. FireShot
Firefox is a great framework. I say that because only a great framework can have full size applications developed on it. FireShot is a tool for capturing, sharing, adding captions and other thing to a web page screen. It is a very good collaboration tool.

10. Codetch
Another full application can be Codetch. For a web developer or designer, which deals with HTML source code, Codetch is a lite version, Firefox extension, Dreamweaver like application. It has a similar layout, yet less features, but it helps the user to complete its source based tasks.

11. Pencil
The third extension that can easily be an application is Pencil. And this extension is the equivalent for Microsoft Visio. Yes, this extension is used in creating diagrams and so on, all inside Firefox.

12. Smush.it
Found also in the previous post, this extension will soon become a “must” extension for a web designer. This is because it is helpful in managing the size and compression of image files in a web page.

13. DevBoi
After all these tools, a comprehensive extension with reference for major web standards is most welcomed. DevBoi is a sidebar dedicated to all tags within HTML, Javascript, CSS and DOM. Optional you can add other packages like XUL, PHP or Ruby.

14. SearchStatus
This extension is dedicated to those web designers involved also in the analytic side of a web site. SearchStatus is a tool with information regarding Google Page Rank, Alexa Rank or Compete Rank

15. Screen grab!
This last extension is used for exporting pages as images. And when you have a blog, this extension is very handy because it makes an image with the whole information displayed – for example 1024 x 4000 px – in the case of a blog with many post displayed one after another.

As you can see, Firefox is becoming a good software platform, and many developers are making good extensions for different fields of activity. Search for yourself and add your favorite extensions to this list. If you like an extension and it is not in this article, post a comment and let me know.

So, this is the list that I think will easily transform your Firefox into the most time consuming web design resource ever. But we will still have to wait until Photoshop will be available as a Firefox extension.
Cheers!

4 ideas on “Web designer's arsenal – 15 Firefox Extensions

  1. Luis Pastrulo

    There’s no doubt!! Firefox gonna be the #1 Browser over IE. That’s why any design firm suggest to create sites for both browsers and not only IE.

  2. admin

    Yes, still Firefox has some features left to implement regarding the standards in order to truly become a “the” force in the browsers war.

  3. Andy Gongea

    If you are registered user, you can compare 5 sites.