This is on top of AddOnsThirdParty.

Development and debugging

This is for developing Core extensions and SeLite frameworks (as per GeneralFramework). Apply this in parallel to

For the easiest download get all components of SeLite Development Tools collection. Otherwise install

Regardless of whether you installed DevPrefs add-on or whether you set the above preferences manually, now set a few more preferences. Visit Firefox URL about:config and

Restart Firefox, so that the above configuration takes effect.

Browser Console and Toolbox

These are for development of SeLite frameworks, Selenium IDE and its extensions. For debugging your web application use Firefox menu Tools > Web Developer > Toggle Tools instead.

Find these in Firefox menu Tools > Web Developer > Browser Console (shortcut Ctrl+Shift+J) and Browser Toolbox (formerly Browser Debugger; since Firefox 39 it has a shortcut Ctrl+Alt+Shift+I). If you start firefox binary from a shell on Linux, messages from Browser Console also show up in that shell. You can also start firefox.exe or firefox binary with Browser Console and/or Browser Toolbox by passing parameters -jsconsole or -jsdebugger (as per command line options).

In Browser Console, JS tab/dropdown has level Warnings. Name of that level is confusing. Undefined variables in strict mode and some syntax errors generate messages at visible only Warnings level (or more detailed), but they halt execution of the script anyway. So if things don’t add up, include Warnings level.

Evaluating expressions for XUL

Firefox menu Tools > Web Developer > Scratchpad (Shift+F4) doesn’t work for XUL files loaded via e.g. chrome://extension/path/file-name.xul (regardless of Environment setting - whether Content or Browser). Instead, use Firebug’s Console.

Logging

Don’t use alert(message) since it’s disruptive. Also, it’s not available in Javascript code modules.

In Core scope (i.e. in files listed for coreUrl in SeLiteExtensionSequencer.js) you can generate messages for Selenium IDE Log tab with


LOG.debug(...);
LOG.info(...);
LOG.warn(...);
LOG.error(...);

Beware that even though there is LOG object also in Selenium IDE scope (i.e. in files listed for ideURL in SeLiteExtensionSequencer.js), it doesn’t work (the messages don’t show up in Selenium IDE log). Use editor.getUserLog() instead.

In Javascript code modules call SeLiteMisc.log(), which gives you Selenium Core LOG object. Alternatively, use console object, which logs to Firefox menu > Tools > Web Developer > Browser Console:


var console= Components.utils.import("resource://gre/modules/Console.jsm", {}).console;
console.log(...);
console.info(...);
console.warn(...);
console.error(...);

Browser Toolbox

Don’t use Javascript debugger (Venkman) (because as of Firefox 22 it couldn’t locate Javascript code modules). Neither use Tiny Javascript Debugger (as it doesn’t catch debugger keyword).

Setting up breakpoints

If you can locate the source file in Firefox Browser Toolbox/Debugger, you can set up breakpoints by clicking at the left margin (at the line numbers).

debugger keyword

If the source file hasn’t been loaded yet and you want to set the breakpoint beforehand, you need to modify the source. Follow InstallFromSource and set up proxy file(s). Then edit the source and add a line containing: debugger; When Firefox reaches such a line, it pauses there (but it doesn’t switch to Browser Toolbox automatically - you need to do that.)

Then (re)start Firefox, open Browser Toolbox/Debugger and only after that open Selenium IDE. The debugger will pause on that line.

You can also start Firefox with debugger from shell, i.e. firefox -jsdebugger. However, it seems that you can’t use keyword debugger to investigate the very first loading stage of extensions (e.g. when Extension Sequencer loads an extension’s SeLiteExtensionSequencerManifest.js). The debugger doesn’t stop there. Instead, see above how to print messages with console.

Breakpoints in Core extensions

Selenium IDE loads custom Core extensions twice (reported in ThirdPartyIssues > Core extensions are loaded 2x). That applies regardless of whether you use Selenium IDE menu Options > Options > General > Selenium Core extensions, or whether you use Extension Sequencer.

Custom Core file(s) get first loaded at the start of Selenium IDE. Then they get loaded once more when you run a Selenese command (or a whole case or suite) for the first time. So, when you use Firefox Browser Toolbox/Debugger, do it only after you’ve run at least one Selenese command. Browser Toolbox/Debugger reports those files with ?numericTimeStamp appended to their file names. For each Core extension pick the one that has the highest timestamp.

This doesn’t affect Javascript code modules (accessed via Components.utils.import( 'chrome://...', optionalScope )) - those get loaded once only. If you use Bootstrap to load your extension(s) and you modify them while debugging, browser debugger will probably not refresh them.

Source of functions

If you inspect a variable that refers to a function (including a function field of an object/prototype), browser debugger doesn’t list toSource() on the function object by default. You have to add it to Watch pane.

Selenium IDE settings

When developing Selenium extensions, you’ll most likely benefit from unchecking the following two options in Selenium IDE > Options > Options… > Plugins (as per TroubleShooting > Loading Selenium plugins):

Debugging and extending Selenium IDE GUI

Say you’d like to debug or extend Selenium IDE GUI or Selenium IDE add-ons (rather than Selenium Core add-ons). If you want to match the GUI parts to its source, open chrome:// URL chrome://selenium-ide/content/selenium-ide.xul and inspect it with Firebug. It’s not as easy as inspecting an HTML page. If you use the inspect pointer button, that won’t expand down to all elements. Then you may need to open HTML tab and navigate in its breadcrumb, or alternate between using the inspector pointer and HTML tab. Then search in the relevant source for XML elements that you’ve identified.

Identifying event handlers

When figuring out event handlers in your web application you can use

NetBeans as a Javascript IDE

NetBeans is a good IDE for several languages, including Javascript. Essential features are

Version

Get NetBeans 8.0.1+ for HTML5 & PHP and

Plugins

If you also want to write custom SQLite filters/importers, you can add Java SE support to your NetBeans via menu Tools > Plugins. Then you’ll also need Java SE JDK.

Don’t install Foxbeans, a plugin to develop Mozilla addons in NetBeans. Otherwise, install.rdf files wouldn’t save on Ctrl+S (even when using a PHP Project, not an Addons project).

Custom code folding

If you repeat a pattern of code or similar sections of code, consider applying How to quickly create editor fold (which uses SurroundWithCodeFolding).

Hosting add-ons at addons.mozilla.org

If you host your extensions at addons.mozilla.org: