Extending Firefox for Web Developers
The Mozilla Firefox browser is probably the greatest webbrowser in the world on it’s own. But ever since it’s extension feature matured around the release of Firefox 1.0 it has been an absolute killer application! For web developers it has become the ultimate tool to inspect, debug and test and for users it has become the greatest platform for making a browser that suit their specific needs.
I will try and explain the fundamental groups of extensions, and then I will list my favorites in each of these groups.
This article is the first in a series where I will cover various groups of extensions for Mozilla Firefox and related products such as Thunderbird.
The first part is for Web Developers, but I also plan to cover extensions that will be of interest to the rest of you!
Web Developer’s Firefox Extensions
- JavaScript Console
- First of there’s the magnificent JavaScript Console, not really an extension, but too useful to omit, this will list all errors and warnings encountered during a session. It also features a strict mode which will give you all sorts of useful tips for improving your code quality, such as detection of multiple variable declarations, possible misuse of equal (=) and equality (==).
- DOM Inspector
- This tool could be defined as the divined hand of the browser god, letting you practially inspect anything on a webpage from the complete DOM tree to stylesheets and JavaScript objects. Any JavaScript developer should atleast have some experience with this tool, as it can be a real lifesaver in some debug situations (to inspect generated DOM nodes).
- Venkman – JavaScript Debugger by Robert Ginda
- Venkman is a full featured debugger for Mozilla/Gecko based applications. It allows you to set breakpoints anywhere in the JS code, inspect objects and variables. It even has some profiling features, which can come in handy when performance optimizing your code. I’m not really a big user of debuggers, since I usually create my own logging and error handling, but it sure can come in handy in complex situations, and is undeniably very powerful.
- Web Developer Extension by Chris Pederick
- This is without doubt the most useful extension in the history of Firefox. Bascially it is a suite of many previous smaller Mozilla extensions beautifully put into a single extension featuring a toolbar, that gives a web developer (or any other curious person) a great toolset for inspecting, editing, validating and manipulating web pages in real time. I often use it’s features to disable all stylesheets (CTRL-Shift-S), which is a great way to get an idea of how a site is actually built, and how well it will work on non-css browsers.
The outlining tools are great for visualising block and table elements, giving a more technical overview of how the page is built up, a great help during development / debug.
The realtime CSS editing sidebar is a true gem, that can really come in handy when testing stuff. the ‘Display ID & Classes’ is also really handy as it puts labels directly on the page, so it’s really easy to get an overview of the CSS skeletal structure in the page. The handy validation links for HTML, CSS, RSS etc.. are nice to have by the hand.
For JS developers it contains a very handy icon in the right side of the toolbar, which will turn into a yellow warning triangle whenever a JS exception occurs, clicking on it brings up the before mentioned JavaScript Console.
Last but certainly not least it has a View Source button for super ninja swiftly access to the source! - Greasemonkey
- The ultimate site hackers tool, it lets you add your own JavaScripts to any site, adding any type of twist to the targetted site (only in your browser! don’t worry, you won’t be hacking the site in any illegal sense). There are hundreds of scripts available, but I haven’t spent too much time on it, since I really don’t need it. But again an impressive tool that could very much come in handy in those tricky time-constrained situations (i.e. you can alter you published site and test scripting stuff before actually upgrading the site itself).
Greasemonkey should be used with caution, and it is ofcourse of extreme importance that you trust the source from which you got the scripts, since they can certainly be made to harm you if it were to be malicious, the same goes for any application and extension you install in general!! - Platypus
An innovative Firefox extension which lets you modify a Web page from your browser in WYSIWYG mode and then save those changes as a Greasemonkey script so that they’ll be repeated the next time you visit the page.- ColorZilla by Alex Sirota
- Very handy tool which features a colour picker and an eyedropper feature, allowing you to quickly grab any colour from any pixel inside the browsers content area. It also copies it to the clipboard in any CSS friendly format. Simply outstanding! Although sometimes you might still need a OS based Eyedropper, because ColorZilla is restricted to what is shown in the browser.
- LiveHTTPHeaders by Daniel Savard
- Very handy tool that gives easy realtime access to the HTTP headers. Very useful for debugging and anlyzing various aspects of a web solution. Other extensions build upon and requires this extension to work (i.e. Header Monitor).
- View Rendered Source by Jennifer Madden
- Neat tool that allows to view the actual generated markup, useful when generating markup via scripting.
- View Cookies by Edwin Martin
- Utility that adds a Cookie tab on the ‘Page Info’ window, allowing you to see and edit any set cookie that affects that page.
- Add N Edit Cookies
- Another tool to create and edit cookies on webpages. I must stress that I have not yet tested this extension, but it looks to be more suited for heavy-duty cookie work than the View Cookies extension mentioned above. And thus perhaps more suited for us developers.
Now go find even more on your own! – Please give your feedback on your opinions, and if you notice any super developer extensions not mentioned, please give me a notice and I will review it for the part 2 comming up sometime.
Ok bye now, look out for the related article series called ‘Firefox Extensions For Everyone’ which I am currently writing.
If you are new to mozilla web development you might want to drop by Henrik Gemal’s Using Mozilla in testing and debugging web sites.
September 4th, 2005 at 17:00
[...] It points out some of the best and coolest extension for Firefox as well as highlightins of some of the benefits for the individual extension. So I strongly recommend that you rush over to Fini Alrings glossy tech zine and read the article yourself. Although… If you are still left in the ancient times of old school browers such as Internet Explorer, Safari, Opera, and the likes, I suggest you hurry up and update your system with Firefox that runs on both the PC and Macintosh platforms HERE [...]
September 4th, 2005 at 20:47
Great with an extension overview. There are so many extensions nowadays, so it’s nice to see some recommendations. PS: I like that top bar image!
September 5th, 2005 at 03:02
Thanks JoaCHIP! You can view the image and a lot more on my friend Thomas Pringle’s website (which I also host and maintain) at http://www.pringleart.com
September 6th, 2005 at 07:01
Aardvark is also a great extension for web developers. It allows you to highlight and view elements just by pointing to them. You will have to google for it. Your stupid spam software isn’t letting me post the URL here.
September 6th, 2005 at 08:13
Good article.
There is also a HTML Validator extension that allow you too see the HTML errors in the form of an icon in the browser and show them+an explanation in the view source:
http://users.skynet.be/mgueury/mozilla/
September 6th, 2005 at 09:41
[...] La página Warping it up! tienen una lista de extensiones para Firefox especialmente utiles para desarrolladores web. Yo recomiendo especialmente javascript Debugger que en sus últimas versiones es impresionante, View Rendered Source que te permite ver el código html que esta usando el navegador (aunque se haya generado mediante javascript) y Web Developer Extension que te permite accetivar y desactivar diversas funcionalidades como hojas de estilo, cookies, javascript, etc. [...]
September 6th, 2005 at 10:15
User agent Switcher & WMLBrowser: Usefull for mobile devices web development. The first one allow you to change the user_agent (what a surprise! ) The second will allow firefox to browse WAP pages.
FireFTP: A full FTP client integrated in the brower: Usefull for uploading to the server
IEView: I you care about how your page renders in old and inferior browsers,
MeasureIt: a nice Firefox rule. No more thumb rules or stimations.
September 6th, 2005 at 14:52
Hello Fini,
I think there’s one big omission in your list: HTML Validator.
It’s an extension based on Tidy which sits nicely in the statusbar telling whether your page validates or not. When viewing the page-source it can tell you on which line you’ve made a mistake and even automatically clean up your code for you.
You can find my firefox webdeveloper survival kit over here: http://www.thinklemon.com/weblog/2005/07/26/firefox-webdeveloper-survival-kit/
BTW: I prefer ‘Add n Edit Cookies’ as you can manually set/hack cookies for testing purposes.
September 6th, 2005 at 15:36
[...] Update 2 (09/06/05): Fini Alring has written a short article about the same subject. [...]
September 6th, 2005 at 15:55
Hello Fini,
I found the article very interesting, so translated it for Japanese readers.
Another extention to add to the list is, as mentioned above by Caspar, is HTML Validator. This is one of the thins you can’t miss.
I also look forward to your next article about Extensions for end-users!
September 6th, 2005 at 17:17
Well ok I must say this is my first article to ever be translated into anything, but to have it translated into Japanese as the first language is certainly cool and quite an honor
Thank you very much Yama! I must quickly install Japanese fonts again 
Saltando.net mentioned the article in spanish which is also very cool
Thanks for that.
The HTML Validator extension will surely be in the next article, I’m looking forward to using it, since I saw the screenshots earlier today!
I did try out Aardvark while writing the article, and found it quite innovative, but I wanted the extensions on the list to be pretty much my personal recommendations, so I will hopefully mention it in the next article when I have more experience with it (gotta memorize those hotkeys!).
Borja: I have used User agent Switcher and of it’s very cool of course, I just had a “dream” that it was built into the Web Developer Ext, but I see it isn’t.. Will be added in next article.. WMLBrowser is also pretty cool, however I’m currently more into XHTML Basic (WAP 2.0) than WML, however I do use it for most of my WML needs.
I am 50% done with my next article called ‘Extending Firefox for Everyone’ so stay alert – he he.
September 6th, 2005 at 18:56
I’m not sure what scope of extensions you will include in your next article, but you might have a look at Googlebar Lite. It has more features than the official Google toolbar, but less bloat than the Googlebar project. It hasn’t gotten a ton of exposure, so I thought I’d mention it (just in case it may have slipped under the radar). Keep up the good work. Your articles are very useful!
September 6th, 2005 at 22:00
[...] Extending Firefox for Web Developers – extensions that web developers should install and use. [...]
September 6th, 2005 at 23:49
Web Development e testing con Firefox
Firefox è conosciuto come il browser vero concorrente di Internet Explorer.
Non tutti sanno che Mozilla FireFox può trasformarsi in uno dei migliori tool per lo sviluppo e il testing di pagine web.
Firefox già dispone di alcune funzionalità uti…
September 7th, 2005 at 01:31
“Looneyworld” says:
[quote]f you are still left in the ancient times of old school browers such as Internet Explorer, Safari, Opera, and the likes, I suggest you hurry up and update your system with Firefox … [/quote]
In defense of Opera, I have been using that browser for a couple of years now. It has many of the same or similar tools.
This is not to disrespect Firefox, which I also use. Having both browsers gives me an amazing toolbox. Thanks for the rundown on some of the best, Fini.
Cordially, David.
September 7th, 2005 at 03:04
Thanks for the great feedback and encouraging words. I really appreciate it and it will surely make the next articles in the series even better, so keep it comming.
Jonah Bishop: Thanks for the info, I will make sure to check out all the google toolbars available for Firefox.
David Hucklesby: Thank you for the kind words, I also use Opera but only to test my stuff, the same goes for IE, and since Safari is Apple only I haven’t really worked with it.
September 7th, 2005 at 03:35
I’ve found DevBoi to be quite useful. It is a sidebar reference tool that includes HTML, CSS, XUL, and DOM.
September 7th, 2005 at 05:23
[...] I use quite a few of these already, but here’s a really good list of extensions for our favorite browser every web developer should have. [...]
September 7th, 2005 at 09:26
These is a nice tool to debug ajax sites
September 7th, 2005 at 09:28
Mentioned at MozillaZine РFrance: Pr̩sentation du d̩veloppement Web avec Mozilla Firefox
Also mentioned by Tristan Nitot in standblog.org: Firefox pour les développeurs Web
September 7th, 2005 at 13:46
[...] An excellent collection of Firefox extensions for Web Developers [...]
September 7th, 2005 at 15:24
Don’t forget about SearchStatus, definately my fav. extension. http://www.quirk.biz/searchstatus
September 7th, 2005 at 15:29
[...] Read the list: Extending Firefox for Web Developers [...]
September 7th, 2005 at 17:44
http://devedge-temp.mozilla.org/toolbox/sidebars/
looks like mozilla got the netscape sidebars hosted again too
September 7th, 2005 at 19:46
My favorite extension: ContextMenu Extensions (http://piro.sakura.ne.jp/xul/ctxextensions/index.html.en) by Shimoda Hiroshi.
It’s more than just a “context menu” extension. It adds some useful features to browser, userdefined scripts, external applications, and so on. It has JavaScript Panel, Custom User Style Editor, custom scripts, etc.
Don’t forget EditCSS (http://editcss.mozdev.org/)
P.S.
If you press ctrl-a (select all) on a web page and select View Selection Source from context menu, you’ll get the rendered source, so I don’t think you really need View Rendered Source extension.
September 7th, 2005 at 20:24
I’ve just started using Platypus
September 8th, 2005 at 01:19
[...] Read the full post. [...]
September 8th, 2005 at 14:02
[...] í¼ë A. ìë§ì ê·¸ê° ì´ ì¹ ê°ë°ì를 ìí íì´ì´íì¤ íì¥ì ëí 기ì¬ì ëí´ ìë ¤ 주ìë¤. ì´ ê¸ì ì¹ ê°ë°ì íì¥(Web Developer Extension), 컬ë¬ì§ë¼(ColorZilla), ì¿ í¤ ë³´ê¸°(View Cookies) ë± ì¬ë¬ ê°ë°ì를 ëìì¼ë¡ í íì¥ì ìê°íê³ ìë¤. íì¬ í¼ëë ì¼ë° ì¬ì©ì를 ìí íì¥ì ëí ë´ì©ì¼ë¡ ë ë²ì§¸ 기ì¬ë¥¼ ì¤ë¹íê³ ìë¤. [...]
September 8th, 2005 at 16:16
[...] Extending Firefox for Web Developers The Mozilla Firefox browser is probably the greatest webbrowser in the world on itâs own. But ever since itâs extension feature matured around the release of Firefox 1.0 it has been an absolute killer application! For web developers it has become the ultimate tool to inspect, debug and test and for users it has become the greatest platform for making a browser that suit their specific needs. [...]
September 9th, 2005 at 09:03
I would definetly suggest you take a look at IE View as it’s a useful tool if you want to test a page in Internet Explorer. We all know certain sites has a nack for not working in FF.
September 9th, 2005 at 14:14
Aardvark: Sorry the spam filter was set a little high, because I occasionally recieve an extreme amount of comment / trackback spams. No reason for calling the filter stupid! he he. Here is the link to Aardvark.
Andreas: Thanks for pointing to the article ‘AJAX Debugging with Greasemonkey’, it was great to see that Greasemonkey is actually used for other than noobian site hacks.
Gerald: If search status is your favorite extension, you must not be a developer? However I have used that extension before, since I like it much more than the Google toolbars etc..
visionmonster: Thanks for Netscape sidebar docs tip.
LouCypher: Thanks for the ctrl+a tip, I have not forgotted EditCSS, but since Web Developer Extension has this feature too, it’s already covered.
Joe Anderson: ok then, hope you have fun…
Daniel: I have never used ‘IE View’, and I can’t possibly see any reason for me to try it out, ever.. But thank you very much for the tip.
September 9th, 2005 at 17:13
[...] Warping it up! :: Extending Firefox for Web Developers [...]
September 12th, 2005 at 14:32
I find MeasureIt to be extremely useful – it allows you to measure the pixel dimensions of a drawn area on your screen. Perfect for describing small design amends over the phone.
http://www.kevinfreitas.net/extensions/measureit/
September 13th, 2005 at 07:44
[...] I use quite a few of these already, but here’s a really good list of extensions for our favorite browser every web developer should have. [...]
September 19th, 2005 at 15:43
[...] Extending Firefox for Web Developers – [Bytefarmers.com] [...]
September 23rd, 2005 at 01:05
[...] Essential List and Resources on Firefox Extensions from Lifehacker Extending Firefox for Web Developers [...]
September 23rd, 2005 at 14:57
Article discussed at MSDN forum in the Phillipines!
October 30th, 2005 at 14:40
Nice post. I’ll have to put some time into getting competent with the DOM inspector and Venkman. Anyway, I’ve compiled a list of some of the best extensions here:
http://db.rambleschmack.net/pc_tips/best_firefox_extensions
November 16th, 2005 at 00:52
Firefox Developer Extensions
Found this mentioned over on lifehacker.com. Great little pointer to some of the best and most useful extensions for firefox, and web developers. Includes a short description of each extension. I personally already use greasemonkey, the javascript co…
December 6th, 2005 at 02:40
I’ve been maintaining a large list of Firefox Web developer extensions for some time. You can compare notes here: drx: Firefox Extensions for Web Developers.
February 22nd, 2006 at 21:58
[...] Warping it up! :: Extending Firefox for Web Developers. – Posted in вне ÑÑбÑик by Alexander Milovanov [...]
May 25th, 2006 at 16:36
I have made a page of recommended extensions, Check it out!
https://michaelgrisowld.wordpress.com/
June 25th, 2006 at 22:49
[...] Check out how Web Developers can extend Firefox [...]
October 25th, 2006 at 10:24
[...] Extending Firefox for Web Developers [...]
November 15th, 2006 at 07:22
[...] This site 精彩推è [...]
August 31st, 2008 at 07:30
[...] Alring posted a nice roundup of the top Web development extensions for Firefox. Lots of cool extensions that I didn’t even know about, but am very glad to have [...]
May 7th, 2009 at 15:33
wow, great list, I’ve bookmarked it
Only one question: Why Firebug is not included in the list?
May 7th, 2009 at 16:42
Hi Dev-The-Web,
The reason Firebug is not on the list, is because i wrote this post in 2005
I better get on to making a new list soon!
August 3rd, 2009 at 23:40
[...] Warping it up! has an article that covers various extensions for the Mozilla Firefox browser that web developers should find interesting. Category Development | Tags Webdev | Comments (0) [...]