How is everyone debugging WebExtension popups in Firefox 68+?

Add-ons Development
#1

When I click “Inspect” the new debugging system loads in a tab ready for debugging the background page.

Previously I was able to select the “Disable Popup Auto-Hide” option, click to open the popup and then select the popup iframe in devtools.

When going through those same steps in FF68 and 69, the iframe chooser popup never closes and the devtools mostly freeze (switching tools works but everything else appears to be blocked, possibly because this iframe popup never closes). It used to close in the old non-tab-based debugger tools, even when the auto-hide was disabled.

This same limitation seems to happen whether I keep the devtools tab in the same window or tear it out into a new one (as is now required every time in order to be able to actually see the popup and devtools at the same time).

Pressing escape does not force the iframe picker popup to close.

I find it hard to believe that no-one else has tried debugging a popup since FF68 hit Nightly so I guess I must be missing something?

#2

Oh man, I’ve just tried to debug a pop-up and it totally froze whole browser :smiley:. Well I can’t say you didn’t warn me…

I don’t know how others are working but when I need to instantly debug a pop-up, I’ll use Chrome. It’s the sad truth that pop-up debugging was never easy in Firefox.

But if you are developing pop-up and you want to debug it and play with it as well, it’s super useful to open the pop-up in a normal tab instead.
It may break a layout a bit, but it’s much easier to work with it.
I have the following line in my background script to make sure it’s re-opened when add-on reloads:

browser.tabs.create({url: 'popup/popup.html'});

But the good thing about 68+ is that you can now open your background debugging tab with web-ext:

web-ext run --firefox=firefoxdeveloperedition --start-url "about:devtools-toolbox?type=extension&id=your@addon.id" --start-url about:debugging#/runtime/this-firefox
1 Like
#3

I use Firefox Developer Edition v.68 and it works normal. I don’t use my primary FF to do dev stuff so I don’t know. How about you install FF Dev to do dev work? (if your disk space allows)

#4

I use Dev edition (68) and Nightly (69). It’s interesting that it works for some people and not others - sounds increasingly like a Firefox bug, although I can’t find anything like it described on bugzilla already. I’m using Ubuntu 18.04 (X windows).

Thanks for the tips @juraj.masiar . Sorry it froze your whole browser - I found the issue was limited to the devtools tab although a lot of the normal ways of closing the tab would not function (might be remembering incorrectly but I think middle-clicking the mouse on the malfunctioning dev tools tab only when a different tab is selected got it to close).

Opening the popup directly in a tab can work occasionally but for most cases, the contents of the popup (at least in my extension) depends upon the currently focused tab so it really needs to be debuggable as a panel that doesn’t impact the tab selection.

I’ve built my dev environment without using web-ext (basically before it even existed) but may integrate it for a few selected features like the one you suggest.

#5

I think this is a bug for Linux family. I run FF Dev in Windows 10 and it works fine. Please note it to your bugzilla report please :pray:. I’m currently using mobile so it is hard for me to do it. Thanks.

#6

I recently used this toggle to look at my extension’s popup in Nightly on elementary OS, so I don’t think it applies in all cases…

1 Like
#7

I’ve done some further testing:

  1. Identical problem with my extension on Windows 10 with a fresh Nightly profile (except xpi signatures check disabled)

  2. Identical problem with my extension when using web-ext run to load a temporary profile in Nightly on Windows 10 (although clicking “Inspect” automatically opens devtools in a new window rather than a tab, which is a bonus)

  3. Launching Firefox via web-ext run on the quicknotes and react-es6-popup-example example works fine

So since it does not appear to be a platform dependent problem I’m left wondering what else is different for those of you that are able to debug using this tool.

Perhaps it is only possible to debug a popup when there is no background page/script? (So there’s no need to interact with the iframe chooser popup)

Any other ideas what could be different with your add-ons? Can you reproduce the problem using the default nightly profile via web-ext run?

PS: I find that on Windows the only way to close the hung browser interface is via the taskbar so try that before forcibly killing the browser process.

1 Like
#8

I mostly use chrome to debug and develop the popup. It’s just way easier and more stable. If there is something firefox specific, I open the popup in a new tab instead and debug it there.