Mozilla Add-ons Community Blog
Categories: developers jetpack restartless

Add-on Debugger now in Firefox Nightly

16 responses

Since the dawn of Firefox debugging add-ons has been a task fraught with peril. The old JavaScript Debugger existed but hasn’t received the care and attention it needed. Most of us resorted to logging with dump statements to try to figure out why things were going wrong.

That is going to change. Recently landed in Firefox Nightly is the new Add-on Debugger. A full JavaScript debugger targeted at add-ons. It behaves like the developer tools debugger for webpages and the browser toolbox but will show the scripts that your add-on uses to make it easy to find where things are going wrong.

The feature is still experimental and we need your help to make it shippable. To use it you need to turn on two options. Open the developer tools, go to the settings and enable chrome debugging and remote debugging. Once they are on you can find debug buttons for add-ons in the Add-ons Manager. We support debugging any restartless add-on, older style add-ons won’t be supported for now. We want to focus on making the experience as awesome as possible for the newer style.

When the debugger opens you’ll see a list of all the scripts from your add-on that are currently in use. If your add-on uses the Add-on SDK then the modules you use will show up in their own section as well. As you might expect you can set breakpoints and step through code. You won’t see all of your code immediately, only scripts that are in use. When new code is loaded it should show up. We’ve put together a short screencast showing enabling the debugger and a few things you can do with it:

Many thanks to our intern on the SDK team last year, Mike Hordecki, for doing the bulk of this work assisted by Eddy Bruel. Also thanks to Jordan Santell for getting it landed.

As I said we need your help to make this better. Please file bugs anywhere you see problems, either scripts not appearing in the debugger that you expect to be there or being unable to use the debugger properly. For now the debugger is the only part of the toolbox that you’ll see. In the future we want to add an add-on specific console as well as start showing the other developer tools where they make sense for add-on developers. Let us know what you want to see either in comments here or by filing bug reports in the Firefox Developer Tools Debugger component.

16 comments on “Add-on Debugger now in Firefox Nightly”

  1. Mindaugas wrote on

    Thank you for your continued work on improving add-on development. I’ll be sure to try it out.

    However, it seems that this is only a stripped fork of the Browser Toolbox? The latter seems to be superior since context-aware console is available. Furthermore one can step-through XUL JS as well (e. g. Australis UI) in it.

    So what are the benefits of the add-on debugger for non-SDK add-ons? bootstrap.js debugging perhaps?

    1. Dave Townsend wrote on

      We believe that many add-on developers want something more specific to their add-on than the browser toolbox so the debugger itself just shows the add-on scripts. It makes it quicker to find your code and debug to find the problem in it. You’re right though that sometimes stepping through browser code is useful. We are considering ways to allow stepping into browser code from the add-on debugger but I expect some will to continue using the browser toolbox too. Many of the things we’re improving add improvements there too, you should see all code for an add-on grouped together in the sidebar now for example.

      As for the console, that is coming soon and will give you log messages from your add-on and also allow JS inspection and evaluation in the scope of your add-on’s main script (bootstrap.js for restartless add-ons). This will also bring scratchpad support so you’ll be able to experiment with code to see what happens right in the runtime.

      Thanks for the feedback, keep it coming!

    2. Dakota Schneider wrote on

      Wait, there’s a context-aware console that allows you to evaluate code in the scope of an extension? How do you use it? I’ve been looking for something like this for a while, and haven’t found any information about it. In Chrome it’s as simple as selecting the extension from the console context dropdown… Not being able to execute code in the context of an extension in Firefox has made my Firefox extension development a nightmare.

  2. custom.firefox.lady wrote on

    Looks cool, but I can’t get it to work in my development profile. (Works fine in clean profile with one simple restartless (bootstrap.js) extension installed.) In dev profile I just get a blank new window and these errors:

    Error: error occurred while processing ‘listAddons: [Exception… “Component returned failure code: 0x804b000a (NS_ERROR_MALFORMED_URI) [nsIIOService.newURI]” nsresult: “0x804b000a (NS_ERROR_MALFORMED_URI)” location: “JS frame :: resource://gre/modules/NetUtil.jsm :: NetUtil_newURI :: line 200” data: no]Line: 200, column: 0
    Source file: resource://gre/modules/commonjs/toolkit/loader.js -> resource://gre/modules/devtools/server/main.js
    Line: 1056

    Error: Creating a profile failed. NS_ERROR_FAILURE: Component returned failure code: 0x80004005 (NS_ERROR_FAILURE) [nsIToolkitProfileService.getProfileByName]
    Source file: resource://app/modules/devtools/ToolboxProcess.jsm
    Line: 139

    Despite the “creating a profile failed” error, a new (*chrome-debugger) profile shows up in the profile mgr. And strangely opening “Browser Toolbox” works fine (which includes the extensions bootstrap.js file in the list along with the other items, so at least I can use it from there).

    Tried disabling every other add-on in the dev profile except the same one simple one; still gives an empty window.

    Any idea how to fix (hopefully short of starting over with a new profile)?

    1. Dave Townsend wrote on

      Thanks for the report. I think this is down to a bug I discovered yesterday. I’m going to try to get it fixed today in which case it should start working after the next nightly but you can follow along in https://bugzilla.mozilla.org/show_bug.cgi?id=993539.

      1. custom.firefox.lady wrote on

        Confirmed working in the 4-11-14 build, thanks. The debugger should be really useful and seems easy to use too.Big plus for add-on devs.

  3. Noitidart wrote on

    Superrrrrb we neeeded this for soooo long!!!

    Btw it is heavy on cpu usage on my poor win xp machine from 2k4. 🙁

  4. Yunier J wrote on

    Great, thank you for it.

  5. xert wrote on

    How can the new debugger be enabled by setting the preferences manually? The page https://developer.mozilla.org/en-US/Add-ons/Setting_up_extension_development_environment does not yet describe this and once I get the info I can implement this in the addon https://addons.mozilla.org/en-US/firefox/addon/developer-profile – whose sole purpose is to automate those preferences named in the wiki.

    1. wbamberg wrote on

      I think you need:

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

      Actually, it looks like both those settings are already listed in that page (for different reasons) so maybe your extension will already enable the add-on debugger?

      1. xert wrote on

        Seems I read through that list too fast. Will update the addon. Thanks!

  6. rolf wrote on

    Looks very promising! Unfortunately it seems, that content scripts are still not debuggable. At least here the debugger doesn’t stop at breakpoints in a content script. Or am I missing something?

    1. Dave Townsend wrote on

      It should be working, please file a bug if you’re still seeing problems.

  7. raz wrote on

    how can i get this to work? i turned the options on, but there is no add-on in the extensions that says add-on javascript test. where do i get this add-on from?

    1. raz wrote on

      I mean “add-on debugger test”

    2. raz wrote on

      nvm i figured it out. You have to go to the developer menu and it will say “Browser Toolbox” Click on that and voila.