We all know that Firefox has tons of plug-ins and add-on’s, but there are a few any web developer must know and use. The description and screenshots are taken from the Firefox add-ons site.

  1. CSSMate: Inline CSS Editing Evolved. Originally a port of the fantastic EditCSS tool that I’ve been using for many months. I’ve gutted it, made each stylesheet load into a separate tab. Removed the save load clear functionality as i found it to be useless and added in support for loading stylesheets that have a media type of “all” instead of “screen”.
    CSSMate FireFox Add-on

  2. FireShot: FireShot is a Firefox extension that creates screenshots of web pages.
    Unlike other extensions, this plugin provides a set of editing and annotation tools, which let users quickly modify captures and insert text and graphical annotations. Such functionality will be especially useful for web designers, testers and content reviewers.
    It’s possible to choose whether entire web page or only visible part of this page should be captured.
    Screenshots can be uploaded to server, saved to disk (PNG, JPEG, BMP), copied to clipboard, e-mailed and sent to external editor for further processing.
    FireShot FireFox add-in

  3. Web Developer: Maybe the most succesfull of all, has great reviews. Adds a menu and a toolbar with various web developer tools.
    Web Developer Firefox Add-in

  4. SeoQuake: Seoquake is a Mozilla Firefox extension aimed primarily at helping web masters who deal with search engine optimization and internet promotion of web sites. Seoquake allows to obtain and investigate many important SEO parameters of the internet project under study on the fly, save them for future work, compare them with the results, obtained for other, competitive, projects.
    SeoQuake Firefox Add-in

  5. ViewSourceWith: The main goal consists to view page source with external applications but you can also…
    – open page source as DOM document, read faq
    – open CSS and JS files present on page
    – open images using your preferred image viewer (e.g. GIMP or ACDSee)
    – open PDF links with Acrobat Reader or Foxit Reader or what you prefer
    – edit textboxes content with your preferred editor and automatically see modified text on browser when you re-switch focus on it, this simplifies wiki pages editing, read faq
    – open server side pages that generate the browser content, this simplifies web developer’s debug, read server-faq
    – open files listed in Javascript console. When editor open file the cursor can be moved to line number shown on javascript console, read js faq
    For desperate cases you can add Microsoft IE to editor list.ViewSourceWith Firefox Add-in

Enjoy your development!


Tags :

66 Responses to “5 Firefox Extensions Any Web Developer Must Have”

  1. ATSkyWalker

    Said on March 31, 2008 :

    ummmm. no FireBug?

  2. Betty

    Said on March 31, 2008 :

    I’m confused, how is firebug not on that list.

  3. Saroj

    Said on March 31, 2008 :

    You have not mentioned Firebug. It is a complete editor I can Say. Online editing style changes are few of the things from its vast majority of features.

  4. Jacob von Eyben

    Said on March 31, 2008 :

    You should add Firebug
    (http://www.getfirebug.com/) to your list.

    Contains a bunch of tools: javascript debugger, dom inspector, some css tools, network monitor.

    What I find most useful is the network monitor. It is especially useful when developing solutions that uses AJAX.

  5. Andreas

    Said on March 31, 2008 :

    Are you kidding me? Where is Firebug?

  6. John

    Said on March 31, 2008 :

    Ok so here’s my list
    1: Firebug Console Tab
    2: Firebug HTML and CSS Tabs
    3: Firebug Script Tab
    4: Firebug DOM Tab
    5: Firebug Net Tab

  7. Bhaarat

    Said on March 31, 2008 :

    screw css mate. Firebug FTW!

  8. t

    Said on March 31, 2008 :

    Firebug should be included default install and evryone knows about it .. so hence the list above

  9. Stuart

    Said on March 31, 2008 :

    no firebug, are you nuts?

  10. Wes P

    Said on March 31, 2008 :

    Not to beat a potentially dead horse with this one… but, ah, Firebug’s a good one too.

    Fireshot looks like it might be interesting though. I’ll have to check that one out.

  11. alfred

    Said on March 31, 2008 :

    Hehe I have to agree with the rest. Any web developer should have firebug. But I think I saw some extension which I will have a look at. TY.

  12. Bernard

    Said on March 31, 2008 :

    Firebug & Firecookie!

  13. Jeffrey

    Said on March 31, 2008 :

    Firebug is def a must have for webdevelopers. Dom inspect, HTML/CSS editing, Layout inspect, JavaScript console and ‘debugger’ and best of all great AJAX support!

    My tools:
    * Firebug
    * Web Developer
    * FireShot

  14. badger

    Said on March 31, 2008 :


  15. Amir

    Said on March 31, 2008 :

    Man I love right-clicking on a dropdown and selecting “Inspect Element”

    “Inspect Element” rocks. Takes you directly to the point in the source of the element under the cursor (generated source i.e. after javascript modifications), with detailed, editable css information on the right.

    Oh yeah, it’s part of FireBug

    Also, TamperData is a nice extension for analysing/meddling-with http traffic. It gives a touch more info than firebug for this kind of thing.

    Thanks for the FireShot tip, I’ll give it a shot

  16. James

    Said on March 31, 2008 :

    Also for who can have access to the AMO sandbox, there is a tool to improve the security: Form free https://addons.mozilla.org/en-US/firefox/addon/6727

    Form free is a component to transform checkboxes, radio buttons, select elements to a input text and enable disabled elements from all forms in a page.
    It makes easier to test and identify SQL injection vulnerabilities in web pages.

  17. karim

    Said on March 31, 2008 :

    SeoQuake? Why? What has SEO to do with web developpement?

  18. Stijn

    Said on March 31, 2008 :

    I’m with stupid. Firebug is a definate must have.

  19. Peter T - webshop

    Said on April 1, 2008 :

    I didn’t know about Fireshot, works well, thanks.

  20. Bryan Glass

    Said on April 1, 2008 :

    After all these comments, I hope Amit has now been introduced to the wonderful world of Firebug. I just discovered it last June, and I have no idea how I ever worked without it! (I’m always hackin’ away on the console tab).

  21. anoy

    Said on April 1, 2008 :


    Only tool that is realy required for web development on Firefox.

  22. Sean

    Said on April 1, 2008 :

    As most web developers know, Firebug is the king, and Web Developer the queen of Firefox extensions.

    And as umm… every single commenter has pointed out, your omission of Firebug is glaring. It puts into question your experience in the field.

  23. db

    Said on April 1, 2008 :

    I guess this must be part two, and we simply missed part one: “Firebug, the one extension every web developer must have.”

  24. Pfft

    Said on April 1, 2008 :

    How on earth can you not have Firebug on that list?

  25. Amit

    Said on April 1, 2008 :

    Thank everyone for commenting.

    Off course FireBug in #1, maybe I should have added to the title “Besides FireBug” :). I just wanted to show a few other plug-ins that many people don’t know. Look forward to my part 2 article, which also won’t include FireBug :).


  26. Jay

    Said on April 1, 2008 :

    Umm what happened to Firebug? This is like having a list of top 5 search engines without mentioning Google.

  27. Geshan

    Said on April 1, 2008 :

    Yes firebug is almost all that you need, other extensions come later in the list.

  28. Kayzah

    Said on April 1, 2008 :


  29. kenman

    Said on April 1, 2008 :


    For security testing, you can do all that Form Free can do with either Firebug or the Web Developer toolbar. In Firebug, you can use the console + Javascript to set form values programmatically, or you can browse the form DOM object and edit the values there. In the WebDev toolbar, you there’s several different methods to mess with form fields under the “Forms” button.

    Lastly, if security is what you’re testing, then HackBar was made especially for you: https://addons.mozilla.org/en-US/firefox/addon/3899

  30. Foodazukus

    Said on April 1, 2008 :

    WHY NO FIREBUG?!?!?!?!?!?!?

  31. Leo

    Said on April 1, 2008 :

    I am surprised that the author of this list never used FireBug while developing web applications … FireBug is very popular extension for more than 2 yrs now, and all the other extensions on the list can be uninstalled when you install FireBug.

  32. Amr Elsehemy

    Said on April 1, 2008 :

    Nice set of extension I already use 4 of them, but man FireBug is a #1

    Keep on it

  33. Julian

    Said on April 1, 2008 :

    CSS mate? WTF?
    That feature is included in web developer toolbar, which you also mention.

  34. Stijn

    Said on April 1, 2008 :

    Amit sure seems to have found a way to spark a conversation. (:

  35. algorithmic

    Said on April 1, 2008 :

    Live HTTP Headers is another must have: https://addons.mozilla.org/en-US/firefox/addon/3829

  36. podi

    Said on April 1, 2008 :

    you are writing about firefox plugins, but why can read your blog only in IE ? Got confused when viewing it the first time with firefox and I saw only comments, no content, wtf ? I switched off adblock on your website but with no results

  37. Erik

    Said on April 1, 2008 :

    Has anyone mentioned Firebug yet?

  38. shahary

    Said on April 1, 2008 :


    We had 5-10 minutes where Dev102 style sheet was ruined. It is OK now, thanks for pointing about the problem.

  39. webboy

    Said on April 1, 2008 :


  40. ted case

    Said on April 1, 2008 :

    Why not firebug?

  41. neO

    Said on April 1, 2008 :

    Great ! or not

  42. al

    Said on April 1, 2008 :

    Firebug is so last millennium.

  43. Kevin

    Said on April 2, 2008 :

    This list is moot — no Firebug!

  44. andress

    Said on April 8, 2008 :


    With Firebug i am able to see/inspect the page source of windows opened by javascript such case when menus are disabled..

    Firebug is a must have!!!!

  45. Gabriel

    Said on April 8, 2008 :

    What about Firebug?
    What about YSlow?

  46. Ray

    Said on April 9, 2008 :

    I had to add my voice too.. – insert Firebug.

  47. Omar

    Said on April 9, 2008 :

    Firebug must not be in the list, because it’s a MUST HAVE if you pretend to do some web development. You have to put at the beginning of your blog and after all start with your list.
    Note. Negative vote in dzone.

  48. Billy

    Said on April 15, 2008 :

    I think someone missed firebug. Thats like zelda without a triforce. Come one. I can’t wait for another article without firebug.

  49. multimedia services

    Said on May 14, 2008 :

    i used firefox just 6 months from now. im not that oriented int o this software. but, thanks anyway for the information. i really a great help for me. have a good day!

  50. IntoXicator

    Said on September 13, 2008 :

    great! Keep up the good work!

  51. Pattaya PG

    Said on October 16, 2008 :

    Thanks for Firefox add-on guide, Your guide can me my website grow up


  52. David

    Said on January 16, 2009 :

    Hey mate, I know you’re likely very busy so I won’t take much of your time.
    I just had to tell you about a brand new, free keyword research tool that Brad Callen just released. It allows you to browse Google and view the Adwords keywords of ANY Adwords advertiser! Basically, it’s a small file that gets installed into your web browser (i.e. Firefox). When you do a Google search, the software automatically places a “view keywords” button below every single Adwords advertiser. Click the “view keywords” button and really neat popup window appears that not only shows you the keywords that any Adwords advertiser is bidding on, but it also shows you a TON of other information, like how much they’re paying per click and so on. It’s awesome.
    Anyway, here is the link where you can download the software, and it doesn’t cost anything. => http://www.ppcwebspy.com/downloads/?xc2321

  53. LionLand

    Said on July 1, 2009 :

    Firebug is more than enough for a web developer with some brain! :)

  54. Kris van der Mast

    Said on October 7, 2009 :

    Some others I like to use:

    Page Speed

    Grz, Kris.

  55. dalton

    Said on November 5, 2009 :


  56. Jackson

    Said on August 18, 2010 :

    Since I loved the web developer plugin, I wrote a small review about this best Firefox add-on Web Developer Toolbar



10 Trackback(s)

  1. Apr 1, 2008: Skylog » Blog Archive » links for 2008-04-01
  2. Apr 1, 2008: Dew Drop - April 1, 2008 | Alvin Ashcraft's Morning Dew
  3. Apr 1, 2008: links for 2008-04-01 « ??????
  4. Apr 2, 2008: Interesting Finds: 2008.04.01 - gOODiDEA.NET
  5. Apr 2, 2008: rascunho » Blog Archive » links for 2008-04-02
  6. Apr 4, 2008: FireFox addon’s | EvilFaeton Blog
  7. May 2, 2008: BLOG STATS FOR APRIL 2008 | Dev102.com
  8. May 11, 2008: Everyman Links for May 9, 2008 - Dave Burke
  10. Feb 23, 2009: Firefox 3 | handshake.co.za

Post a Comment