CODEWITHSUNDEEP
firefox-addonfirefox-addon-sdk
Blaise
Blaise

Reputation: 13489

How do I programatically open the Developer Tools' Console in a Firefox addon?

I have a simple context menu extension that logs an AngularJS scope to unsafeWindow.console:

require("sdk/context-menu").contextMenu.Item({
    label: "Inspect Angular scope",
    context: contextMenu.PageContext(),
    contentScript: 'self.on("click", function(node) {' +
    '    if (unsafeWindow.angular) {' +
    '        unsafeWindow.console.log(unsafeWindow.angular.element(node).scope());' +
    '        self.postMessage(true);' +
    '    } else {' +
    '        unsafeWindow.alert("No Angular scope available");' +
    '    }' +
    '});',
    onMessage: function() {
        // Open Web Console
    }
});

The logging part works, but I need to fill in the blank for // Open Web Console, where I want to automatically open the Web Developer Tools, with the Console tab selected so that the user will see what just got logged.

How can this be done using the Firefox Addon SDK?

Can I also programmatically show the full object in the Developer Tools sidebar as if the logged object were clicked inside the Web Console?

Upvotes: 4

Views: 1154

Answers (1)

Noitidart
Noitidart

Reputation: 37328

Cool question, yes this can be opened programtically. I'm a recent fan of angular and am using it in all my html5 apps for firefox.

This is how to open the devtools into the web console:

var {Cu} = require('chrome');
let { devtools } = Cu.import("resource://gre/modules/devtools/Loader.jsm", {});
let myDOMWindow = Services.wm.getMostRecentWindow('navigator:browser');
let gBrowser = myDOMWindow.gBrowser;
let tt = devtools.TargetFactory.forTab(gBrowser.selectedTab);
gDevTools.showToolbox(tt, "webconsole").then(function(toolbox) {
    let inspector = toolbox.getCurrentPanel();
    console.log('inspector:', inspector);
    /*
      if (this.isRemote) {
          myDOMWindow.messageManager.sendAsyncMessage("debug:inspect", {}, {
              node: this.target
          });
          inspector.walker.findInspectingNode().then(nodeFront => {
              inspector.selection.setNodeFront(nodeFront, "browser-context-menu");
          });
      } else {
          inspector.selection.setNode(this.target, "browser-context-menu");
      }
      */
});

Heres documentation from the firefox codebase on this showToolbox function: https://dxr.mozilla.org/mozilla-central/source/browser/devtools/framework/gDevTools.jsm#378

Upvotes: 3

Related Questions