Chapter 8: Testing Our Extension

The dynamic development feature we discussed back in chapter 4 has improved extension testing greatly, but there are a few other tricks a developer should know to get the most out of the testing process. JavaScript is a notoriously bad language to debug, and thankfully Firefox offers us some features that we can use to avoid those annoying alert() calls.

What to Do if Firefox Breaks

Sometimes an extension can have a bug so catastrophic that Firefox refuses to start. When this happens, you first need to check for hung Firefox processes, killing off any that you find. Once you are sure that no Firefox instances are running, you need to uninstall your problematic extension. How you do this depends on whether or not you are using the dynamic development system.

If you are developing dynamically, simply navigate to the extensions folder in your development profile (as we discussed in chapter 4), and move your extension’s pointer file (in our case the file was named tuttoolbar@borngeek.com) to a temporary location. Restart Firefox using your development profile, allowing it to ‘purge’ itself of the newly uninstalled extension, and close the browser again. After you fix the problem that was causing Firefox to hang, move your pointer file back to the extensions directory, and restart Firefox.

If you are not developing dynamically, uninstalling your problematic extension involves starting Firefox in safe mode. You can do this in one of two ways:

  1. Use the "Start Firefox in Safe Mode" shortcut that got created by the Firefox installer. In Windows XP, the default shortcut location is: Start » All Programs » Mozilla Firefox » Mozilla Firefox (Safe Mode).
  2. Add the -safe-mode command line parameter to an existing Firefox shortcut.

In safe-mode, Firefox will not load any extensions or themes. Once in safe-mode, you can simply uninstall your problematic extension by using the add-ons manager as you normally would. After you have uninstalled the extension, remember to remove the -safe-mode command line parameter (if you manually added it to an existing shortcut).

Logging to the Browser Console

One useful way to test JavaScript code is by printing out statements to the browser console, which you can access through the Firefox » Web Developer » Browser Console menu item (the Ctrl + Shift + J keyboard shortcut will also open it, as of this writing). In order to log to this window, we must first import the appropriate JavaScript module. Once we have done that, we can write a handy little wrapper function to do the work for us:

// Import the appropriate module
Components.utils.import('resource://gre/modules/devtools/Console.jsm');
Log: function(aMessage)
{
    console.log('Tut_Toolbar: ' + aMessage);
}

In practice, you should change the ‘Tut_Toolbar:’ portion of the message to whatever the name of your extension is. By prefixing each message with your extension’s name, you can better tell which output messages are yours. Now that we have this function available, we can simply call it from anywhere in our code to print out a debug message:

this.Log("The value of the URL variable is: " + URL);

Remember to always remove all calls to this function before releasing your extension to the public. Not only does logging to the console slow things down, it adds unnecessary clutter to the user’s browser console window.

Logging to the Standard Console

An alternative method of logging debug information is available through the standard console mechanism. Before this method can be used, several modifications to the browser must be made. First, we need to modify the value of the browser.dom.window.dump.enabled preference. This can be done by going to about:config, filtering the list for the preference name, and setting the value to true.

The next step is to add the "-console" command line parameter to your Firefox startup shortcut. Using this parameter will cause the standard output console window to appear each time you run Firefox. Once this has been done, and Firefox has been started, any output produced by the dump() function will appear in this console window. The dump() function works just like the standard JavaScript alert() function, so the syntax is similar.

The DOM Inspector

One of the greatest aids to anyone designing a toolbar, or any other chrome overlay for that matter, is the DOM (Document Object Model) Inspector, a tool which allows you to examine the structure of XML documents (which includes XUL and HTML). This add-on tool is available from the official Firefox add-ons website.

Once you have installed this add-on, a wealth of information can be harvested, so make sure you learn how to use it. Here are a few guides on how to use the DOM Inspector:

This tool is best used to help troubleshoot XUL layout problems, as it allows you to view the styles being applied to various XUL elements. I highly recommend learning how to use the DOM Inspector. It’s simple to pick up, and you will be glad you learned how to use it.

The End

This tutorial exposes just the tip of the iceberg for Firefox extension development. Here are a few exercises you should try to improve the toolbar we made:

  • Convert the menulist search box into an autocomplete textbox element
  • Add an options dialog to allow the user to toggle extension-specific options

I hope you’ve found this tutorial to be helpful. If you spotted a problem or have a question, let me know. Above all, have fun!