How to inspect a Firefox WebExtension popup?

Question

I'm trying to get a Google Chrome Extension to run as a Firefox Webextension. My original Problem is that the popup has no height. Besides that I could not for the life of me figure out how to inspect the DOM of the popup.

Btw the popup is just an HTML file and it is defined in browser_action.default_popup.

Answer 1

The bugs referenced in @minj's comment above are resolved in recent versions of Firefox. You can debug popups now. MDN explains it well; in brief...

1. enter about:debugging in the URL bar.

2. In the left-hand menu, click This Firefox (or This Nightly).

3. click Inspect next to your extension to open the "Extension Toolbox".

4. Check the option to "Disable Popup Auto-Hide" in the Extension Toolbox

5. then you select which HTML document you mean to debug (in this case it would be your popup HTML code) using the context switcher ("select an iframe as the currently targeted document")

   

After doing this, the popup stays on the screen and the inspector contains its HTML. I'm doing it now for the first time (in Firefox 49) and it's working well.

Answer 2

It's not currently possible since the popup closes automatically and there is no DOM view available. See bug 1236944 and bug 950936.

Popup sizing does not seem to work correctly in Firefox. There are a bunch of bugs related to it.