Warping it up!

Fini Alring’s Glossy Tech Zine

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
Platypus logoAn 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.

52 Responses to “Extending Firefox for Web Developers”

  1. Loonyworld » Fini Alrings word on Firebird extensions Says:

    [...] 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 [...]

  2. JoaCHIP Says:

    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!

  3. Fini Alring Says:

    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

  4. Aardvark Says:

    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.

  5. Bulle Says:

    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/

  6. Saltando.net » Extensiones Firefox para desarrolladores Says:

    [...] 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. [...]

  7. Borja Says:

    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.

  8. Caspar Says:

    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.

  9. Leslie Franke Says:

    [...] Update 2 (09/06/05): Fini Alring has written a short article about the same subject. [...]

  10. yama Says:

    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!

  11. Fini Alring Says:

    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.

  12. Jonah Bishop Says:

    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! :-)

  13. Take My Advice - I’m Not Using It! » Welcome Back! Says:

    [...] Extending Firefox for Web Developers – extensions that web developers should install and use. [...]

  14. downloadblog Says:

    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…

  15. David Hucklesby Says:

    “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.

  16. Fini Alring Says:

    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.

  17. Chad Cloman Says:

    I’ve found DevBoi to be quite useful. It is a sidebar reference tool that includes HTML, CSS, XUL, and DOM.

  18. Digressions :: Extending Firefox for Web Developers :: September :: 2005 Says:

    [...] 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. [...]

  19. Andreas Says:

    These is a nice tool to debug ajax sites

  20. Fini Alring Says:

    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

  21. Mischief to Data » Blog Archive » An excellent collection of Firefox extensions for Web Developers Says:

    [...] An excellent collection of Firefox extensions for Web Developers [...]

  22. Gerald Says:

    Don’t forget about SearchStatus, definately my fav. extension. http://www.quirk.biz/searchstatus

  23. StanShinn.com » Extending Firefox for Web Developers Says:

    [...] Read the list: Extending Firefox for Web Developers [...]

  24. visionmonster Says:

    http://devedge-temp.mozilla.org/toolbox/sidebars/

    looks like mozilla got the netscape sidebars hosted again too

  25. LouCypher Says:

    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.

  26. Joe Anderson Says:

    I’ve just started using Platypus

  27. Small Company CTO » Forefox Extensions Says:

    [...] Read the full post. [...]

  28. MozillaZine 한국어 » 웹 개발자를 위한 모질라 파이어폭스 확장 Says:

    [...] 피니 A. 알링은 그가 쓴 웹 개발자를 위한 파이어폭스 확장에 대한 기사에 대해 ì•Œë ¤ 주었다. 이 글은 웹 개발자 확장(Web Developer Extension), 컬러질라(ColorZilla), ì¿ í‚¤ 보기(View Cookies) 등 여러 개발자를 대상으로 한 확장을 ì†Œê°œí•˜ê³ ìžˆë‹¤. 현재 피니는 일반 사용자를 위한 확장에 대한 내용으로 두 번째 기사를 ì¤€ë¹„í•˜ê³ ìžˆë‹¤. [...]

  29. .complex » Blog Archive » More Firefox Lurve Says:

    [...] 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. [...]

  30. Daniel Says:

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

  31. Fini Alring Says:

    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.

  32. imagesafari clip blog » Blog Archive » Warping it up! :: Extending Firefox for Web Developers Says:

    [...] Warping it up! :: Extending Firefox for Web Developers [...]

  33. TomK Says:

    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/

  34. Digressions » Blog Archive » Extending Firefox for Web Developers Says:

    [...] 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. [...]

  35. lifehack.org » Essential List and Resources on Firefox Extensions Says:

    [...] Extending Firefox for Web Developers – [Bytefarmers.com] [...]

  36. Take My Advice - I’m Not Using It! » Finding the Good Stuff Says:

    [...] Essential List and Resources on Firefox Extensions from Lifehacker Extending Firefox for Web Developers [...]

  37. Fini Alring Says:

    Article discussed at MSDN forum in the Phillipines!

  38. db Says:

    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

  39. Techniqal Support Says:

    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…

  40. Douglas Clifton Says:

    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.

  41. милованов, дискжокей » Warping it up! :: Extending Firefox for Web Developers Says:

    [...] Warping it up! :: Extending Firefox for Web Developers. – Posted in вне рубрик by Alexander Milovanov   [...]

  42. S2 Says:

    I have made a page of recommended extensions, Check it out!

    https://michaelgrisowld.wordpress.com/

  43. FireFox Hacker -- Firefox Hacks, Tweaks, Tutorials and more » Extending Firefox for Web Developers Says:

    [...] Check out how Web Developers can extend Firefox [...]

  44. Goston’s Blog » [FF] 兩篇有關 Firefox 用於 Web é–‹ç™¼çš„æ–‡ç« Says:

    [...] Extending Firefox for Web Developers [...]

  45. Firefox.hk » Blog Archive » Extending Firefox for Web Developers Says:

    [...] This site 精彩推荐 [...]

  46. NCZOnline » Blog Archive » Web Developer Extensions for Firefox…and what’s this? Says:

    [...] 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 [...]

  47. Dev-The-Web Says:

    wow, great list, I’ve bookmarked it :)

    Only one question: Why Firebug is not included in the list?

  48. Fini Alring Says:

    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!

  49. Extending Firefox for Web Developers « craig phares design Says:

    [...] 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) [...]

  50. Milos Mandic Says:

    Perfect – sum up all the tools we need! Thank you for sharing! Best regards from Germany.

  51. Web Developer Says:

    No mention of Firebug? It's saved my life!

  52. Web Design Says:

    Great list, please add FireBug to it. It's an excellent developer tool! I use it every day.

Leave a Reply