firefox-addon - 如何在 Firefox 插件中以编程方式打开开发者工具的控制台？

Question

我有一个简单的上下文菜单扩展，它将 AngularJS 范围记录到 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
    }
});

日志部分有效，但我需要填写 // Open Web Console 的空白，我想在其中自动打开 Web 开发人员工具，选择控制台选项卡，以便用户看到刚刚记录的内容。

如何使用 Firefox Addon SDK 完成此操作？

我是否也可以以编程方式在开发人员工具侧栏中显示完整对象，就像在 Web 控制台内单击记录的对象一样？

Answer 1

很酷的问题，是的，这可以通过编程方式打开。我最近是 angular 的粉丝，并且在我所有的 html5 应用程序中都使用了它。

这是将 devtools 打开到 Web 控制台的方法:

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");
      }
      */
});

这里是来自 Firefox 代码库的文档 showToolbox功能: https://dxr.mozilla.org/mozilla-central/source/browser/devtools/framework/gDevTools.jsm#378