Best Mozilla Firefox Extensions and Add-ons for developers…

February 2
D

evelopers always suffer to find their way in others codes, like how to figure out a certain font in a website? or what are the dimensions of this image or this template (normally you can’t download a background image to know its exact dimension) ? of course I am talking here about open source’s code or others work as long as you are not copying their work but only to figure out how they did that or this. Just simple things like those may take them from few minutes to couples of hours; depending on if the code is complicated, neat and clean or not.

 

It happened to me before, I stumbled upon a good layout and I wanted to know what are the dimensions of the background and how did he put it? usually beginner developer will view the page’s source right away, but it will never show any kind of details like this. So, it should be kind of magical tools to save time and effort and make developers life much more easier. The secret is in using the right browser, till now Mozilla Firefox prove that it is developer’s friend number one. All this because it has its own Add-ons that can do the charm for us. So what are these Add-ons?

 

1- Firebug
Firebug is an integrated tool within Firefox; it is used 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. And even more you can change the code and see the results only on your end, you won’t change anything in the real code and everything will disappear when you refresh the page. You can download it from here:
http://getfirebug.com/

 

2- Font Finder
Font Finder is a great tool, it is created for designers, developers and typographers. It allows a user to analyze the font information of any element on a page, copy any piece(s) of that information to the clipboard, and perform inline replacements to test new layouts. You can download it from here:
https://addons.mozilla.org/en-us/firefox/addon/font-finder/

 

3- Rainbow Color Tools
Another great tool for web developers. It is used to figure out the color in a certain location in the web page in Hexadecimal, it is just like a color picker and eyedropper that saves the color and tries out colors with drag and drop. You can download it from here:
https://addons.mozilla.org/en-us/firefox/addon/rainbow-color-tools/

 

4- ColorZilla
It is the same as Rainbow Color Tools, but it is an advanced Eyedropper, Color Picker, Gradient Generator and other colorful goodies. You can download it from here:
https://addons.mozilla.org/en-us/firefox/addon/colorzilla/

 

5- FireRainbow
This Add-on is used to highlight the Javascript code that is used in that web page. t is mostly benefits only Javascript coders and programmers and it is so powerful in simplifying the code and make it easier to understand. You can download it from here:
https://addons.mozilla.org/en-us/firefox/addon/firerainbow/

 

6- MeasureIt
As showing from its name, this Add-on is used to draw a ruler across any webpage to check the width, height, or alignment of page elements in pixels. You can download it from here:
https://addons.mozilla.org/en-us/firefox/addon/measureit/

 

7- FireFTP
FireFTP is a free, secure and cross-platform FTP/SFTP client for Mozilla Firefox only. It provides an easy and intuitive access to FTP/SFTP servers. It is a wonderful tool to connect to your hosting in only few steps of configurations. You can download it from here:
https://addons.mozilla.org/en-US/firefox/addon/fireftp/

 

8- Dummy Lipsum
This tool can add “Lorem Ipsum” dummy text from the official website (http://www.lipsum.com). It can save a lot of time when a developer is working on a website and needs to generate Lorem Ipsum text. You can download it from here:
https://addons.mozilla.org/en-US/firefox/addon/dummy-lipsum/

 

9- Screengrab
It saves webpages as images, This is specifically can be used when a designer or developer has finished working on a web page and wants to send an image from the whole page to the client. But unfortunately it is not compatible with the new version of Mozilla Firefox. I hope the writer will upgrade it soon, here is the link:
https://addons.mozilla.org/en-US/firefox/addon/screengrab/

 

10- JavaScript Debugger
Again it is a special tool for Javascript developers, it creates a Javascript environment for Mozilla based browsers. You can download it from here:
https://addons.mozilla.org/en-US/firefox/addon/javascript-debugger/

 

I think these are the most important Extensions and Add-ons for any designer and developer, they can save a lot of time and can be used to enhance and customize web sites. I know it must be more, but these are the ones that Iused to use and I wanted to share them with you. Hope you liked this article and stay tuned for more, seeya.

 

4-


StumbleUpon.com Add us to your digg favorites Add us to your delicious favorites add us to your facebook favorites follow us on twitter Add us to your technorati favorites Add us to your wordpress favorites Add us to your reddit favorites Add us to livejournal favorites

One Response to “Best Mozilla Firefox Extensions and Add-ons for developers…”

  1. I do not even know how I ended up here, but I thought this post was good.
    I don’t know who you are but certainly you are going to a famous blogger if you aren’t
    already šŸ˜‰ Cheers!

Leave a Reply