Home » Web Development » 22 Firefox Extensions (Addons) for Web Development

October 26, 2009

TEXT SIZE minus plus
22 Firefox Extensions (Addons) for Web Development

22 Firefox Extensions (Addons) for Web Development

by Dicky Lim Comments
Advertisement
You Might Be Interested In Our Popular Article
  • Most Essential Free Softwares After Windows Installation

    • For designers & web developers, using Firefox, because it is a great browser, is probably not the main reason for its use. The biggest benefit are the addons made available by the community which enhance / extend the browsers Performance and capabilities. For web developers the amount of time saved and information gathered by these Plugins makes Firefox the programmers best friend. Below we present some of our favorite Firefox Addons for making your life a lot easier.

    Web Developer Toolbar

    web-developer-toolbar

    The Web Developer extension adds a menu and a toolbar with various web developer tools.
    Homepage: http://chrispederick.com/work/web-developer/

    Download: https://addons.mozilla.org/en-US/firefox/addon/60


    Firebug

    firebug

    Firebug integrates with Firefox to put a wealth of development tools at your fingertips while you browse. You can edit, debug, and monitor CSS, HTML, and JavaScript live in any web page…
    Homepage: http://getfirebug.com/

    Download: https://addons.mozilla.org/en-US/firefox/addon/1843


    Page Speed

    pagespeed

    Page Speed is an open-source Firefox/Firebug Add-on. Webmasters and web developers can use Page Speed to evaluate the performance of their web pages and to get suggestions on how to improve them.
    Homepage: http://code.google.com/speed/page-speed/index.html

    Download: http://code.google.com/speed/page-speed/download.html


    FirePHP

    firephp

    FirePHP enables you to log to your Firebug Console using a simple PHP method call. You must have Firebug installed and the “Net” panel enabled to use this extension. You must also download a PHP library from http://www.firephp.org/HQ/
    Homepage: http://www.firephp.org/

    Download: https://addons.mozilla.org/en-US/firefox/addon/6149


    YSlow

    yslow

    YSlow analyzes web pages and why they’re slow based on Yahoo!’s rules for high performance web sites.
    Homepage: http://developer.yahoo.com/yslow/

    Download: https://addons.mozilla.org/en-US/firefox/addon/5369


    Pixel Perfect

    pixel-perfect

    Pixel Perfect is a Firefox/Firebug extension that allows web developers and designers to easily overlay a web composition over top of the developed HTML.
    Homepage: http://www.openhouseconcept.com/

    Download: https://addons.mozilla.org/en-US/firefox/addon/7943


    Aardvark

    aardvark

    Powerful and user-friendly selector utility for selecting elements and doing various actions on them. It can be used for cleaning up a page prior to printing it (by removing and isolating elements), and for web development
    Homepage: http://karmatics.com/aardvark/

    Download: https://addons.mozilla.org/en-US/firefox/addon/4111


    Total Validator

    total-validator

    Perform multiple validations and take screen shots in one go. This 5-in-1 validator works with external, internal, or local web pages using the Total Validator service or local copy of the desktop tool…
    Homepage: http://www.totalvalidator.com/tool/extension.html

    Download: https://addons.mozilla.org/en-US/firefox/addon/2318


    IE NetRenderer

    ie-netrenderer

    Adds buttons, tools menu and contextual menu entries to get a screenshot of the current page with IE NetRenderer. Keyboard shortcuts are also available: Ctrl+Shift+F5/F6/F7/F8 to render the page in IE5.5/6/7/8 Beta 2 (Cmd+Shift+F* on Mac). Really useful for webmasters which are not using Windows!
    Homepage: http://nicopensource.free.fr/pages/ienetrenderer-en.php

    Download: https://addons.mozilla.org/en-US/firefox/addon/6455


    Colorzilla

    colorzilla

    With ColorZilla you can get a color reading from any point in your browser, quickly adjust this color and paste it into another program. You can Zoom the page you are viewing and measure distances between any two points on the page.
    Homepage: http://www.colorzilla.com/

    Download: https://addons.mozilla.org/en-US/firefox/addon/271


    Screengrab

    screengrab

    It will capture what you can see in the window, the entire page, just a selection, a particular frame… basically it saves webpages as images – either to a file, or to the clipboard.
    Homepage: http://www.screengrab.org

    Download: https://addons.mozilla.org/en-US/firefox/addon/1146


    FireFTP

    fireftp

    FireFTP is a free, secure, cross-platform FTP client for Mozilla Firefox which provides easy and intuitive access to FTP servers.
    Homepage: http://fireftp.mozdev.org

    Download: https://addons.mozilla.org/en-US/firefox/addon/684


    Codetech

    codetech

    Get the feel of Dreamweaver in a Firefox extension. Edit your documents right next to your web pages as you surf.
    Homepage: http://codetch.org/

    Download: https://addons.mozilla.org/firefox/1002/


    Tab Mix Plus

    tab-mix-plus

    Tab Mix Plus enhances Firefox’s tab browsing capabilities. It includes such features as duplicating tabs, controlling tab focus, tab clicking options, undo closed tabs and windows, plus much more. It also includes a full-featured session manager.
    Homepage: http://tmp.garyr.net

    Download: https://addons.mozilla.org/en-US/firefox/addon/1122


    Greasemonkey

    greasemonkey

    Allows you to customize the way a webpage displays using small bits of JavaScript. …
    Homepage: http://www.greasespot.net/

    Download: https://addons.mozilla.org/en-US/firefox/addon/748


    InspectorWidget

    inspectorwidget

    Adds toolbar button and context menus for invoking the DOM Inspector (DOMi) for either chrome or content elements.
    Homepage: http://www.projectit.com/

    Download: https://addons.mozilla.org/en-US/firefox/addon/63


    GridFox

    grid

    Draws a grid on top of a website. This is useful for checking designs that are supposed to follow a grid-based layout. Right click anywhere on a website, and go to GridFox > Options. Input the settings for your grid and click OK.
    Homepage: http://www.puidokas.com/portfolio/gridfox/

    Download: https://addons.mozilla.org/en-US/firefox/addon/4904


    Font Finder

    font-finder

    Get all CSS styles of selected text in Firefox / Thunderbird… Simply highlight a single element (e.g. a paragraph or a strong tag ), right-click and select `Font Finder`, then marvel as the full CSS text styling of the selected element appears.
    Homepage: http://bendodson.com/projects/

    Download: https://addons.mozilla.org/en-US/firefox/addon/4415


    JavaScript Debugger

    javaScript-debugger

    Venkman is the code name for Mozilla’s JavaScript Debugger. Venkman aims to provide a powerful JavaScript debugging environment for Mozilla based browsers.
    Homepage: http://www.hacksrus.com/~ginda/venkman/

    Download: https://addons.mozilla.org/en-US/firefox/addon/216


    Live HTTP Headers

    livehttpheaders

    View HTTP headers of a page and while browsing.
    Homepage: http://livehttpheaders.mozdev.org/

    Download: https://addons.mozilla.org/en-US/firefox/addon/3829


    Yellowpipe Lynx Viewer Tool

    lynx

    RightLynx displays a Lynx view of a web page via right-click or Tool menu. With just one click and without leaving the page (RightLynx opens in a new, small window), preview the page you are on with a Lynx Viewer.
    Homepage: http://www.yellowpipe.com/yis/tools/lynx/rightlynx/

    Download: https://addons.mozilla.org/en-US/firefox/addon/1944


    Xmarks Bookmark Synchronizer (formerly Foxmarks)

    foxmarks

    Xmarks is the #1 bookmarking add-on. Install it on all your computers to keep your bookmarks and (optionally) passwords backed up and synchronized. Xmarks also helps you uncover the best of the web based on what millions of people are bookmarking.
    Homepage: http://www.xmarks.com/

    Download: https://addons.mozilla.org/en-US/firefox/addon/2410
    cover-action-pro
    at 1:59 am
    Print

    About the Author

    Dicky is a web designer and developer from Malaysia. He manages Web Design Booth as to help web designers in providing and sharing great resources and tutorials.
    • ST
      What about No-Script??
      ...and FireFTP works so bad...
    • Buddy just telling, that No-Script function is already available inside Web Developer Toolbar. Thanks.
    • this is the most valuable information for my blog /website design, thanks for sharing this important information...
    • ZeB
      The author doesn't miss anything, a similar tool is included in WebDevelopper...
    • Thanks for your reply, this is what I was to tell him also.
    • Really useful one but have a problem after installing these FF crashes frequently hope the Guys at Mozilla fix it soon i.e next update of FF .
    • flep
    • WoW :) Awesome collections firefox Web development extensions . Thansks for sharing this nice post.
    • sallywell
      very useful, thank you!
    • Fantastic. Even though I have most of these already, but I never thought there would be a built-in screenshot plugin, as well as the grid and pixel perfect overlays. Thank You for sharing!
    • luv it
    • This article has been shared on favSHARE.net. Go and vote it!
    • artkas
      WOW!....best post ever. So helpful. Thanks a lot.
    • danger
      nice post. thanks
    • Awesome collection of web developer addons :) . Thanks for sharing this nice post.
    • Thanks all for your precious replies, appreciate it. We will try and cover more posts from Dickey in future. Thanks

    • nice list!

      actually, i also wanted to contribute these 37 Top Firefox Add-ons For Web Development to your list



      37 Top Firefox Add-ons For Web Development

    blog comments powered by Disqus