How to inspect my standalone Xul app using DOM Inspector (or similar)?

Question

I'm trying to inspect my standalone Xul app, but the DOM Inspector's page talks just about documents loaded on the browser.

How can I inspect my standalone Xul app?

Answer 1

DOM Inspector can only inspect documents from its host application—the application it's extending (and then only the profile it's installed into). You need to install DOM Inspector on your XULRunner app if you want to be able to inspect it.

There's some documentation about how to get DOM Inspector installed on XULRunner apps,[1] and it looks correct from a quick look, but it's way overkill, especially if you already have the Add-on Manager enabled in your app.

If the Add-ons Manager isn't already enabled, add these two lines to your your application.ini:

[XRE]
EnableExtensionManager=1

I'm assuming since you are developing a XULRunner app, you already have the Error Console accessible from your app. Open it up and paste this there to open the Add-ons Manager:

window.openDialog("chrome://mozapps/content/extensions/extensions.xul",
                  "", "chrome,dialog=no,resizable=yes");

From there, click "Install…" and find the DOM Inspector XPI on your system to install it to your XULRunner app's current profile.

You should now be able to launch DOM Inspector from the command line with "-inspector" switch, but you probably want a way to open it from within your app. Include the DOM Inspector launcher hooks by adding the following line to your app's XUL:

<script type="application/javascript"
        src="chrome://inspector/content/hooks.js"/>

Now add a XUL button, menuitem, et cetera with the attribute

oncommand="inspectDOMDocument();"

Or you can make that

oncommand="inspectDOMDocument(document);"

This will make DOM Inspector default to inspecting the app's document.

[1]: https://developer.mozilla.org/en/XULRunner_tips#DOM_Inspector "XULRunner tips". MDC.