Via Marconi 20, Bussolengo (VR)

Top 10 Firefox addons for web developers

As web developer I always thought at Firefox as my preferred browser mainly for its many extensions. There are indeed thousands of addons to customize your browser making him do anything.
But as I said, I am a developer and thus the addons I prefer are those that support me in my daily work, making it easier and more enjoyable.

Here is a list of plugins I use most.

  1. Web DeveloperWeb Devloper can analyze every aspect of a web page, CSS styles, images, cookies and so on. With this extension you can disable every single piece of the page to see how it appears within a browser with javascript or css disabled. It also allows to resize the browser window to a specific resolution to see how the page would be seen by users of devices with the chosen resolution.
  2. FirebugFirebug is probably the most useful plugin for any web developer.
    It integrates in Firefox adding functionality for web pages analysis.
    Specifically Firebug permits to select an element of the page and analyze the CSS, the HTML source and the JavaScript functions also applying the changes in real-time.
    Personally I find it very useful for debugging or testing changes to the pages I’m building; so i can change the source code only when I found a solution that satisfies me.
  3. FireShotFireShot is a handy utility to create screenshots of a web page. But its strength is not only generate screenshots but it also allow you to edit images and add annotations.
    I find it very useful for generate screenshots with description, such as when preparing submission of a site or of a web application.
    Moreover, FireShot allows you to capture an entire webpage into one image, capturing even the parts outside of the screen that are visible only if you scroll the page.
  4. ColorZillaColorZilla is a handy extension that allows you to determine the color used in a specific portion of a web page.
    This add-on offers a classic dropper as you can find in every graphics program, directly within Firefox.
    With the dropper, you can click on a page and get the RGB and hexadecimal color code selected.
  5. AardvarkAardvark is an add-on that allows you to edit a page in real-time.
    It provides a red box as mouse pointer to select a page element, and then perform various operations on it such as delete it, isolate it, view the source code, change the color or even generate a javascript that will recreate the selected item.
  6. Measure ItMeasure It is a simple extension that draws a ruler with which you can get the measurement in pixels of each element of a web page.
    Do one thing, but does it well and is very useful when you need to know the size of the elements on a page without having to look in the code or CSS.
  7. YSlowYSlow is a Firefox add-on integrated with the Firebug web development tool that analyzes web pages and suggests ways to improve their performance.
    It offers suggestions for improving the page’s performance, summarizes the page’s components, displays statistics about the page, and provides tools for performance analysis.
    It’s a tool I often use to help reduce the weight and speed of loading pages I build.
  8. Font FinderFontFinder allows a user to analyze the font information of any element on a page, copy any piece of that information to the clipboard, and perform inline replacements to test new layouts.
    FontFinder has 4 key pieces of functionality
    • Any font on a page can be completely analyzed
    • Any piece of an element’s information can be copied to the clipboard
    • Font-families can be disabled from the entire page, to test degradation for cross-OS support
    • Any active element can have any piece of the font’s options (such as color, size or family) adjusted inline
  9. Palette GrabberPalette Grabber is a convenient extension to extrapolate from a web page the whole range of colors that compose it.
    In particular, this add-on allows you to extract a color palette in various formats for use with Photoshop, Paint Shop Pro, GIMP, Flash, Fireworks, Paint.NET and others, or simply create a text file with all the hexadecimal encoding.
  10. SenSEOSenSEO analyzes web pages and tells you how good they fulfill on-page Search Engine Optimization criteria. SenSEO is a Firefox add-on integrated with the popular Firebug web development tool. The code is based on the YSlow extension.

Be a part of these designer communities and learn how you can cut your expenses in website designing.