Firefox Plugins You Should Have

Back in the days, developing and coding websites has always been a pain.  From hard coding websites and looking at them locally through our screens, it’s really tough for developers to see how their code works online and in an actual browser.

Microsoft did a decent job with it’s WYSIWYG Frontpage editor and Adobe did an excellent job with its DreamWeaver products.  However…what if you didn’t like the abilities of Frontpage and couldn’t afford the Adobe suite?

Technology these days have increased and thanks to other developers that think alike, we have come across essential plugins that were made for Mozilla Firefox to make it a browser that everyone should be using.  Check out these 5 plugins that every web developer should have in their disposal!

1. Firebug

Firebug is a really neat tool that helps find errors in your coding and also displays what each element is contributing to the website.  All of this live on the site.  No need to go through your files and open up a program like Dreamweaver.  Just head to the web address of your site and click the Firebug icon and you’ll be able to see your code and everything else working behind the design such as HTML/CSS/Javascript, etc…

Link to Firebug download.

2.  Web Developer 1.1.8

Web Developer is much like Firebug, but contains more tools that are helpful to developers.  Things like marking certain forms in the site, editing CSS, or even validating the html and css according to W3C standards can all be found in this toolbar.  And of course, all of this right here on the site that you’re working on.  Use it on other sites and see how they code their sites.  Learn how they tackled a certain part of the blog or site.  I’ll show you how to use some tools in a later review of this plugin.  Overall, Web Developer has everything you can possibly need to see the changes live…of course, you’ll have to save the changes and then upload them.

Link to Web Developer download.

3.  MeasureIt

MeasureIt is a neat program in that it creates a little icon on the bottom left of your browser.  This button allows you to make a ruler over a website to measure the dimensions.  This is very useful when you have a design that you have to code from and you want the measurements to be close to the design composition.  Use this ruler to compare to the ruler on your design and you can get close to the design as possible.  Every pixel counts!

Link to MeasureIt download.

4.  ColorZilla

ColorZilla is probably one of the best tools out there, and it’s very time saving.  Is there a color out there that you want to know, but there’s no clue on what it is?  Instead of wasting time to open up a program and screen-capping the website, you can just click on this tool and pick out the color from the site itself.  No more guessing, no more screen-capping, just take it from the site live.

Link to ColorZilla download.

5.  Clear Cache

Clear Cache is probably the least known thing that people think about in web design.  Basically cache is the process of your computer memorizing how a site looks the more you visit the site.  If I had a banner , and I changed a few coding…more often than not you won’t actually see the new changes..why is that?  It’s because your computer is saving the old image as a memory.  Therefore, even though the site loads fast…sometimes it may not be the actual site.  With Clear Cache, you can simply press the button and your cache is cleared and refresh the page to see the new site changes.  I’ve had many frustrations when I changed a coding and never see the changes…well, now I know it’s because of the cache.

Link to Clear Cache download.

Thank you for viewing this entry, and if there’s other tools out there that you personally like for Firefox, give a comment about it, and I’ll include it in my future list.  Subscribe to my RSS, follow me on twitter, and visit often for more resources.

Add a Comment

Your Comment