Debugging new Mozilla WebExtension API

Question

I am trying to port a Chrome extension to Firefox using the new Mozilla WebExtension API. The problem is that using Chrome I could debug the background page and the popup separately. Moreover, the popup.js script was run everytime the popup was opened, and the background.js could be reloaded using Ctrl+R… and I have no idea how to do this in Firefox. I don't even know if it's possible. As far as I have seen, both scripts (background.js and popup.js) are executed only when the browser is restarted (aren't they?).

Anyone knows how to solve these issues, or a good way to debug Firefox extensions written with the WebExtension API?

Thanks!

Answer 1

Recent versions of Firefox (e.g. 49) have more capable WebExtension debugging tools, and recent docs on MDN explain how to use them. You'll want the Browser Toolbox, and you may want to set up a custom Firefox profile that enables the Browser Toolbox by default (or has installed the DevPrefs addon).

Answer 2

Unfortunately debugging WebExtensions is a pain at the moment. A related bug.

The only thing you can do at this time is use debugger; statements to set the breakpoints in the code. The debugger you need is Browser Toolbox.

Open the Browser Toolbox, focus the debugger tab, wait for the sources to load and then trigger your code to reach those statements. Proceed as usual.

As for reloading things, browser action was supposedly fixed and the background is executed every time you disable and re-enable your addon.

However, Firefox suffers from various code cache issues since forever so disabling and re-enabling your addon might not pick up any changes. Your best bet is restarting the browser every time. There is also a discussion to support live reload.