How do I view and edit local storage used by WebExtensions based Firefox addon?

Question

So I am developing a WebExtensions based add-on for Firefox. My add-on successfully stores and later retrieves some cruft (using browser.storage.local.set()/get(). But how can I view and edit the contents interactively (using keyboard and mouse), and not using WebExtension code? For example, to quickly modify some stored object properties and/or values by hand, for quick testing?

I figured I'd try, "Storage Inspector", SHIFT-F9 or Menu -> Web Developer -> Storage Inspector. But there's nothing there. I have one tab open which is on about:addons page, and Storage Inspector just has "about:addons" in each section (Cache Storage, Cookies, Indexed DB, Local Storage [I want this] and Session Storage). But they seem tied to the about:addons page, tied to whatever tab the Storage Inspector was opened from.

Hmm, so I click on my Options page, which I configure to open in a tab, and every storage area has moz-extension://random-uuid-etc, which is not the ID of my Addon, presumably because I started the browser session with the web-ext which injects the addon into a profile, for live updates on file changes.

I know, you're saying, but, that will create a new profile each time, so you won't have any old values saved anyways. Sure, ok, that might be an excuse if I hadn't already set stuff with the add-on before trying to find a way to view and edit. So really that's not an excuse for the local storage to be totally blank in storage inspector.

But additionally, I am using web-ext with -p C:\path\to\profile --keep-profile-changes, which stores profile changes in a persistent manner. I have verified that values previously saved from the add-on remain in local storage, even after commenting out the call to set, exiting, saving file, restarting, etc.

So how do I view and edit local storage used by a WebExtension based Firefox addon?

A "Web Developer" tool that has a caveat of not working for web development, is a prized dunsel in any toolkit.

Answer 1

In FF 60esr I can view extension local storage data in the page rendered by navigating to about:debugging and selecting debug on the extension in question. The URL is of the form moz-extension://{Extension UUID}/_generated_background_page.html and it is possible to navigate directly to it. As you would expect, local storage data appears in Web Developer/Storage Inspector - example below.

As for editing it, The GUI needs some improvement, but this is possible by double-clicking in either a key or value field, as per the docs.

Answer 2

Currently this isn't possible in Firefox. Vote for https://bugzilla.mozilla.org/show_bug.cgi?id=1292234 to make it happen one day.

In the mean time, I use Chrome for Firefox WebExtensions development where the Storage Area Explorer extension offers the feature you're looking for.