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:

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).
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 extension 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).

Useful Browser Settings

There are two rather obscure browser settings that can make your development life much easier. Both can be set through the about:config interface, and both affect the output that gets sent to the JavaScript console.

The first preference is javascript.options.showInConsole. When set to true, any errors or warnings that appear in your extension’s chrome files will be sent to the JavaScript console. By default, this preference is set to false (so you’ll need to enable it). It’s a handy way to track down existing problems.

Next is the javascript.options.strict preference, which is also set to false by default. When true, the JavaScript parser within Firefox will be placed into strict mode, placing tighter restraints on your extension’s code. This helps to improve your code’s integrity and makes it easier to track down subtle code problems.

Logging to the JavaScript Console

One useful way to test JavaScript code is by printing out debug values to the JavaScript console, which you can access through the Tools » JavaScript Console menu item. In order to do this, we must first obtain an instance of the nsIConsoleService interface. The following snippet of code does just that:

ConsoleService: Components.
          classes['@mozilla.org/consoleservice;1'].
              getService(Components.interfaces.nsIConsoleService);

Once we have obtained this console instance, we can use it to write our own messages. The following function will do the work for us:

Log: function(aMessage)
{
    this.ConsoleService.logStringMessage('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 JavaScript console window. For further reading on the JavaScript console, consult this Mozilla Developer’s Center article.

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 add a new browser preference. In the URL bar in Firefox, type about:config and press enter. Right click in the list control and select the New » Boolean menu item to create a new boolean preference. Give the preference a name of browser.dom.window.dump.enabled and set 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 one of two ways:

From the official Firefox add-ons website
As a part of an "Advanced" or "Custom" Firefox install (it is not installed by default)

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:

The DOM Inspector (from Creating Applications with Mozilla)
DOM Inspector FAQ

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.

Previous Chapter | Table of Contents | Next Chapter