15 Firefox add-ons for Web developers

I've been working on a new Web site for the past few weeks. But instead of doing it alone, I decided to get some help from Firefox extensions. They've made my work a lot easier, and they all can be downloaded in just a few seconds.

Aardvark: Aardvark lets you select elements from a Web page and perform various actions on them. I use it to analyze the structure of a page. You can also remove and isolate elements or generate DOM code. I highly recommend it.

Find any code for the color you want.

(Credit: ColorZilla)

ColorZilla: 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.

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.

CSSViewer: No Web designer should be working without CSSViewer. 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. I use it almost every day.

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. Once you make a change to the HTML on the site, Firebug automatically displays it in the same pane. It's extremely powerful.

FirePHP fills you in on all the issues with your PHP.

(Credit: FirePHP)

FirePHP: FireBug is a fine tool for CSS, HTML, and JavaScript, but FirePHP, which only works when you have the FireBug extension installed, creates a full-featured development experience. With the help of both add-ons, you can view the quality of your PHP and find errors. It's a great aid.

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.

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.

IE View: As long as you're running Windows, IE View is a helpful tool. The extension adds an "Open in IE" option in the right-click menu, allowing you to quickly open a site in Internet Explorer. It's a great way to check how a page looks in both browsers.

Java Console: If you want to see how Java applets are running on Web pages, the Java Console is for you. You can monitor and debug applets, and get a full report on their performance.

LinkChecker lets you know where the dead links are.

(Credit: Don Reisinger/CNET)

LinkChecker: LinkChecker highlights links on any Web site and tells you if the link will direct you to a live site or if it will return a 404. I use it every day.

Poster: If you want to debug servers and make HTTP requests, Poster is the tool for you. It's easy to use, you can set a content type, and within minutes, you'll have all the information you need to inspect the results of your HTTP query. Useful.

Style Sheet Chooser II: Style Sheet Chooser II replaces Firefox's built-in style sheet switcher and allows you to pick an alternate style that will persist on all pages of a Web site. It's not something you'll use often, but when you do need something of the sort, Style Sheet Chooser II is the way to go.

Web Developer: If you install any of the extensions in this roundup, Web Developer should be included. It adds a menu and toolbar to Firefox giving you the option to display a page's style, view and edit CSS, and much more. No Web developer should be without it.

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, based on Yahoo's rules for high-performance Web sites. I use it often to find out where I can improve the speed of my sites. Try it out.

[El_Segfaulto]

Very useful list!

[Angmarr]

I really want to see HOW chrome plans to compete with Firefox!
I mean if they plan to introduce Addons doesn't that kinda destroy their whole agenda about being simplistic? Then again, they need addons to compete with the fox.

[wojx]

word.

[SNOWM4N7]

That Colorzilla is very useful. I always struggled trying to match the color of my twitter background, with the twitter toolbar designs.

Thanks Don!

[blaszta]

Good list! There are some extensions that I haven't try before, like Aardvark.

[Tergon]

good list but I'd replace/admend css viewer with JS view https://addons.mozilla.org/en-US/firefox/addon/2076 whcih'll (as well as css) allow you to read a site's JS files (it also works great in combo with script blocker, to see what you are blocking)

also (on today's featured plugs) was Javascript Debugger (which I've not tried) https://addons.mozilla.org/en-US/firefox/addon/216

[Raithlin]

+1 for the JSView extension. I use this regularly to view both JS and CSS setups.

[GeekyJohn]

I would also like to recommend MeasureIt, it's a great little addon to measure out some dimensions or if you want to see how much spacing there is between elements. https://addons.mozilla.org/en-US/firefox/addon/539

[WebGuiGyver]

Thanks for this article. Great stuff.

May I add a couple of my absolute "must have" Firefox extensions to the list?

- TamperData: view, intercept and manipulate HTTP headers
https://addons.mozilla.org/en-US/firefox/addons/policy/0/966/33806

- Sketching & Prototyping with Firefox: if you need to show your co-workers what that new web page is going to look like, sketch it up within minutes
http://www.evolus.vn/Pencil/

- XRAY: it's a bookmarklet, or a scriptlet, that lets you x-ray the web page
http://www.westciv.com/xray/

Again, thanks for your hard work!

[theGUIguy]

This is a good list but it needs some upgrades.

IEView should be replaced with Browser View Plus. It not only gives you IE but up to 3 other browsers off the context menu as well as toolbar icons. Mine is set to launch IE, Chrome, Opera and Safari. It can also be set to use other browsers.

FirefoxView should be on this list so you can view a page in FF from IE.

JSView is my preferred way to check the JS and CSS files on a site.

QuickJava's status bar icons are the quickest way to check/set whether Java and JavaScript are running.

Nuke Anything Plus has proven useful in my presentations by allowing me to quickly show what a page would look like without something already on the page.

FireShot for screen grabs (when communicating issues to others) might make the cut too.

[web-designer-]

Great plug list. I use most of them except for Java Console and Poster.

[exactlyy]

i really like your list , and i LOVE Firefox ..

[jake3373]

IE Tab is a good one too, you can embed the IE rendering engine in Firefox and switch back instantly!
https://addons.mozilla.org/en-US/firefox/addon/1419

[drumsticks]

IE Tab has problems because it is not a true native engine. There are certain issues that I had come across when using IE Tab that was never experienced when loading up the actual IE browser, itself. I wish I could remember the problems specifically, as it has been a couple of years now, but I do remember that it occurred when a QA member tested my development on IE, which made the tested page operate differently than it was when I tested it in IE Tab with the same version. If IE View is anything close to operating the same way, with a modified embedded engine for IE, then I don't suspect it will render everything exactly as IE itself.
Something I've been using lately is IE Tester, which is not a Firefox plug-in, but allows developers to test engines for IE8, IE7 IE6 and IE5.5 on Vista and XP, all in one app. I have just begun using this a few months ago, but I have not come across any problems, so far.
http://www.my-debugbar.com/wiki/IETester/HomePage

[Scykei]

If only these Google Chrome has these great add-ons...

[mikerlynn]

Where is live http headers? Thats one of the best for devs - similar to http://www.httpviewer.net

[researchrocky]

unwanted hair by using the laser energy is permanently destroyed. With laser epilation of unwanted hair healthy, it is possible to quickly and effectively get rid of. However, you can get desired results, effective and safe use of laser devices suitable for electrolysis treatment, practitioner knowledge and experience, the timeliness of care is required.
<a href="http://www.theessay.co.uk/">Custom Essay</a> | <a href="http://www.thedissertation.co.uk/">Dissertations</a> | <a href="http://www.thedissertation.co.uk/topic/computer-science.asp">Computer Science Dissertation</a>

[researchrocky]

unwanted hair by using the laser energy is permanently destroyed. With laser epilation of unwanted hair healthy, it is possible to quickly and effectively get rid of. However, you can get desired results, effective and safe use of laser devices suitable for electrolysis treatment, practitioner knowledge and experience, the timeliness of care is required.
[http://www.theessay.co.uk/]Custom Essay[/url] | [http://www.thedissertation.co.uk/]Dissertations[/url] | [http://www.thedissertation.co.uk/topic/computer-science.asp]Computer Science Dissertation[/url]

[Tonyre77]

Yes, that's correct but I think we should read more about it.
www.dissertationprovider.co.uk/samples/sport_science.aspx

[deelon2]

I too think so, good article:)

Signature:
<a href=?http://thesims3download.Wordpress.Com?>The Sims 3 Download</a>

[deelon2]

I too think so, good article:)

Signature:
<a href="http://thesims3download.Wordpress.Com">The Sims 3 Download</a>

[deelon2]

http://thesims3download.Wordpress.Com