CODEWITHSUNDEEP
htmlcssfirefoxfirefox-addon-webextensionsdevtools
Amazon Dies In Darkness
Amazon Dies In Darkness

Reputation: 5833

How to use Firefox's devtools to inspect web extension content in sidebar?

When web extensions create sidebar content, how does one use Firefox's devtools to inspect that sidebar content while it is presented in the sidebar?

If an example is helpful, please consider the Tree Style Tab web extension.

Normally, you can just open Firefox's devtools inspector, and inspect an element. This does not work for this case.

When it doesn't work, you can then typically set up a remote debugging session for Firefox's devtools. This works for inspecting the sidebar elements surrounding the web extension's content, but does not allow a developer to immediately inspect the content of the web extension itself while it is presented in the sidebar.

The only workaround I have found is to determine the URI of the content in the sidebar, and then open it in its own tab. Once I've done that, I can inspect it as usual, but I'm looking for a way to inspect the content while it is displayed in the sidebar.

Upvotes: 2

Views: 427

Answers (1)

WesJ
WesJ

Reputation: 121

You can inspect the sidebar using what's called the "Browser toolbox" in Firefox's settings.

Settings Menu -> More Tools -> Browser Toolbox

This runs in its own process, similar to the Chrome devtools, so you'll have to accept the incoming connection for it to work. Then you'll also get debug output from your background scripts in this console, so you can use it to debug both. Since Firefox itself runs multiprocess, you may need to also click the "Multiproces" radio at the top to get data from your sidebar.

Note: This is what Firefox devs use to build the browser, so its incredibly noisy with messages from all over the place. Use some special keys in your logging or filenames and filter to try and reduce it.

Upvotes: 1

Related Questions