Fastest way to debug Firefox addons during development

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

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!

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.

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

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):

1. in firefox open a new tab exteand type about:debugging
2. 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)
3. 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
4. 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)