39

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?

Robin Rodricks
  • 110,798
  • 141
  • 398
  • 607
  • 3
    This question is still getting attention from time to time - please note that the answers here are quite old, and do not factor in the support for [bootstrapped extensions](https://developer.mozilla.org/en-US/docs/Extensions/Bootstrapped_extensions) which have a slightly different development process. – Stobor Feb 05 '13 at 00:44
  • ^ I would rather say, be sure to lookout the dates of the answer that you are currently looking at. – Nirav Zaveri Jun 27 '14 at 10:34
  • 1
    3 options: use FF 31, use autoinstaller addon, build it into code. Please add/edit to the answer [below](http://stackoverflow.com/questions/1077719/fastest-way-to-debug-firefox-addons-during-development/24713397#24713397) – user3526 Jul 12 '14 at 13:44

8 Answers8

48

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

mlissner
  • 17,359
  • 18
  • 106
  • 169
sdwilsh
  • 4,674
  • 1
  • 22
  • 20
  • Oh, wow, I had no idea about `disable_xul_cache`. This made my day. – Wayne Mar 03 '11 at 20:49
  • This works with opening **new window**. Is there a way to make it work with opening **new tab**? – xralf Nov 28 '11 at 20:54
  • 2
    @xralf: basically no. The code in browser.xul overlay is loaded in each **window**; to load updated code into existing window Firefox would need to first "unload" your code which is impossible^W an unsolved problem. On the other hand, if you're changing code that runs _in a document loaded in the tab_, it will be reloaded with the tab, just like regular web pages. You could look into the Addon SDK, which has promising infrastructure for creating unloadable extensions, or if you're just writing a content script, even something like a Greasemonkey would be a good start. – Nickolay Nov 28 '11 at 22:35
  • @Nickolay OK, I found out that it's a good speedup in development, only because I don't have to rebuild. – xralf Nov 29 '11 at 09:07
5

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!

John Carter
  • 53,924
  • 26
  • 111
  • 144
bizzy
  • 201
  • 1
  • 8
4

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.

Stobor
  • 44,246
  • 6
  • 66
  • 69
  • 1
    you don't need the 'restart firefox' step. if you install the [extension developer addon](http://ted.mielczarek.org/code/mozilla/extensiondev/) there is an option to 'reload chrome'. you can add your own little button to the toolbar to do it (check the extension source). – nikcub Aug 27 '11 at 10:41
3

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

AlexEzh
  • 621
  • 4
  • 12
  • I used Venkman, but lately the built-in Firefox Browser Toolbox's debugger is a lot better. – NoBugs Mar 29 '14 at 01:41
3

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/

Jonny
  • 614
  • 4
  • 12
  • 2
    Just a warning here, and I quote: "We support debugging any restartless add-on, older style add-ons won’t be supported for now." - Dave Townsend (from the link posted above). – Nirav Zaveri Jun 27 '14 at 10:08
2

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:

I have used the last two options and it works greatly for me.

Community
  • 1
  • 1
user3526
  • 1,412
  • 1
  • 19
  • 26
1

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.

Community
  • 1
  • 1
Gerold Meisinger
  • 4,500
  • 5
  • 26
  • 33
1

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)

archygriswald
  • 33
  • 2
  • 8