Firefox Add-on logo

If you are a web developer, Firefox and its many extensions can be your best friend. I thought I would provide a list of extensions that are very useful. Of course these are all free Firefox extensions. Most will work on all the same platforms Firefox does, except were noted. These extensions are definately worth your time investagating, some of them I consider “must-haves” for web developers. The ones in bold are my favorites.

  • Web developer extension – adds a menu and a toolbar to the browser with various web developer tools that can be toggled on and off under the View -> Toolbars -> Web Developer Toolbar. It is designed for Firefox, Flock, Mozilla and Seamonkey, and will run on any platform that these browsers support including Windows, Mac OS X and Linux. This toolbar is full of useful web testing tools like outlining page elements, displaying the size of images, displaying CSS, Form information, and can disable certain elements on a page.
  • Aardvark Extension – As you glide the mouse over the page, you will see a red rectangle framing each element under the cursor. You will also see a little yellow caption showing the HTML element type and its class or id if they exist. Clean up unwanted banners and surrounding “fluff,” especially prior to printing a page. See how the page is created, block by block. View the source code of one or more elements.
  • Copy Link Name - Copies the name (source anchor) of a link. Just a small extension that adds a context menu item to copy a link’s source anchor.
  • JSView - allows for the ability to view the source code of external files. Most websites store their javascripts and style sheets in external files and then link to them within a web page’s source code.
  • ASCIItoUTF-8 - converts selected ASCII text to UTF-8 with right-click.
  • Window Resizer is useful for testing different screen sizes. It accurately resizes your browser so you can test to see what a web page looks like in all of the standard resolution sizes.
  • Server Spy - indicates what type of HTTP server (eg. Apache, IIS, etc.) runs on the visited site.
  • Total Validator - mulitple validations and take screen shots in one go rather than using separate tools. This 5-in-1 validator uses the online Total Validator service and so DOES NOT validate local files.
  • Adsense Preview - preview the Google ads that may show on any web page.
  • Google Toolbar for Firefox - it has a nice spell checker as well as some other tools.
  • Greasemonkey - Allows you to customize the way a webpage displays using small bits of JavaScript.
  • Colorzilla – provides an eyedropper tool for color selection and testing. Just hover you mouse over an element and it shows color info, DOM path info, and the X, Y offset from the previous click.
  • Fangs Screen Reader Emulator – creates a textual representation similar to how the page would be read by a modern screen reader.
  • Link Checker – checks webpage links with color coding. Great way to check for broken links.
  • Leak Monitor, an essential tool for Ajax developers. Detects when JavaScript objects in the chrome or Web page are still held by native code after the window is closed.
  • Measure It – easily measure screen height and width by drawing a ruler across a web page. Also alignment any page element. No more having to open the images in an app to see pixel sizes.
  • Screen Grab – Screen Grab saves webpages as images by scrolling around and stitching the result together.
  • Firefox Extension for SnagIt is a convenient toolbar that you can add to your Firefox browser for easy access to the most popular screen capture and sharing options for Web page content. Whether you want to capture a scrolling Web page, need specific text or image or a specific part of a Web page, this toolbar gives you one-click access to all of your favorite features right in Firefox.
  • IETab, Windows only - right click any tab and select switch rendering engine to see what that page will look like in Internet Explorer.
  • IE View – allows the current page or a selected link to be opened in Internet Explorer.
  • Fire FTP – free FTP client for Mozilla Firefox which provides both FTP and SFTP access to servers.
  • Firebug - great tool for diving into the DOM and XMLHttpRequest object.
  • View Rendered Source - adds an entry to the context menu which allows you to view the source of the page, just like Firefox sees it. JavaScript generated tags and attributes will show up. The source code is showed in colored blocks, for easy reading.
  • ImageZoom - zoom individual images on a page.
  • Scribe - allows you to fill out a form once and then save the info to reuse.
  • Lorem Ipsum extension - to quickly generate some dummy text to fill out those forms.
  • Dom Inspector - inspect and edit the live DOM of any web document or XUL application.
  • View cookies - So which websites use cookies and what is stored in those cookies? With the Firefox View Cookies extension, you can find that out easily. You can also remove the cookies.
  • Add & Edit cookies - edits and adds cookies not just displays them. it also has a handy filter feature, you can filter for a specific host in the cookies list and the search result will be saved even if you close the browser.
  • Page Saver - capture images of web pages in PNG format.
  • MODI is Mouse Over DOM Inspector, and lets you easily click around in your DOM, outlining elements, and showing all their critical information.
  • del.icio.us extension - llows you to easily add sites you like to your personal collection of links, to categorize those sites with keywords, and to share your collection not only between your own browsers and machines, but also with others.
  • CSS Viewer Extension - A simple CSS property viewer.
  • X-Ray - see how the document was constructed without having to go back and forth between the sourcecode and the page in your browser by right-clicking on the page or using the Tools menu.
  • Live HTTP Headers - inspects GET and POST variables, among other things for security Lets you know if a script be able to edit someone else’s post if he intercepts and modifies the variable?
  • HTML Validator – adds validation inside the Page Source Viewer in Firefox.

Email Post Email Post  Print Post Print Post | Tags: , , , , ,