Firefox Extensions For Web Development
May 6th, 2006
I am one of the biggest Firefox fans out there. I could give you a whole pitch about why it’s a better browser for everyone, but I will focus on web development. For standards based web development Firefox is an indispensable tool. Successful web production requires a lot of tweaking that in most other cases would require a lot of round trips between the browser, a graphics program and your HTML/CSS editor. Firefox comes with a broad selection of extensions. Some of these extensions are extremely useful for testing and validating your web page.General Hint: Before we start. If at all possible download Firefox extensions directly from the developer’s page. Those are usually updated before the Firefox Add-ons site. All of the extensions discussed work in Firefox 1.5.0.3 or above.
- The Firefox Web developer extension – is by far the most useful tool for Web development using Firefox. This toolbar is packed full of useful web testing tools. It can outline page elements, display the size of images, display CSS and form data, disable certain elements on a page, and more. It really does more than I could explain in this single post.
- Aardvark Extension – Are you tired of using border:1px solid #000; to debug weird CSS behavior. Well this extension doesn’t completely eliminate the need for the border trick, but it sure does help. Aardvark allows you to you a visible border around items on the page while displaying their id and/or class. You can then press certain keys on the keyboard (as indicated below) to do various things, such as delete the selected element from the page, isolate the element, or move the selection rectangle outward to the containing element. So while The Web Developer toolbar is the most necessary, Aardvark is the one you will use the most
- Colorzilla – An eyedropper tool for color selection and testing. Hovering over an element shows color info, DOM path info, and the X, Y offset from the previous click.
- Fang – This extension creates a textual representation of a web page similar to how the page would be read by a modern screen reader.
- Link Checker – Every year one of the tasks we have to do as AIR judges is check the links on each constestants page. The W3C check works is just, well slow. This link checker checks webpage links at a glance with color coding.
- Measure It – allows you to measure screen height and width by drawing a ruler across a web page to display the width, height, or alignment of any page element. No more taking a screen grab and pasting it into Photoshop or Fireworks to see how many pixels an object takes up.
- Screen Grab – SnagIT is by far by favorite screen capture tool because it allows me to do pretty much everything I need to do in one application. There are instances when I need to take a quick screenshot of a web site and SnagIT doesn’t integrate with Firefox. Screen Grab saves webpages as images by scrolling around and stitching the result together.
- IE View – Every now and then you will run across a page that either requires IE or just looks better in Internet Explorer. This happens to me every time I want to view a video on MSN. This extension allows the current page or a selected link to be opened in Internet Explorer. Note: Another Tool IE Tab allows you to view pages in a separate IE Tab, so that you don’t even have to leave the firefox interface.
- Fire FTP – I almost never perform bulk FTP operations with Dreamweaver, because it just seems to take too long. FireFTP is a free FTP client for Mozilla Firefox which provides both FTP and SFTP access to servers. Its not as full featured as other tools like WS FTP, but it gets the hob done.
- HTML Validator – This extension is based on the now famous HTML tidy program. It adds validation inside the Page Source Viewer in Firefox.
- UPDATE: Firebug – Thanks to Jon for this one. Firebug rocks. It combines a lot of the functions of Aardvark and it a great tool for diving into the DOM and XMLHttpRequest object. I have a feeling I will be using this one a lot too.
- BONUS: Del.icio.us Extension – Not necessary for web development, but it seamlessly integrates everything you need to use Del.icio.us directly in Firefox.
wom
May 7th, 2006
I’m using the HTML Validator for the first time, never knew about it. Thanks. Screen Grab is an awesome extension as well although I use a 3rd party application for added functionality to taking screenshots.
Andy Nguyen
May 7th, 2006
Del.icio.us extension is what I consider as an advance web developer resource. Basically, I use it to bookmark pages that I consider as a resource or a tutorial on a certain technique. For example, I bookmarked Lightbox JS version 2. I can go find it whenever and wherever (as long as I have Internet).
inboxnews
May 7th, 2006
I really appreciate the IE View Firefox “tab”. Sure beats firing up Internet Explorer. I especially like that I can view pages in a separate IE Tab so that I don’t have to leave the Firefox interface.
Kelsey Ruger
May 7th, 2006
Another one I left off the list (mostly because I don’t use it) is Sage. Sage is the Firefox based RSS feed reader. It’s pretty good as far as RSS readers go.
jpez
May 7th, 2006
W00t, I feel really web-savvy because I have almost all of those extensions!
Jon
May 7th, 2006
Firebug — probably the extension I use most. I use it over Aarvark and Web Developer most of the time.
Kelsey Ruger
May 7th, 2006
Thanks Jon Firebug looks like it is really useful if you are doing AJAX development as it lets you see XMLHttpRequest traffic. I am going to have use this one over the next couple of days.
10 must have Firefox extensions for Web Development » HackTricks
May 7th, 2006
[…] read more | digg story […]
Rick
May 7th, 2006
Here are some more pretty vital extensions:
View Rendered Source -
http://jennifermadden.com/scripts/ViewRenderedSource.html
This adds an entry to the context menu which allows you to view the source of the page, just like Firefox sees it. For example, JavaScript generated tags/ attributes will show up. It also structurizes the source into colored blocks, for easy reading.
ImageZoom -
http://imagezoom.yellowgorilla.net/
Not really for web development, but it can help. With this extension you can not only zoom individual images (right-click on it) on a page but also all images on a page. (Ctrl+ and Ctrl+/) Perfect for simulating Opera’s zoom function when combined with text zoom. (Ctrl++, Ctrl+-, Ctrl+0)
Live HTTP Headers -
http://livehttpheaders.mozdev.org/
When developing a web application such as a forum, you’ll want to test if your work is secure. Live HTTP Headers inspects GET and POST variables, among other things. “Would a scriptkiddie be able to edit someone else’s post if he intercepts and modifies this variable?” - Now you can find out!.
D Jones
May 7th, 2006
If you are using the webdeveloper extension, it eliminates the need for a number of these extensions…
It measures in the same way as Measure It, It also outlines like Aarvark. It validates and link checks as well.
One extension I have found helpful is live http headers extension.. It is very useful for ajax debugging because it allows you to see background requests.
Lewis
May 7th, 2006
Web developer shows rendered source (Vuew Rendered Source), it highlights and shows element details aswell as being able to edit HTML etc. (Aadvark), ColourZilla zooms (ImageZoom)
Glen C.
May 7th, 2006
The web developer extension does most of the things measureit does by use of the misc -> display ruler function.
Interknox » Blog Archive » Firefox extensions
May 7th, 2006
[…] Nice list of Firefox extensions for web developers. I think I listed some of these before but you can never have too many lists. […]
Nick G
May 7th, 2006
Hey Kelsey, there actually is a FF extension for SnagIt: http://techsmith.com/snagit/accessories/firefox.asp
Kelsey Ruger
May 7th, 2006
When did they add that. Maybe with their latest release? That is one more nail in the coffin for me as far as using IE is concerned.
Brian
May 7th, 2006
I uninstalled MeasureIt when the Web Developer Toolbar added it’s own ruler tool. I liked MeasureIt a little bit better but the fewer extensions the better so it had to go.
JCM
May 7th, 2006
You forgot Leak Monitor, an essential tool for Ajax developers:
http://dbaron.org/mozilla/leak-monitor/
Keith
May 7th, 2006
I’m sure there are lot more other useful extensions, rather than just these few.
JCM
May 7th, 2006
I also recommend:
Javascript Debugger:
http://www.hacksrus.com/~ginda/venkman/
(very useful when you code in Javascript)
and
View formatted source
https://addons.mozilla.org/firefox/697/
I also installed the following, but never used them:
Dom Inspector
http://www.mozilla.org/projects/inspector/
View cookies:
http://www.bitstorm.org/extensions/view-cookies/
Add & Edit cookies
http://addneditcookies.mozdev.org/
johncory
May 7th, 2006
Spellcheck Extension?
One of my positions’ frequent (boring but necessary) jobs is manual text updates for site pages not controlled by CMS. I would love to see an extension that checks a full web page for spelling errors but the only extension I’ve seen is for checking text entered into textareas. Is something like this impossible because of parsing? Wish I knew more about programming so I could make one! Anyhow, thanks, just spreading my interest.
actionjackson
May 7th, 2006
Some of these are new to me. Thanks!
But no one mentioned View Source Chart. I like this extension a lot as it provides a colored graphical way to view rendered source and allows you to collapse elements as needed to reduce clutter, etc.
http://jennifermadden.com/scripts/ViewRenderedSource.html
The Web Design Blog
May 7th, 2006
[…] A bunch of Firefox extentions for web developers. « Spring 2006 CSS reboot trends […]
S.R. Prozak
May 7th, 2006
What an awesome collection of tools! As soon as they get these up on a real browser like Opera, I’ll check ‘em out.
Brian
May 7th, 2006
I have used this collection of tools for school and at home. It is an awesome array of tools that everyone should include on there browser. View source chart is an amazing tool as well which people should think about downloading.
ranjan
May 7th, 2006
I use Page Saver
http://pearlcrescent.com/products/pagesaver/
instead of Screen Grab.
Much lighter and efficient
Jon
May 7th, 2006
Cant believe that MODI isnt on that list.
Once you start using MODI it will be the number one tool in your arsenal.
MODI is Mouse Over DOM Inspector, and lets you easily click around in your DOM, outlining elements, and showing all their critical information.
http://slayeroffice.com/tools/modi/v2.0/modi_help.html
Elliot Swan | Firefox extensions for web development
May 7th, 2006
[…] Firefox Extensions For Web Development–A lot of good extensions there. […]
AlbanyWiFi.com » Blog Archive » Firefox Extensions For Web Development
May 7th, 2006
[…] Firefox Extensions For Web Development […]
Bill Dueease
May 7th, 2006
I tried to download LinkChecker but Firefox had blocked it.(I believe I must have this provision engaged in Firefox, but don’t know where) So I went to the Firefox site (entensions) and looked for the LinkChecker extension. It was nowhere to be found.
I have several questions.
1. Did you write the extension?
2. Why would Firefox not list your extension?
3. How can I release the protection in my Firefox Browser.
4. How can I download the LinkChecker?
Notes, I have a Mac with OX 10.3 and Firefox 1.0.6 if that will help.
Bill
Kelsey Ruger
May 7th, 2006
Bill, Thanks for the questions.
One thing I will say is update Firfox to 1.5. That might fix your problem.
Jordan Meeter
May 7th, 2006
Cool, thanks for this great list! I knew about most of them but Fang and MeasureIt are new to me. They are really helpful!
10 must have Firefox extensions for Web Development at JohnTP’s Home
May 7th, 2006
[…] read more | digg story Share and Enjoy:These icons link to social bookmarking sites where readers can share and discover new web pages. […]
steven voyles » Blog Archive » Firefox Extensions For Web Development
May 7th, 2006
[…] The Moleskin » Think.Try.Teach » Firefox Extensions For Web Development […]
zean.no-ip.info » Firefox extensions for Web Development
May 7th, 2006
[…] http://www.themoleskin.com/archives/10-firefox-extensions-for-web-development/ […]
Jim
May 7th, 2006
Wow - I never noticed the ruler and guides in the new version of the Webdeveloper extension!!
Two I really use a lot - esp working with forms are:
Scribe - allows you to fill out a form once and then save the info to reuse
A version for 1.5:
http://www.allpeers.com/blog/2005/12/09/fixing-scribe-redux/
And the Lorem Ipsum extension - to quickly generate some dummy text to fill out those forms :)
http://mozmonkey.com/
Rue Plumet » Interesting Sites For This Week
May 7th, 2006
[…] Firefox Extensions For Web Development Tagged as: css design development extension firefox html reference software web « Mercy In The Wilderness […]
Sudar
May 7th, 2006
Thanks buddy, nice list.
But I think you have left out some other useful extensions like
View formatted source
DOM Inspector
View Cookies etc.
gustavo
May 7th, 2006
May I ask if there is any special reason why you all prefer Aardvark instead of the Platyplus extension? Is it because Platyplus requires Greasemonkey?
a•pril
May 7th, 2006
What a great list of extensions. Can’t wait to check some of them out - IE view sounds particularly handy. Thanks for sharing.
Rahul
May 7th, 2006
What about X-Ray?
Cool Extension :)
https://addons.mozilla.org/extensions/moreinfo.php?id=1802&application=firefox
Chippy
May 7th, 2006
The official del.icio.us plugin sucks. Use this one. I command you!
http://delicious.mozdev.org/
Ichigo: Noterat » Firefoxextensions för webbutvecklare
May 8th, 2006
[…] The Moleskin: 10 Firefox Extensions For Web Development […]
Martimus
May 8th, 2006
*Bows and complies before the Great Chippy*
Great set of extensions…some I knew of, others I didn’t. Thankx!
Geneva
May 8th, 2006
I permalinked your ass - great article!
» 10 must have Firefox extensions for Web Development « marksdigital
May 8th, 2006
[…] read more | digg story […]
Jessica
May 8th, 2006
Hi, just saw this blog entry and thought I would let you know that SnagIt now has an add-in for Firefox. It’s at http://www.techsmith.com/snagit/accessories/firefox.asp. If you find ScreenGrab more helpful, that’s cool too, but just thought I would let you know. Thanks for the SnagIt love! :)
planetaflood.cl
May 8th, 2006
Good article!
www.planetaflood.cl
Ronan
May 10th, 2006
Good list ; I would add the great Nicolas Huon’s CSS Viewer Extension :
https://addons.mozilla.org/firefox/2104/
depi
May 10th, 2006
Thanks! Really useful article, it’s slovak translation can by found there: http://depi.sk/2006/05/10/firefox-rozsirenia-pre-tvorbu-webovych-stranok/#comments
~Kuneri Bloggy » Firefox for web developers
May 10th, 2006
[…] If you are a web developer you may like this post. It extends firefox with most useful and popular web developer extensions and gives short definitions of them. Eye dropper, link checker, screen capturer and HTML validator are some gripping ones. […]
BlueSparc design, technology news » Blog Archive » Firefox Extensions For Web Development
May 11th, 2006
[…] I have always been a Camino user myself, but I understand and appreciate the expandability of Firefox and it’s extensions. In this article, by The Moleskin the author lists 10 of the best Firefox Extensions For Web Development, and what their strengths are. For standards based web development Firefox is an indispensable tool. Successful web production requires a lot of tweaking that in most other cases would require a lot of round trips between the browser, a graphics program and your HTML/CSS editor. Firefox comes with a broad selection of extensions. Some of these extensions are extremely useful for testing and validating your web page. […]
FTOFANI // blog » Quinta de tarde
May 11th, 2006
[…] Muitas e muitas extensões de Firefox para webdesign e programação para web em geral. Preciso instalar algumas delas em casa, testei a maioria aqui na empresa e são bem úteis. […]
billy
May 15th, 2006
I use FF Web Developer extensively, but it has one problem that is a true PITA.
If I have images, like for a background in a list, in a separate directory, and the css file also in a separate directory (a sister to the images one), WebDev won’t display the images when editting css. It can’t follow the path.
Or am I doing something wrong? Sure, I can work around it, but I’d like to not have to.
Easy Webbers
May 16th, 2006
[…]Kelsey Ruger has summed up some pretty neat firefox extensions for web development on his blog. If you use Firefox, go get some of them so that your Firefox actually can become useful.[…]
La atrozfera
May 16th, 2006
[…] Un post de estos era lo que estaba buscando desde hace un tiempo atrás. Antes de leerlo contaba con 2 extensiones solamente, y no tenía conocimiento de Aardvark, que por cierto lo instalè y trabaja de maravillas. Les dejo el post traducido: […]
Marko
May 21st, 2006
Thanks for the list. Very good extensions.
Christian Watson
May 23rd, 2006
Total Validator [http://www.totalvalidator.com/] has a great Firefox extension.
I’ve also include a collections of lists of Firefox web developer extensions on my own site that your readers might be interested in: http://www.smileycat.com/miaow/archives/000236.html
john72
June 5th, 2006
webdeveloper wins hands down ! mouseover DOM inspector (http://slayeroffice.com/tools/modi/v2.0/modi_help.html) is useful too and mozlab (http://dev.hyperstruct.net/trac/mozlab) looks impressive
John
July 11th, 2006
My favorite is the web developer extension. Very usefull for developers.
Anyway nice post, sumbled :)
Paul Stamatiou
July 22nd, 2006
Top 7 Things I’ve Learned at Yahoo!…
Being surrounded by technical genius at work everyday, I was bound to pick up a few pieces of wisdom. Working on some top secret stuff for Yahoo!, I quickly learned that every website or blog that Yahoo! dishes out must comply with the graded browser …
Andrey
August 9th, 2006
WOW! I love these they really make my work as a web designer and developer much easier.
JoJo Developer
August 15th, 2006
[…] FireFox extensions for web developers. Nice article on the top 10 firefox extensions. […]
Easy Webbers
August 27th, 2006
[…] http://www.themoleskin.com/archives/10-firefox-extensions-for-web-development/ […]
John Walker Exp..
September 7th, 2006
[…] A List of Over 100 Best Firefox Extensions - lifehack.orgThe Moleskin » Think.Try.Teach » Firefox Extensions For Web DevelopmentExtend Firefox Contest Finalists :: Mozilla Add-ons :: Add Features to Mozilla Software […]
TopDig » 博客文章 » TOP10:十个最好的Firefox扩展插件
November 18th, 2006
[…] The Moleskin: Firefox extensions for Web development If you’re writing your own extensions, see this list. […]
internet / Some various things you might want to check out
November 27th, 2006
[…] Firefox Extensions for Web Development […]
Maziar
December 22nd, 2006
Hi, That’s nice post. I’ll blog this.
Check bellow for top FireFox extensions.
Http://raizaM.BlogSpot.com
Jeroen
January 5th, 2007
FireFTP doesn’t support SFTP.
Firefox Extensions For Web Development
January 11th, 2007
[…] I have always been a Camino user myself, but I understand and appreciate the expandability of Firefox and it’s extensions. In this article, by The Moleskin the author lists 10 of the best Firefox Extensions For Web Development, and what their strengths are. For standards based web development Firefox is an indispensable tool. Successful web production requires a lot of tweaking that in most other cases would require a lot of round trips between the browser, a graphics program and your HTML/CSS editor. Firefox comes with a broad selection of extensions. Some of these extensions are extremely useful for testing and validating your web page. […]
MakeUseOf.com
January 29th, 2007
[…] 9. 10 firefox extensions for web development … [themoleskin.com/ May 6, 2006] Categories: web development […]
Vox
February 26th, 2007
Hi, thanks a lot for the list. I use a few of these web development extentions already, but I’ll definately check out some of the others.
FooSpeak » Blog Archive » The Browser with a Third Arm
May 30th, 2007
[…] · 10 Firefix Extensions for Web-Development http://www.themoleskin.com/archives/10-firefox-extensions-for-web-development/ […]
links for 2007-06-23 « Yet another blog
June 23rd, 2007
[…] Firefox Extensions For Web Development · Think. Try.Teach · The Moleskin - Technology, Design and all things Web […]
Marc
August 3rd, 2007
I did’nt see KGen, the keyword generator. Here is alink :
https://addons.mozilla.org/en-US/firefox/addon/4788
Hope you’ll love !
十个最好的Firefox扩展插件列表 | 珂亦精品收藏
August 10th, 2007
[…] The Moleskin: Firefox extensions for Web development If you’re writing your own extensions, see this list. […]
Firefox Extensions For Web Development at Manhem
October 15th, 2007
[…] The Moleskin‘den Web geliştiricilere özel Firefox Extension‘larından harika bir çeşni: Firefox Extensions for Web Development. Bugüne kadar tanışmamış olanlara şiddetle tavsiye ederim. […]
jeux de poker online
May 28th, 2008
jeu poker omaha gratuites…
As a summary of regles poker all in casino poker texas jouer au poker sans payer jouer texas holdem en ligne combinaison texas holdem…
What are your thoughts?
I'd love to hear your opinions or thoughts on this post. If you would like to link to it you can use the permalink.