Fastest way to debug Firefox addons during development - debugging

Question

Debugging a Firefox addon is a slow process: (1) edit source code in a JS editor (2) package into XPI using a build script (3) drag into Firefox to install (4) restart Firefox (5) open the JavaScript Debugger
Can we speeden up the process? Like install it into Firefox without a restart, or configure the build script to install it into Firefox as well?

Answer 1

You'll want to locate your profile folder. Once you find it, go into the folder called 'extensions', and then locate the folder for the add-on you are working on. Replace that folder with a file of the same name (minus .xpi if that's part of the name), and inside the file place the full path to your source directory of the add-on.
In Linux and Mac, that'll look like:
/full/path/to/yourExtension/
And on Windows:
C:\full\path\to\yourExtension\
Remember the trailing slash and beware of extra whitespace.
As long as you don't use jar files inside your add-on, you will no longer have to rebuild (this is covered in a bit more depth here).
Additionally, you'll want to set nglayout.debug.disable_xul_cache to true. For edits to xul or js files, you'll just have to open up a new window to see your changes instead of restarting the application. There are other preferences here that you may find useful as well.
Extra tips:
Starting firefox with a certain profile (dev), while other firefox profile is open and with the debugger already on:
"C:\Program Files (x86)\Mozilla Firefox\firefox.exe" -no-remote -P dev -jsconsole
Check out the restart addon (saves time).

Answer 2

i use Netbeans with the Foxbeans Plugin for addon development, there you just press the "run button", and firefox starts up with the addon installed (into a test profile). maybe you should give this a try!

Answer 3

You need the "edit source" and "restart firefox" steps; they can't be removed from the process...
When you install the addon, the javascript ends up on disk, in your firefox profile. If you edit it in there, and restart firefox, the new stuff will be picked up. When you're done, create the xpi from the files in your profile.

Answer 4

http://simplygenius.com/2005/08/debugging-firefox-mozilla-extensions_25.html contains a good description of debugging FF extensions in venkman

Answer 5

Came here via google - FF nightly 31 has new tools for debugging add ons. Its a god send. Details here:
https://blog.mozilla.org/addons/2014/04/08/add-on-debugger-now-in-firefox-nightly/

Answer 6

To make development of the add-on faster, an important goal is to eliminate restart of FF to test every code change. Three options that I can think of:
Use the FF nightly 31 build, based on the other answers in this post.
Use the following add-on https://addons.mozilla.org/en-US/firefox/addon/autoinstaller/
Build it in your code with a restartless add-on. Refer to the answer in this post firefox restartless bootstrap extension script not reloading
I have used the last two options and it works greatly for me.

Answer 7

You can also set dynamic breakpoints via the debugger keyword. Open the "Browser Toolbox" to make the debugger stop at the line.
I think it's nice because you don't have to lookup the source file and line after every restart.
Also take a look at this Debugging extension code in firefox answer which mention the improved debugger capabilities for restartless extensions since Firefox 23.

Answer 8

As of 2022 most of the old answers are quite outdated.
Installing unsigned extensions/addons/themes is not possible anymore for the Release versions of firefox, especially just copying them into the profile/extension folder ("sideloading", see here).
Only ESR, Developer, Nightly and Unbranded versions of firefox still allow installation of unsigned extensions.
Mozilla gives a nice Firefox workflow overview for creating extensions.
For running and debugging extensions you can use the tool web-ext or the following (both methods described in link above):
in firefox open a new tab exteand type about:debugging
under This Firefox you can Load temporary Addon... to load your extension
(don't load a .xpi file, just select any file within the directory you develop your extension in)
the extension is loaded and you can debug it
you need to use the Browser Toolbox to debug extensions
in case the devTools won't work make sure devtools.chrome.enabled = true in about:config
when you made code changes you can click Reload in the debugging tab
Finally, after coding and testing, when you want to create a new .xpi file, VS Code's Tasks are handy.
This here is a very simple task that uses 7-zip on Windows to create a .xpi:
{
"version": "2.0.0",
"tasks": [
{
"label": "Make Theme .xpi",
"type": "process",
"windows": {
"command": "C:\\Program Files\\7-zip\\7z.exe",
"args": ["a", "-tzip", "${relativeFileDirname}-theme.xpi", "${fileDirname}\\*"]
}
}
]
}
(this snippet uses variable substitution to read files and put .xpi file into specific dir)