8 Firefox Add-ons every Web Developer should know about!
July 22nd, 2007 by smoove
Here are my top 8 favorite Firefox Add-ons for web-development, everybody in our company uses these Add-ons to help them be as productive as possible.
 |
ColorZilla - Get any color of a website or image with just 2 clicks! | ||
| ColorZilla adds a small icon to you statusbar, when you click it your cursor turns into an eyedropper and you can pick the color of any pixel in you browser window.
Once you picked a color the statusbar shows the RGB and hex values of that color, and the position of the pixel you picked that color from. Right-clicking the ColorZilla icon allows you to copy the color value to the clipboard in pretty much every format, so you can simply paste it in your source code or in the Photoshop color picker. |
|||
|
|||
 |
MeasureIt - Measure everything! | ||
| MeasureIt enables you to draw a ruler in your browser window - great for checking the size and alignment of elements. Just click on the little icon in your statusbar to start dragging out a ruler, the height and width are shown above your cursor.
Web Developer Toolbar (see below) offers similar functionality, but this one is way easier to access - way better workflow! |
|||
|
|||
 |
IE-Tab - Internet Explorer in Firefox! | ||
| Well, we all hate it, but as good web developers we have to make sure our websites work with all browsers.
IE-Tab allows Firefox to use Internet Explorer’s rendering engine, and render the page like Internet Explorer would. To enable IE-Tab just click on the little icon on the right side of your statusbar and Firefox will reload the page using the Internet Explorer engine. Note: IE-Tab uses the original Internet Explorer engine that is installed on your system, it does not emulate it, the page is rendered exactly the way it would be in Internet Explorer. |
|||
|
|||
 |
XRay - Hybrid view of design and source code! | ||
| XRay allows you to switch to a “hybrid view” between the design and the source code. It shows all relevant html-tags directly in your browser window.
XRay is great for finding out how the page is constructed or what css class a certain element has, without searching trough the source code. To enable it just right-click and choose XRay. |
|||
|
|||
 |
FireFTP - Transfer files to your server with Firefox! | ||
| FireFTP is a FTP client that runs in a Firefox tab. It has some great features:
Directory comparison - to synchronize your online-system with your offline-system, connection management - save server informations and connection data, Passive Mode connection and much more. Why install a standalone FTP client and probably pay for it if you can have one for free inside of Firefox? |
|||
|
|||
 |
Mouse Gestures - Navigate without using the navigation buttons! | ||
| This one is about workflow - while browsing your sites there are many things you do over and over again, like reloading a page, changing between multiple tabs, closing tabs etc. With Mouse Gestures you can do all this without touching the keyboard.
This Add-on is also very useful when you are just surfing the web - once you get used to the gestures you never want to life without this Add-on again. |
|||
|
|||
 |
WebDeveloper Toolbar - The mother of all Firefox Add-ons for web developers! | ||
| Well what can you say about this great Add-on? If you don’t have it, you have to get it, don’t think, get it, I’m serious! This Add-on has it all, it really is way to much to list it here. Look at the screenshot to see the huge amount of tools WebDeveloper Toolbar has to offer. Get it! | |||
|
|||
 |
Load Time Analyzer - How long does it take for your website to load? | ||
| You really should care for how long it takes to load your website if you don’t want to risk losing users.
The average user leaves your website after 7-8 seconds of no response after he clicked on a link. Load Time Analyzer will help you to monitor the load times of your websites by showing load times and the amount of events executed while loading the page. It also creates graphs that show the occurrence of events that happen when the page is loaded. |
|||
|
|||
I hope you like this list and found some new Add-ons that help you developing websites!
5 Responses to: 8 Firefox Add-ons every Web Developer should know about!
Thanks for the list, i didn’t know abot measure it, great add-on.
[…] nicht.untergeord.net A Blog providing useful techtips, interesting news, and weird stories. « 8 Firefox Add-ons every Web Developer should know about! […]
i never thought such addons existed..thanks for the post//
[…] you liked this article you might also be interested in my other Firefox related article 8 Firefox Add-ons every Web Developer should know about! digg_url = […]
[…] 8 Firefox Add-ons every Web Developer should know about! […]