50+ Useful Firefox Plugins For Web Designers, Developers

April 18, 2010

  • Firefox is used by majority of Internet users ,and same is the case with web developers and web designers.

    Here is the data on the percent of different browser users and their percent in the internet market as of this post (proving how useful Firefox is)

    browser stats

    One of the best parts about Firefox is that it has active plugins and  development community ,that caters almost every section of the internet user(be it web developers ,designers ,bloggers and so on ..)

    Here is a list of 50 or so, of the Firefox plugins that I have found to enhance my productivity as a web developer and designer.

    1. Firebug (Recommended for web designers and web developers)

    firebug

    Firebug is one of the most famous Firefox extension used by most of the web developers and designers.

    Using firebug you can edit, debug, and monitor CSS, HTML, and JavaScript live in any web page.

    Here are some of the sub add ons for firebug.

    2.   Firefinder

    firefinder
    Firefinder is a sub add-on for Firebug, which helps you to find HTML elements matching chosen CSS selectors or XPath expression.

    3.   Firephp

    firephp
    FirePHP enables you to log to your Firebug Console using a simple  PHP method call. This firebud sub add on is ideal for AJAX developers who need clean JSON or XML responses.

    4.   Codeburner

    code burner
    CodeBurner is a Firefox add-on for firebug , to extend it with reference material for HTML and  CSS.

    The extension’s core functionality is centered around a new Reference panel, which contains a search tool for looking up HTML elements, attributes, and CSS properties.

    5.  Firediff

    firediff
    Keeps records of all the changes that you had made previously to a web page and saves it for your reference.

    6.  Pixel Perfect

    pixel perfect

    Pixel Perfect is a Firebug extension and allows web designers and developers to conveniently place/overlay a web composition over top of an already developed HTML.

    7.  Firecookie

    firecookie

    It is a simple cookie manager for firebug that enables you to manage cookies of a webpage,create new cookies and their permissions etc.

    8. Firepicker

    firepicker
    An  easy to firebug sub add on ,which lets you easily pick colors from the web.
    If you like firebug then this can take the place of colorzilla,although it lacks some of the functionalities of colorzilla.

    9. YSlow

    yslow

    YSlow is a usefull add-on for Firebug useful especially for bigger sites. Used in combination with Googles Page Speed, web designers and developers have two powerful tools for analyzing web page load times and what is causing the slow down of their web pages.

    10. Web Developer

    web developer

    This Firefox add on falls in the same league as the firebug ,and has pretty much same  functionality ,except that all the tabs for launching different web page inspectors are aligned in the form of tabs in your browser.
    we personally feel that firebug is good for new/novice web developers and web designers ,where as web developer is a bit advanced.

    11. Docked JS-Console

    docked js console
    Docks the JS-Console to the Bottom of the Browser.

    12. JavaScript Deobfuscator

    deobfuscator

    This Firefox add-on shows you what JavaScript are running on a web page, even if it is obfuscated and generated on the fly.

    13. Dust-Me Selectors

    After you are done with your web page designing some of the times their are few CSS selectors that you are not using but they are adding to the size of you style sheet.Dust-Me Selector finds out these unused css selectors and helps you decrease the load time of the web page you have designed.

    14. CSS Viewer
    edit css

    It is a simple css property viewer and is useful if you want to look at only the css properties of web pages.
    This functionality is present in both Firebug and Web developer,so its not that useful.

    15. Edit CSS

    edit css1
    Similar to edit css but presents the css editing tab in your browsers sidebar.
    Again not such a useful add on for web developers & Web designers.

    16. CSS Reloader
    Allows you to reload only the CSS sheet(style sheet) without having to reload the whole web page.

    17. PageDiff
    Lets you easily compare the html codes of two different web pages.

    18.  X-Ray (One of the best firefox add ons for web developers and designers.)

    x-ray

    Shows you the web pages with the their html tags right in your browser windows ,without even inspecting any element.

    The image above will make it easier to understand what it exactly does.

    19. Browser View plus(BVP)

    This firefox add on enables you to launch a web page in the browser of your choice(of course you need to have the browser that you want to see your web design needs to be installed in your computer) and hence is one of the best firefox add on for web designers & Web developers.

    After you have located the browsers that you would like to view your web pages in ,all you have to do is either right click on the page and select the browser that you want your web page to see on.

    Another alternative is that you can customize your firefox toolbar and drag the icons of browsers to your toolbar.To see a web page in a different browser ,just click on the icon of the browser once you are in the webpage you want to inspect.

    20. IE Tab
    This is a great tool for web developers, since you can easily see    how your web page displayed in IE with just one click and then    switch back to Firefox.

    Similar to Browser view plus but provides you with the option to view your web page in Internet explore only and you do not need to have IE installed in your computer.

    21. Opera view

    This firefox extension is similar to IE tab and you need to have opera installed in your computer to use it.

    Note:- It is best to use Browser view plus as it gives the option to see your web page designs in all the browsers you want to and is much more flexible in functionality.
    In you case you want to see how your web design looks in IE only then IE tab is best.

    22. Firesizer

    Tired of changing the resolution all the time just to have a look at how your web design looks in different resolutions?

    Windows resizer is the exact solution that you need ,it accurately resizes your browser so you can test to see what a web page looks like in all of the standard resolution sizes. Supports the 640×480, 800×600, 1024×768, 1280×800, 1280×1024, 1600×1200 resolutions

    23. Total Validator (Recommended)
    tv

    It is always a pain when you make a web design for a client and the design that is not W3C valid ,this is a simple solution to the problem as using total validator you can validate any web page you want ,be it an online or an offline(your local installation) page.
    Your web pages are validated by using the Total Validator service.

    24. HTML Validator

    html-validator

    HTML Validator adds HTML validation inside Firefox. The number of errors of a HTML page is seen on the form of an icon in the status bar when browsing.

    The extension can validate the HTML sent by the server or the HTML in the memory (after Ajax execution).

    Download for Windows (From the official Firefox add on repository)
    Download for other operating systems (From the Skynet Website)

    25. Pencil

    color pickr
    Enables you to do GUI prototype and simple sketching right from your browser.

    Pencil is a simple and practical a tool which should be in the arsenal of every web-application designer.

    26. Pixlr Grabber (Recommended)

    This is a light weight and easy to screed capture add on that lets you take screen shots of web pages and edit them ,you can also edit the images without actually saving them to your computer.
    Has a image editor of its own ,which has looks and functionality some what similar to Adobe Photoshop.

    27. Fireshot (Recommended)
    fireshot

    Works just like any of screen capture application but is meant specifically for firefox and you can capture the screen of the web page or any section of a web page that you select.

    This plug-in provides a set of editing and annotation tools, which let users quickly modify web captures and insert text annotations and graphical annotations and is useful for web designers and web developers.

    28. Screen Grab

    Great app for making a print screen. Useful for web designers to capture the screen without pain to crop the image first before use.Just only copy the selection, and you can paste it everywhere you want including Photoshop.

    29. ColorZilla

    Advanced Eyedropper, ColorPicker, Page Zoomer and other colorful goodies.
    If you are using firebug then you can try Firepicker as a replacement for colorzilla.

    30. Rainbow (Recommended for Web Designers and developers)

    rainbow

    A nice add on ,that allows you do all the stuff that you can do with colorzilla and is a good alternative to colorzilla.

    31. MeasureIT

    Nice and easy tool for measuring the dimensions of a part of a web page in pixels.

    32. Colorsuckr

    colorsuckr

    This Add-on allows you to right-click any image on the web and extract the 12 most common colors from it,and then use those colors to make pallets that can be used in Photoshop ,GIMP and other photo editing software’s and hence useful for web designers who are into Photoshop and image editing field.
    Note:- You cannot use this tool in your local host.

    33. Dummy Lip sum

    Lets you easily get the dummy text and content for your testing environment and is thus good for web designers.

    34. Autofill Forms

    Makes filling forms nice and easy .

    You can fill forms (any form) with just a click and your custom keyboard shortcuts.
    Surely is a time saver and thus will improve your productivity as a developer.

    35. Font Finder
    Useful for designers, developers and typographers. It allows a you to analyze the font information of any element on a page, copy any piece(s) of that information to the clipboard, and perform inline replacements to test new layouts.

    You can disable all the font-families in a web page and hence analyze how your web design will look in different OS and conditions when you are using custom font.

    36. Context Font
    This add on is a must for Web designers who like typography.
    Gives you all the information about the font of the text the you select in a web page and also gives the download source for the font if one is specified by a @font-face rule.

    37. It’s All Text

    Allows you to write and edit in the web in text editor of you choice.
    It is really easy to use and will surely make you more creative while you comment on other blogs or make notes at other places in the web.

    38. CacheViewer (Recommended)
    This Firefox add on does what it says.

    It allows you to see and extract the cache saved in the about:cache files of your browser.
    Can be used for all sorts of purposes.

    39. Modify Headers

    Add, modify and filter http request headers. You can modify the user-agent string, add headers to spoof a mobile request (e.g. x-up-calling-line-id) and much more.

    40. HttpFox

    Monitors and analyzes all incoming and outgoing HTTP traffic between the browser and the web servers.Good for web developers to make things streamlined and easy.

    41. Tamper Data

    Use tamperdata to view and modify HTTP/HTTPS headers and post     parameters.

    42. Fire Ftp
    Integrates a nice FTP client right within your firefox browser,
    One of the best firefox add on for web developers and designer.

    43. Greasemonkey (Recommended)

    Allows you to customize the way a webpage displays using small        bits of JavaScript.
    Their are many scripts that you download or develop your own.

    44. View Source Chart (Recommended for Web developers)

    Allows you to  inspect the DOM at lightning speed and is a packed     with real cool visualization of DOM.

    45. DOM Inspector
    DOM Inspector is a tool that can be used to inspect and edit the live DOM of any web document or XUL application.

    A good alternative to View Source Chart

    46. Server Switcher

    Allows you to switch between your development(local host) and live server with just a single click on the icon that is created on the address bar of your browser,so that you can see and analyze the difference between the two.

    47. Aardvark
    Allows you to remove unwanted elements from a web page(good when you want to print a web page),block advertisements(gives you ad free browsing) and packed with many more useful features.

    48. FEBE(Firefox Environment and backup Extension)

    After having talked about all those useful (and may be some useless) add ons ,you do need to have our all the extensions synchronized between different computers and FEBE is does just that .
    It creates a .xml file that you can use to backup your add ons and then use this same .xml file to synchronies the add ons between different computers.

    49. Siphon

    Still in the beta phase but works pretty nicely.It will manage and sync all your Add-ons with your different computers. It will also save your Add-on list if you ever need to reinstall Firefox.

    50. X Marks

    x marks

    At the end of the day you have lots of bookmarks and their is absolute necessity to have a synchronization of these bookmarks between different computers that you use.

    X marks is just the right tool to do it and it also synchronizes your passwords between different computers and operating systems.

    { 0 comments… add one now }

    Leave a Comment

    Previous post:

    Next post: