15 Must Have Firefox Add-ons to Enhance Web Development
Mozilla Firefox has become an extremely powerful and useful tool for web developers. Using the right add-ons, it will be developers best dream. Each of these add-ons can make certain things easier and that`s especially important for web-developers, because searching for errors and optimizing your pages can be difficult and time-consuming.
1. Web Developer’s Toolbar
Web Developer`s tool bar probably will become one of the best plugins You`ve ever seen. It comes with his own tool bar that gives many useful tools for analyzing, validating and optimizing web-pages. The great thing about this plugin is that it’s on a few different browsers, so if you switch between them you will be able to use the same plugin on all.
2. HTML Validator
HTML Validator is an extremely powerful tool available to Windows users only. The add-on gives you feedback about errors on the page. It also lets you know where problems need to be addressed. But unless you’re an advanced Web designer, stay away from this tool. It’s very complicated.
3. CSS Validator
CSS Validator adds a right-click option in your browser, sending the CSS to the W3C CSS Validator. It opens the results in a new tab. CSS Validator is a nice tool that will come in handy often.
4. Firebug
Firebug is one of those extensions that you simply can’t be without. It lets you edit, debug, and view CSS, HTML, and JavaScript.
5.. YSlow
YSlow requires FireBug to be installed for it to work, but it’s a great way to find out why your site is running so slowly. It analyzes Web pages and returns issues that are slowing the site down,
6. CSS Viewer
The add-on informs you of all the CSS information you’ll need from a site. Simply click on the page you want, open it in the Tools menu, and it will display CSS information.
7. Greasemonkey
It allows you to customize the way a webpage displays using small bits of JavaScript.
8. JSView
All browsers include a “View Source” option, but none of them offer the ability to view the source code of external files. You can use the JSView extension to solve the problem. If the website you are viewing contains any external js/css files, an icon will appear that says “SS”, “JS”, or both. Each individual file can then be viewed by clicking on the filename. The file will be opened in a new window.
9. Color Zilla
If there’s a color on a Web page that you like, ColorZilla will find the precise code for it and allow you to paste it into your coding program. You can also create custom colors with its built-in palette browser. It saves the most-used colors for easy access later on. It’s powerful, it’s simple, it’s a must-have.
10. Font Finder
Font Finder allows you to highlight a font you like on any site, right-click on the selection, and after choosing “Font Finder”, view the full CSS text styling of the selection. You can then paste that into your own Web page.
11. IE Viewer
This add-on lets you preview websites in IE. It helps when checking for cross browser compatibility. You can also set some websites to always open in IE viewer if there are some compatibility issues.
12. Fire FTP
Along with transferring your files quickly and efficiently, FireFTP also includes more advanced features such as: directory comparison, syncing directories while navigating, SFTP, SSL encryption, search/filtering, integrity checks, remote editing, drag & drop, file hashing, and much more!
13. Screen Grab
Screengrab saves entire web pages as images. This tool will allow You to take screenshots of what is currently on your screen – you can even choose the portion of the screen you want to “grab”!
14. Code Tech
Get the feel of Dreamweaver in a Firefox extension. Edit your documents right next to your web pages as you surf.
15. Aardvark
This tool can be used to clean page from unwanted banners and ads, especially prior to printing a page. Pretty useful for web developers for analyzing the structure of a page.
Hey, I am Syed Balkhi, The guy who is behind Balkhis Inc. I entered the industry back in 2002 not knowing a single thing. I barely spoke English at that time. In the past six years, my language barrier has been eliminated. Aside from English, now I also speak html, and php. Along with the languages I have also managed to master a few arts. Art of web-designing started when I first entered. Messing around with photoshop, I learned how to create my first web design. Now I founded a web designing firm Uzzz Productions. After running numerous amount of websites in various niche, I have mastered the art of web-development. Now I am compiling a resource of what I already know, and what I am learning on this blog. This resource is to help me if I ever need a guide to look back to, and it is help my fellow webmasters.
[...] 15 Must Have Firefox Add-ons to Enhance Web Development – This is why web developers love Firefox. [...]
Those are some superb steps there Syed. I have dugg this, great going.
Good list you’ve got there. I’m a Web Developer and I too use most of them (but not all). Web Developer Toolbar, Firebug, FireFTP are among the ones I almost use daily. Would you be able to tell me if having JSView will slow down my Firefox? As this add-on will show external js and css files, it needs to read each external HTTP request and save it.
There is another good add-on you can use for SEO, its called SEO4Firefox. Should try it.
Good luck
I should try it obligatory.I have heard about it for the first time and got interested.
I recently found out about FireBug and it is awesome! If you want to find something you can just quickly open it up.
Wed Developers Toolbar looks good, i shall check it out.
This is great information indeed. Not that I do any web development but useful information nevertheless.
I was not aware of any of these addons. I will have to check these out and see which ones will help me the most. Thanks!
Great list of add-ons there… Some of them really handy to actually analyse things that never crossed my mind. I particularly liked Code Tech and Screengrab. Thanks Syed, for the great list!!!
Starting to add them all
Great add-ons..! Does firefox crash with these on?
As this add-on will show external js and css files, it needs to read each external HTTP request and save it.
Definitely, the 15 add-ons you’ve mentioned can be the perfect companion for the web developer. Actually, my friend is a webmaster and he uses the web developer toolbar and the firebug on his Firefox. He says both tools are awesome and help him a lot. He saves time as well….
Great post but you left out the SEO plugin. that one is my favorite.
Awesome Add-Ons Syed, I love firefox because of this very reason! Because of it’s powerful AddOns, and what they can do for us, and save ALOT of time.
I use most of the ones you mentioned here. However, another AddOn I would strongly Recommend is called “MeasureIt” it is a ruler measure, that can help ALOT with getting the precise pixel measurements whenever dealing with CSS, and getting the sizes just right.
Till then,
Jean
Hello Syed? Where are you?
Great list here. I didn’t know there was an XHTML & CSS validator for Firefox. That would be really helpful for me since I code websites a lot.
Remember that all these addons will slow down firefox. So only enable the ones that you regularly use. If you only use it once in a while, it may be best to disabled while not in use.
Nice article, will definitely check the site out
Syed, now I am getting quite worried. Are you alright? This is very unlike you, not to post for so long!
I am sure he is fine Nicole….
Till then,
Jean
That is nice to know. As I write this, he has reappeared!
thanks for putting in ur efforts
CSS validator is awesome to use. I just started using it, but im already getting use to it. Every web developer should be using Mozilla by now!
Cool. Thanks for sharing this plugins!
Cool. Thanks for sharing. Very good plugins. I love firefox:)
great info! Firebug is one of the best add-ons, CSS can even be learnt if you use it.
Hey Syed thanks for the list. I had some couple of those but its great that I discovered other useful tools as well.
Thank you very much for the share. Indeed, this is very quality and valuable firefox web development add on list. I have few of them already installed, but the one that is most interesting at the moment for fresh new install is surely Font Finder
Useful collection!! Firebug is my daily friend, but som of those are new to me.
Great list! I normally disable my Firebug and Web Developer Toolbar unless when I’m doing some CSS tweaking
Great list! FireBug is very convenient and easy to use, With FireBug you can edit, debug and monitor CSS, HTML, Java Script, and Ajax live in any web page.
I’ve been using Firebug for a while now and I must say it’s an absolute necessity in my life! I couldn’t do without it now…