How can open Firefox developer tools in my extension's sidebar?

Question

I have developed a Firefox extension which includes a sidebar using the SDK. However, if I right-click inside the sidebar and choose "Inspect Element", I get this error in my terminal:

JavaScript error: chrome://browser/content/nsContextMenu.js, line 570: TypeError: gBrowser is null

Needless to say, nothing happens and the developer tools do not appear.

I'm creating the sidebar using the SDK like this:

require("sdk/ui/sidebar").Sidebar({ /* etc */ });

Is there a way to open the dev tools for the sidebar?

Answer 1

You should be able to just use the standard Browser Toolbox and use the inspector to select the item in your sidebar that you want to work on. It's not as seamless as using the context menu but should get you what you need.

Once you've enabled it and opened it, you can click on this button "Pick an element from the page", and then click on an element in your extension's sidebar.