Debugging a browser element in a firefox extension

Question

I am trying to develop a firefox extension that adds a panel allowing the user to interact with the DOM of any webpage. I'd like to reuse web components that I've already built. The web components are built using libraries like jquery, angular, d3, and a bunch of others, most of which don't play nice with XUL. To deal with that, I'm including a browser element that contains a web page with my components.

<overlay id="testOverlay"
     xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">

  <hbox id="browser">
    <splitter></splitter>
    <vbox flex="1">
      <browser
        src="chrome://testApp/content/index.html"
        type="content"
        flex="1"/>
    </vbox>
  </hbox>
</overlay>

This works, and shows my index.html in a panel to the side as expected. However, I cannot figure out how to debug any scripts that are included on the index.html page. The documentation for debugging extensions seems very sparse.

So the question I have is: how can I point the firefox debugger at the browser element in the pane that I've created.

You're not alone in including HTML in the chrome-code. Firefox devtools is doing that too, for the left and right panels within "inspector" panel, as you can see with DOM-inspector addon. — NoBugs

Unknown Unknown · Accepted Answer · 2013-10-10T20:39:34

Follow the instructions here for enabling the browser (as opposed to content) debugger: https://developer.mozilla.org/en-US/docs/Debugging_JavaScript#JavaScript_Debugger

Once your scripts are loaded in the browser, they should become visible in the debugger's sources pane (but not before that).

If you still can't get that to work, I would love a test case and detailed steps to reproduce, so I could try and diagnose the problem :)

Debugging a browser element in a firefox extension

1 Answers