Update: if you’ve enabled the correct preferences, you can now use the --jsdebugger commandline flag to open the debugger immediately! You can also use this flag with mochitests. For more info, see my new post.

Earlier today, when I was still sound asleep, some of the students from the MSU capstone project that Jared and I are mentoring asked about debugging their add-on’s JS. Rather than just answering them, I figured I’d write a blogpost as perhaps the information is useful to others as well.

While there is ongoing work to make debugging add-ons built with the SDK a more natural experience, you can already debug browser and add-on JS alike using the Browser Debugger. In fact, while it’s not very intuitive (and again, there’s a bug for making that better) you can also use the Browser Debugger to debug mochitests. I have already been using this method to figure out what broke in recent test failures on the UX branch, and am pleased to have something more robust than dump statements to figure those out.

Generally, here is how you start using the Browser Debugger:

1. Open the Firefox Developer Tools Toolbox (Tools > Web Developer > Toggle Tools in the menus)
2. Click the little ‘gear’ icon in the toolbox to open the settings page.
3. Toggle the “Enable chrome debugging” and “Enable remote debugging” checkboxes. (you may need to scroll down in the toolbox pane to see these)
4. You can now close the toolbox, and either restart Firefox as the checkboxes suggest… or just open a new window.
5. There will now be a “Browser Debugger” item in the Web Developer submenu under Tools (sadly, there is no keyboard shortcut). Use it to open the debugger.
6. The Browser Debugger starts another Firefox process to remotely debug your existing Firefox process, and your existing one will therefore prompt you whether you want to allow access to the debugger (as doing so essentially gives full control of the debuggee to the debugger). Click “OK” in this dialog.

Now the browser debugger’s list of source files should start filling up. You can use the debugger much like you’d use the web debugger that is in the Toolbox: filter for sources, or even search through fulltext of sources to quickly find what you need, set (conditional) breakpoints, add watches, etc.

For mochitests, the situation is much the same except that, if you’re like me, you’ll quickly get annoyed because you get to go through the steps of enabling and starting the debugger manually every time. So I filed a bug and attached a patch to at least eliminate the opening of new windows, but got stuck trying to get it to pass all the tests.

In any case, you can start your test(s) with the --no-autorun option, and then go through the steps outlined above (opening a new window instead of restarting). Make sure you close the toolbox and the extra window, as these might otherwise interfere with running your tests. When you’re done setting your breakpoints and such, click the button in the mochitest window to start running your test(s). Happy debugging!