Top 10 Web Developer Extensions for Firefox

Firefox is a web developers dream; the browser is easily modified to provide transparency to the rendered DOM, AJAX requests, headers, and running Javascript.

With this in mind, I present yet another Top 10 List of Firefox extensions. These are from the perspective of a Software Engineer working on web applications.

Number 1 - Firebug

Firebug in use

The most versatile of the extensions listed here, I use firebug for monitoring network requests (AJAX and others), inspecting and editing the HTML DOM structure, and logging javascript messages.

Everything you edit, CSS, HTML, or Javascript is updated in realtime on the page. Stop waiting and refreshing when you can be working with instant feedback.

The only thing I find lacking is the javascript debugger support. It has historically been buggy and not very usable. A more powerful Javascript solution is included next in the list.

Number 2 - Venkman

Venkman javascript debugger

A Javascript debugging IDE practically, this extension is both a debugger and a profiler. The debugging can be triggered by either tracing exceptions that occur automatically during runtime, or by setting breakpoints.

The “Local Variable” watch comes in extremely handy when trying to understand tasks such as parsing.

Just be aware that:

You cannot open the JavaScript Debugger a second time after closing it - this is not our bug! It is a bug with Firefox 1.5 and 2.0. If we find a way around it, we will of course include it, but until then you must restart Firefox to reopen the debugger.

Number 3 - Tamper Data

Tamper Data

With an ability to edit GET and POST variables before they make their way to the server, we can interject any type of data we desire. This is helpful for testing SQL injection attacks, posting different items without navigating through a complex site structure (if you’re unlucky enough to work on one), and quick verification of what’s really being sent to your server.

Number 4 - Selenium IDE

Repetition is vexing; it’s so terribly troublesome. When you want to repeat the same task over and over again look at selenium. It’s much more than your average mouse moving macro.

Selenium taps into the chrome system in firefox to control your browser no matter what you’re doing. Looking to complete a registration on website and test the final step yourself? Step through the whole process once with selenium recording and you’ll have yourself a set of actions you can replay at a rapid speed.

  • Browser compatibility testing.
    Test your application to see if it works correctly on different
    browsers and operating systems. The same script can run on any Selenium
    platform.
  • System functional testing.
    Create regression tests to verify application functionality and user
    acceptance.

See it in action.

Number 5 - Aadrvark

Aardvark

This extension has functionality overlap with others such as firebug. What is doesn’t do that others do well is allow you to straight up remove elements from the DOM. WIth this extension running I can remove items from the document structure and see in realtime how it will adapt.

Number 6 - Web Developer

Web Developer

Using this extension a developer has a significant amount of functionality available to them. I generally use this to disable things globally such as javascript, cache’s, and referrer’s. It is also terrific at manipulating forms (easily editing hidden variables), seting your browser to a predetermined size, and clearing any type of browser store (http authentications, cookies, etc.).

Number 7 Adblock Plus + Filterset.G

Adblock

Let’s face it, people use these extensions to get rid of annoying ads. Even if the ads in your clients site aren’t annoying they may be blocked. Once you have these extensions installed you can view sites in the same manner that many other ad haters do. For the record, I’m not an ad hater, just an intrusive ad hater.

Number 8 - Mouse Gestures

Mouse Gestures Optimoz

Let’s face it — the mouse sucks. Using a web browser if a very mouse intensive operation however. With mouse gestures, once you’ve go your hand on the mouse you have the ability easily navigate tabs, history, and bookmarks with a simple holding of the right mouse button and forming a simple line.

Number 9 - Firefox Extension Backup Extension

febe.png

You’ve just gotten comfortable with all of your Firefox settings, extensions, and browser setup — disaster strikes and Firefox won’t load correctly.

This even doesn’t happen very often, personally only twice in the last 4 years, but it’s occurrence is vexing. This extensions sole purpose is to package all of the customizations you’ve made into a importable package.

Number 10 - Google Browser Sync

Google Browser Sync

Sync your bookmarks, cookies, saved passwords, history, and even windows and tabs across computers. This extension is obviously only beneficial to those who use Firefox on multiple computers.

Google Browser Sync is completely automated. The settings you select at startup are automatically synchronized across each of the computers on which you install Browser Sync. You won’t even need to log in every time you start the browser. You can change which browser components are being synced – or even stop the syncing process entirely – using the settings panel in the upper-right corner of the page. The settings panel also gives you access to your PIN.

Since this extension passes data through Google, I synchronize only my bookmarks across computers. It is advised to check the encryption box on all items you share.


What extensions am I missing that you find helpful? I’m always interested squeezing more power out of Firefox.

One Response to “Top 10 Web Developer Extensions for Firefox”

  1. MarkRoeling Says:

    some more:
    - HTML Validator (both tidy and sgml validators inside)
    - IE tab for browser compatibility chech from within Firefox
    - Colorzilla, color picking tool
    - FireFTP

    IDE integration:
    - Aptana with Firefox plugin
    - firebug support

    Tools for IE:
    - IE developer toolbar
    - DebugBar

    Just for being handy:
    - All-in-one sidebar
    - dotCOMplete (tld completer)
    - gmail manager (multiple accounts)

    I don’t use aardvark, venkman, selenium, ext.backup, google sync.

Leave a Reply

You must be logged in to post a comment.