Debugging JavaScript

This document is intended to help developers writing JavaScript code in Mozilla, mainly for Mozilla itself, but it may also be useful for web developers. It should give pointers to tools, aids and tricks which make debugging your code easier.

Web Console

This is the first place to go when you're debugging a web page; open the Web console using the Web Console option in the Web Developer menu. This shows any JavaScript errors in your app, as well as any logging calls from the console API.

Browser Console

The Browser Console lets you see all JavaScript errors and logging in the browser, including from Firefox code. To enable it, go to about:config in the url bar and set devtools.chrome.enabled to true, or set the "Enable chrome and add-on debugging" option in the developer tool settings. Activate it through with the menu Tools > Web Developer > Browser Console.

You can also start the Browser Console when you launch Firefox, by launching Firefox from the command line and passing --jsconsole as a flag:

/path/to/firefox --jsconsole

Log to the Browser Console using the standard console API after importing Console.jsm:

let console = (Cu.import("resource://gre/modules/Console.jsm", {})).console;
console.log("Hello from Firefox code");

Error Console

This is obsolete and is no longer enabled in Firefox by default. Use the Web Console or the Browser Console instead.

Browser Debugger (Built-in)

On Firefox 19 or later, it's possible to use the built-in JS debugger on the browser itself.  Go to about:config and set the following two prefs:

devtools.chrome.enabled: true
devtools.debugger.remote-enabled: true

After you restart the browser, you can access the Browser Debugger through Tools > Web Developer > Browser Toolbox. (Note that before Firefox 28, this was labeled "Browser Debugger" and only the debugger was available, not the whole toolbox.)

Note that you must accept the incoming connection :

(You may disable the pop-up above with the devtools.debugger.prompt-connection set to false in about:config. This can be a security risk, especially if you also set the devtools.debugger.force-local preference to false.)

Then, the Browser Toolbox displays the available tools for debugging. (Note that before Firefox 28, only the script debugger was available.) The use of these tools are the same as the Built-in Tools.

Strict code checking

If you set the pref javascript.options.strict to true, the JavaScript engine gives you more types of warnings on the Error Console, most of which hint at code bugs that are easy to oversee or even bad syntax. (The pref also warns on common JavaScript idioms that are not errors).

Console.log in Browser Console

You can dump variables in the Browser Console from addon code, by adding this line to import the console utility:

const { console } = Components.utils.import("resource://gre/modules/devtools/Console.jsm", {});

This has an advantage over dump in that you can list out properties of an object logged with console.log.

dump()

The dump() function allows you to print text on the native console. Use \n to output a newline at the end.

To see anything, you need to set the pref browser.dom.window.dump.enabled to true, e.g. in about:config (add new pref, it doesn't exist per default).

Under Microsoft Windows you additionally need to start Firefox via the following command to have a native console :

firefox.exe -console

Using normal JavaScript object inspection, you can write a function that dumps a whole object, similar to this ddumpObject().

Log.jsm (formerly log4moz)

This is a partial implementation of the Log4* interfaces (for example, see log4j or log4net).

Components.utils.import("resource://gre/modules/Log.jsm");

"debugger" keyword

You can halt Venkman or Chromebug at a line using the keyword debugger. In debug builds this also dumps a stack trace to the console, even when the debugger is not running. In extensions you can print the callstack using Components.stack like this:

function getStackDump() {
  var lines = [];
  for (var frame = Components.stack; frame; frame = frame.caller) {
    lines.push(frame.filename + " (" + frame.lineNumber + ")");
  }
  return lines.join("\n");
}

Scratchpad

Scratchpad has chrome privileges if devtools.chrome.enabled = true. Change the scratchpad to evaluate in the context of the current browser window by setting Environment > Browser in the menu.

See Also

• Debugging Mozilla with gdb
• Setting up an extension development environment (particularly development preferences and development extensions)