Imagination is our power

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!

Comments on: "Web designer’s arsenal – 15 Firefox Extensions" (1)

  1. There are so many images on the Web. How can you know whether an image is original or has been edited by Photoshop? Check it out using Photoshopped Image Killer. Specify your image’s URL and the site will do analysis for you automatically.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: