How to debug a XULRunner application

Introduction

The easiest way to debug XULRunner application is using the console. This document will discuss various console and preferences user can set to make their life easier debugging XULRunner applications.

Prefs

Setting the preference file must be done if users want to debug their application using the console. The file can be called anything as long as it ends with .js. Typically developers call their pref file debug.js. In the .js file, have the following content in it:

 /* debugging prefs */
 pref("browser.dom.window.dump.enabled", true);
 pref("javascript.options.showInConsole", true);
 pref("javascript.options.strict", true);
 pref("nglayout.debug.disable_xul_cache", true);
 pref("nglayout.debug.disable_xul_fastload", true);

Console

To use the console on windows when running XULRunner application simply use the console argument. An example of this would be the following:

 xulrunner application.ini -console

In the application code, use the following command to display information onto the console:

 dump("some type of text");

Note: make sure the preference JavaScript file contains the following:

 pref("browser.dom.window.dump.enabled", true);

JavaScript Console

To use the JavaScript console, use the jsconsole argument when running the XULRunner application. An example of this would be the following:

 xulrunner application.ini -jsconsole

The default setting for the JavaScript console only shows errors related to the web content. To show the error messages from chrome JavaScript, make sure the following is in the preference:

 pref("javascript.options.showInConsole", true);

To output messages to the JS console

There are two ways of outputting messages into the JavaScript console.

One of the ways is using Components.utils.reportError. This is a JavaScript Error object used for returning errors onto the JavaScript console. Developers tend to use this command in the exception handler block of the code. There will be a red stop icon next to the error in the JavaScript console using this method. To print debugging code onto the console, type the following:

 Components.utils.reportError("error message");

Another alternative in displaying error messages in the JavaScript console is building a custom error messaging function. This guide will call their custom function jsdump. In the function it will contain the following:

 function jsdump(str)
 {
   Components.classes['@mozilla.org/consoleservice;1']
             .getService(Components.interfaces.nsIConsoleService)
             .logStringMessage(str);
 }

Now if the user wanted to display error message using this method they would type the following somewhere in their code:

 jsdump("error message");