5 Firefox Addons for the Average Web Developer

You won’t find any super-advanced addons for “extracting strings from xml and javascript files to simplify mozilla application localization process” or “debug running applets and Java Webstart application” in this list. These addons are intended for “the rest of us” – people who grudgingly have to edit our own web sites.

  1. MeasureIt
  2. MeasureIt allows you to quickly bring up an on-screen “ruler” to measure sections of your site. Quickly determine the space between certain sections, indents etc.

      Quick Usage Instructions

    1. Click the MeasureIt button in the bottom right corner of Firefox
    2. MeasureIt Button

    3. Click and drag the area you want to measure.
    4. measureit firefox addon

  3. lori
  4. lori stands for “Life-of-request info”. What it does is tell you valuable info on how long it takes for your page to display, how large it is, and how many requests were made to load the page.

    The first number displayed is the time it took to see the first byte returned from the server (from your click to the first byte received by your browser). It’s displayed in seconds (up to the thousandth of a second).

    The second number is how long it took to display the page (from your click to the complete rendering of the page). Again, the time is displayed in seconds, up to the thousandth of a second.

    The third number displayed is the total page size (number of bytes/kilobytes/megabytes used to display the page). This value includes both bytes fetched from the server and bytes fetched from the browsers cache.

    The forth and final number is the total number of “requests” used to fetch the page content (images, style-sheet, javascript etc). Again, this value includes both data downloaded from the server and cache requests.

    lori firefox addon

  5. Source Viewer Tab
  6. Source Viewer Tab is a simple but extremely helpful addon. When you select View Source (or View Selected Source it opens the source view in a new tab, instead of a new Firefox window. If that weren’t enough, it also allows you to specify a totally different application to view your source with (Notepad, TextEdit – whatever your HTML editor of choice is).

    source viewer tab settings
    Source Viewer Tab settings

    firefox displaying page source in a tab
    Source Viewer Tab displaying HTML source in a tab

  7. IE View Lite
  8. IE View Lite is fairly self explanatory. It allows you to view a page in IE. It has a couple of added benefits vs. similar addons. 1) It’s smaller and 2) It allows you specify Safari instead of IE if you’re using OS X.

    Right-click a blank spot on any web page and select View This Page in IE to do just that.

    source viewer tab settings

    To use Safari instead of IE (OS X only), change the Internet Explorer Location to /usr/bin/open and add -a Safari to the Parameters field.

    IE View Lite settings
    IE View Lite set to use Safari

  9. Firebug
  10. Firebug is without question the most advanced addon in this list. Though it’s capable of doing a lot of “expert level” things, it’s also very handy for figuring out basic stuff. I’ve been using it a lot lately (new theme on Simple Help) to determine which part of the .css file is causing things to render the way they do. Webmonkey has a good tutorial on getting started with Firebug if the interface seems a bit daunting. For what it’s worth, Firebug has saved me hours of frustration over the last week alone.

    Firebug in action
    click to enlarge

{ 5 comments… add one }
  • Sumesh August 18, 2008, 6:13 am

    I can’t believe you missed Web Developer toolbar !
    But otherwise a good list, stumbled.

  • Keith Dsouza August 18, 2008, 8:09 am

    Yea I would add Web Developer toolbar, XPather and TamperData to the list, they are really life savers.

  • Ky August 20, 2008, 5:47 am

    What about Web Developer toolbar? And Codetch?

  • Sam March 21, 2009, 2:39 am

    T’as touché l’encodage pour avoir tous ça?

  • Sam March 21, 2009, 2:42 am

    C’est déconseillé d’employer 2 langues sur un site. Ça explique ce bordel.

Leave a Comment