9 Essential Firefox Extensions for all Web Developers
(7 votes, average: 4.43 out of 5)
Loading ...This list is by no way comprehensive (or new), but does list a few extensions that I found irreplaceable that you could use with your firefox browser.
1. Firebug
The first in the list is Firebug. Written by Joe Hewitt, Firebug has the ability of cutting down your coding time. You’ll no longer find yourself using the Error Console which is inbuilt in Firefox, Firebug relays all the bugs that it can find, even on pages beyond the one you’re looking at (via Ajax). You can customize your firebug to work with only a few sites, you can preview the site and change the CSS on the fly. Of course that’s just scratching the surface.
2. MeasureIt
As a web designer, you must have had issues with certain images or layouts being off by just one pixel. In comes MeasureIt, a tool to measure the height and width of certain segments of the page.
3. ColorZilla
ColorZilla is a cool extension which allows you to check out colors using a color picker, or you can choose from an entire palette.
4. Screen Grab
If you don’t want to use a tool like Webshot to take screenshots of entire pages online, you could use Screengrab! a nifty tool that 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”. This is especially useful if you want to take a shot of a personalized page which requires a log in.
5. Web Developer
Firefox Web Developer is a favorite for many, many designers and coders I know, I personally don’t use it as much as I should, but do believe that this is a very useful tool in the long run, especially once you get used to it. It adds a toolbar to the top with a ton of features.
6. IE Tab
The tough parts of web development is the compatability issues developers face with Internet Explorer. IE Tab extension allows developers to switch between IE and Firefox browsers with just one click, especially really helpful with viewing the results of your CSS and javascript codes.
7. HTML Validator
Another aspect of a perfect design is getting your pages validated according W3C standards and Html Validator is the perfect tool for it. This plugin validates your pages within your local system and dosen’t send your pages somewhere for validation. It also upgrades your view of the page source along with and error log and an example on how to fix the error.
8. CSS Viewer
CSSViewer is a tiny plugin that instantly displays the current CSS attributes of a html element when you roll over it on the page itself. With its ease of use and the information it displays most of the designers will just fall in love with it once they get used to the plugin.
9. Fire FTP
FireFTP converts your Firefox into a simple and powerful FTP client where you can upload and download your files from remote servers. It also allows you to manage multiple ftp accounts within a single Firefox profile.
one more grab web page method Said:
September 5th, 2007 at 2:30 pm
Let me introduce FireShot.
FireShot is a Firefox extension that creates screenshots of webpages. Unlike other extensions, this plugin provides a set of editing and annotation tools, which let users quickly modify captures and insert text and graphical annotations. Such functionality will be especially useful for web designers, testers and content reviewers. Screenshots can be saved to disk (PNG, JPEG, BMP), copied to clipboard, e-mailed and sent to external editor for further processing.
The plugin can capture both entire web page and only its visible area.
It’s absolutely FREE, you can download it from: http://screenshot-program.com/fireshot/fireshot.xpi
To get it installed in firefox simply type this link in its address bar.
Screenshots are availabe at: https://addons.mozilla.org/ru/firefox/addon/5648
Comments and reviews (at https://addons.mozilla.org/ru/firefox/addon/5648) will be appreciated!
ghazal Said:
July 19th, 2007 at 4:59 pm
THKS for your outstanding work, specially the beautiful gradients.
I’d add to your list the “Inspect Element” which can be found in the OpenSource web browser Webkit, clone of Safari :
http://webkit.org/
Right-click/control-click on the page, select in context menu “Inspect Element”.
Then you can see the structure and dependancies of the page + .css and .js files.
Very handy.
lorenzo piccinini Said:
July 12th, 2007 at 4:18 pm
Thank you for your advises! some plugins I know yet before but other like ie tab and css viewer are very useful! I can suggest moreover other plugins like seo quake for seo works and gspace to use gmail like an online space to upload and manage files
harry Said:
July 9th, 2007 at 3:44 pm
great stuff, thanks
Sachin Said:
July 8th, 2007 at 4:23 pm
I’ve been using all the above listed extensions except the CSS Viewer. I used to dig into the CSS using Firebug Inspect context menu. But this CSS Viewer has been a relief.
Keep it up.
LGR Said:
July 8th, 2007 at 5:45 am
Good list. I have many of the same ones on my list here: http://www.blog.lgr.ca/2007/05/top-firefox-add-ons-for-webmasters.html
I will have to look into IE Tab but I probably does not work on Linux. Oh well.
Tans Said:
July 5th, 2007 at 12:46 am
I’ve been using IE Tab for a very long time! It saves so much time for me as IE opens up slowly. I have a lot of friends who still use IE and when problems arise in IE that I can’t see in FF, or some scripts work in IE but not FF, etc, I can see an IE version of the page with a simple click.
Thanks for info on FireFTP… it is slower than my usual FTP software, but, for a quick transfer, why not… probably quicker to open this instead of my regular ftp proggie anyway.
Your site is one of my favourites! I’ve got the RSS feed to prove it!