Here is a list of useful Firefox extensions for web developers and programmers.
1. Greasemonkey
Greasemonkey allows users to install scripts that make on-the-fly changes to specific web pages. Greasemonkey can be used for adding new functionality to web pages, fixing rendering bugs, combining data from multiple webpages, and numerous other purposes.
2. Firebug
With Firebug you can edit, debug, and monitor CSS, HTML, and JavaScript live in any web page. Works with: Firefox: 1.5 – 2.0.0.*
3. Web Developer
Web Developer extension adds a menu and a toolbar with various web developer tools. Works with: Firefox: 1.5 – 2.0.0.*
4. Html Validator
HTML Validator is a Mozilla extension that adds HTML validation inside Firefox and Mozilla. The number of errors of a HTML page is seen on the form of an icon in the status bar when browsing. Works with: Firefox: 1.5 – 2.0.0.*
5. JavaScript Debugger
JavaScript Debugger provides a powerful JavaScript debugging environment for Mozilla based browsers. Works with Firefox: 0.9 – 3.0a1
6. MeasureIt
With Measureit you can measure the height and width properties of page elements by drawing a ruler. Works with Firefox: 1.0 – 2.0.0.*
7. Poster
A developer tool for interacting with web services and other web resources that lets you make HTTP requests, set the entity body, and content type. This allows you to interact with web services and inspect the results. Works with Firefox: 1.5 – 2.0.0.*
8. CSSViewer
With this extension you can view CSS properties of page elements. Works with Firefox: 1.5 – 2.0.0.*
9. Load Time Analyzer
The Load Time Analyzer allows developers to measure and graph how long web pages take to load in Firefox. Load Time Analyzer produces graphs that show the occurrence of events such as requests for the page, images, stylesheets and scripts, along with events like the execution of an onload script. Works with Firefox: 1.5 – 2.0.0.*
10. FireFTP
FireFTP is a free, secure, cross-platform FTP client for Mozilla Firefox. It also includes more advanced features such as directory comparison, syncing directories while navigating, SSL encryption, search/filtering, integrity checks, remote editing, drag & drop, file hashing etc.. Works with: Firefox: 1.5 – 2.0.0.*
11. FirePHP
Visualize and control your PHP backend from Firefox. FirePHP allows you to take a deeper look at all the work your PHP code does to generate that page you are currently looking at in your Firefox browser.
Update:
12. ColorZilla
With ColorZilla you can get a color reading from any point in your browser, quickly adjust this color and paste it into another program. You can Zoom the page you are viewing and measure distances between any two points on the page. The built-in palette browser allows choosing colors from pre-defined color sets and saving the most used colors in custom palettes.
13. X-Ray
Once installed the X-Ray command is available by right-clicking as well as in the Tools menu. When applied to a page it can help you see how the document was constructed without having to go back and forth between the sourcecode and the page in your browser. Is that list made of li, dd or p elements? Is that an h3 tag or just some bolded text? X-Ray shows you what’s beneath the surface of the page. Works with Firefox: 1.5 – 2.0.0.* [Thanks Andy]
14. Aardvark
Aardvark allows you to clean up unwanted banners and surrounding “fluff,” especially prior to printing a page. See how the page is created, block by block. View the source code of one or more elements [Thanks Manu]
If your favorite extension is missing from the list, drop me a line i will add it to the list.
Related: Firefox Extension: PicLens, Full Screen Slideshows
YSlow for Firebug. Nice tool to figure out how you can improve your site’s perceived performance.
How many times are people going to write this same blog post?
I agree with Tyler, but came here via Del.icio.us anyway (by the way, why did you come here, Tyler?)
Other good ones:
Screengrab!
XRAY
ColorZilla (although I dumped it in favor of ColorCop)
I would highly recommend the “Screengrab!” plugin – it allows you to take screenshots of just the live browser area – excluding all the browser and window chrome. No need to crop it out in Photoshop anymore!
Also, you can select between just copying to the clipboard or saving as PNG
Also lets you select between:
Complete page (even the invisible portion below the “fold”)
Just the visible portion
Or a selection (like Photoshop’s marquee tool)
It’s very handy!
I recently spoke with someone who recommended FireFTP – he loved it. I was surprised because I had it installed about 2 years ago and it was slow as molasses. I’ve been using the free standalone FileZilla ftp program instead. But maybe it’s time to give FireFTP another chance
All in all, the only ones I use are:
FireBug (religiously)
Web Developer (religiously)
Screengrab! (occasionally)
IEtab (rarely. Usually just open up IE. Also check out “MultipleIEs from Tredosoft)
XRAY (just got it, but use it occasionally)
Duplicate Tab (comes in handy sometimes)
CustomizeGoogle
Delicious (can’t believe you left this one out!)
StumbleUpon (great breaktime/procrastination tool)
For WordPress users, the “wp-recent-links” has a cool Firefox extension
Handy free apps for web dev (not Firefox extensions):
MultipleIEs by Tredosoft
ColorCop
FileZilla
NotePad
Should have said:
“For WordPress users, the “wp-recent-linksâ€Â? plugin has a cool Firefox extension
@Ryan, Tyler Thanx for commenting
@Andy
Thanx for commenting, i just made this list with useful extensions for the developer not for a general user. Thats why i left del.icio.us and others.
Good list. I’ve mentioned a couple of others at:
I love the WebDeveloper Firefox addon. XRay is interesting. I’ll try it out.
@ram
I find that my development work benefits by using del.icio.us because I bookmark a boatload of web development resources (del.icio.us/analogpanda) and I always have them at my finger tips. But I agree that it’s not specifically a web development “tool”
I just noticed my previous post lists “NotePad” as a ‘handy free app for web dev”… I’m not sure if this blog ate my two plus signs ( ), or if I just forgot them, but I DO NOT RECOMMEND NOTEPAD FOR WEB DEV!
It should read “Notepad ” or if the plus signs get munched – “Notepad Plus Plus”
yep, plus signs are getting borked!
Great list. I think Greasemonkey might be the commonly used one.
@Nirmal
Yaah Greasemonkey is famous, many people use it
@Shankar
Web-developer is quite useful extension
FANtastic post! If ppl aren’t using these, they’re WAY behind the curve.
@Bush,
Yep these are very useful tools
[…] via Top links […]
I’m in a world of Greek and Latin which I don’t understand… I’m not a developer! still I guess it is a good list!
Ram, you might wanna include Aardvark Extension for Firefox as well.
Also if one is using the Web Developer extension, Html Validator, MeasureIt, and CSSViewer extensions are not required as Web developer supports all of the features these three extensions provide. For best performance, keep FF light.
Good screen captures could be created using FireShot.
The plugin captures both entire web page and only its visible area.
A graphic editor is provided: captured screens could be edited and easily annotated.
It’s absolutely FREE, you can download it from: http://screenshot-program.com/fireshot/fireshot.xpi
Have fun 🙂
Thanks so much for posting about PicLens 1.6. We really appreciate it!
For interested readers, below are links to two videos demos, one by our team and the other by a PicLens fan!
http://www.youtube.com/watch?v=utySPFH_HlA
http://www
Thanks, again.
Jessica & The Cooliris Team
@Jessica
I received your mail i will post about it
Nice to see people are still finding XRAY useful. 🙂 The companion extension (for viewing the contents) is Professor X: http://www.designmeme.com/professorx/
Just installed load time analyzer, will update you. I use the web developer tool all the time to disable cache, view document outline, maintain cookies etc, well worth the the install.
very nice review, but i’m still searching for a full firebug+fireFTP enabled to modify .asp files and .php files in my remote server… to write the code while watching at the rendering in firefox, in real time. that would be a COOL thing! do you know if it is possible with actual plugins?